'함수로직풀기' 카테고리의 다른 글
| 음양 더하기 (0) | 2024.12.19 |
|---|---|
| 서울에서 김서방 찾기 (1) | 2024.12.17 |
| 두 정수 사이의 합 (0) | 2024.12.13 |
| 하샤드 수 (1) | 2024.12.13 |
| 정수 제곱근 판별 (0) | 2024.12.12 |
분류 전체보기
-
핸드폰 번호 가리기
14:36:05
-
스타벅스 만들기
13:59:59
-
음양 더하기
2024.12.19
-
객체 프로퍼티 접근 및 조회
2024.12.18
- 서울에서 김서방 찾기 2024.12.17 1
- 삼항연산자 2024.12.16 1
- 로또 번호 생성기 과제 2024.12.16
- JavaScript 배열 고급 메서드 활용`slice`, `splice`, `reverse` 2024.12.13
핸드폰 번호 가리기
2024. 12. 20. 14:36
스타벅스 만들기
2024. 12. 20. 13:59
스타벅스 주문 시스템 만들기 (난이도 상)
<aside> 🔥
이 과제에서는 HTML, CSS, JavaScript를 사용하여 간단한 스타벅스 주문 시스템을 만드는 법을 배웁니다. 여러분은 HTML, CSS, JavaScript를 활용하여 기본 구조를 완성하고, 일부 로직을 직접 구현해보세요.
</aside>
Screen Recording 2024-09-09 at 3.38.33 AM.mov
1단계: 프로젝트 파일 구조 설정
먼저, 프로젝트를 시작하기 위해 기본 파일 구조를 설정합니다.
- 새 폴더 생성: 컴퓨터의 원하는 위치에 'starbucks-order-system'이라는 폴더를 만듭니다.
- 파일 생성: 아래와 같은 파일들을 폴더 안에 생성하세요.
- index.html
- styles.css
- script.js
2단계: HTML 파일 만들기
이제 index.html 파일을 열고, 아래의 코드를 참고하여 HTML 구조를 완성해보세요. 링크 부분은 스스로 채워보세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스타벅스 주문 시스템</title>
<!-- 여기에 styles.css 파일을 로드하는 코드를 추가하세요 -->
</head>
<body>
<h1>스타벅스 메뉴</h1>
<div id="menu">
<h2>메뉴</h2>
<!-- 메뉴 아이템이 여기에 추가될 것입니다 -->
</div>
<div id="order-summary">
<h2>주문 내역</h2>
<ul id="order-list"></ul>
<p>총 가격: ₩<span id="total-price">0</span></p>
<button id="submit-order">주문 제출</button>
</div>
<!-- 여기에 script.js 파일을 로드하는 코드를 추가하세요 -->
</body>
</html>
3단계: CSS 파일 만들기
styles.css 파일에서 기본적인 스타일을 제공했습니다. 나머지 스타일은 스스로 작성해보세요.
body {
font-family: Arial, sans-serif;
padding: 20px;
max-width: 600px;
margin: 0 auto;
}
h1 {
text-align: center;
}
/* 여기에 #menu와 #order-summary의 스타일을 추가하세요. */
/* 버튼과 관련된 스타일은 아래의 예시를 참고하여 완성하세요. */
button {
background-color: #00704a;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #005936;
}
4단계: JavaScript 파일 만들기
이제 script.js 파일을 열고, 아래의 코드를 참고하여 나머지 로직을 직접 구현해보세요.
document.addEventListener('DOMContentLoaded', () => {
const menu = [
{ name: '아메리카노', price: 4100 },
{ name: '카페라떼', price: 4600 },
{ name: '카푸치노', price: 4600 },
{ name: '카라멜 마끼아또', price: 5800 },
{ name: '자바 칩 프라푸치노', price: 6300 },
{ name: '딸기 요거트 블렌디드', price: 6300 }
];
let order = {};
let totalPrice = 0;
const menuContainer = document.getElementById('menu');
const orderList = document.getElementById('order-list');
const totalPriceElement = document.getElementById('total-price');
const submitOrderButton = document.getElementById('submit-order');
// TODO-1: 메뉴 아이템을 화면에 표시하는 코드를 작성하세요.
// 힌트: menu 배열을 반복문(forEach)을 사용해 순회하며,
// 각 메뉴 아이템을 div 요소로 생성한 후 menuContainer에 추가하세요.
// div 요소 안에는 메뉴 이름과 가격을 표시하는 span 태그,
// 그리고 '주문 추가' 버튼을 추가해야 합니다.
// '주문 추가' 버튼에는 각 메뉴 아이템의 인덱스를 data-index 속성으로 저장하여,
// 클릭 시 해당 메뉴를 식별할 수 있게 만드세요.
// TODO-2: 주문 추가 로직을 작성하세요.
// 힌트: menuContainer에 이벤트 리스너를 추가하고, 이벤트가 발생한 대상이 버튼인지 확인합니다.
// 버튼의 data-index 속성을 이용해 어떤 메뉴가 클릭되었는지 파악한 후,
// 해당 메뉴의 수량을 증가시키거나 새로 추가하세요.
// 이후, 총 가격(totalPrice)을 업데이트하고,
// 주문 목록을 업데이트하는 updateOrderList 함수를 호출하세요.
// 예시 코드:
// menu.forEach((item, index) => {
// // 각 메뉴 아이템에 대해 div 요소 생성 및 메뉴 아이템 추가
// });
// menuContainer.addEventListener('click', (event) => {
// if (event.target.tagName === 'BUTTON') {
// // 클릭된 버튼의 메뉴 아이템을 주문에 추가하는 로직 작성
// }
// });
// 주문 내역 업데이트 함수
function updateOrderList() {
orderList.innerHTML = '';
for (let itemName in order) {
const orderItem = order[itemName];
const orderItemElement = document.createElement('li');
orderItemElement.innerHTML = `
${itemName} - ₩${orderItem.price.toLocaleString()} x${orderItem.quantity}
<button class="remove" data-item="${itemName}">삭제</button>
`;
orderList.appendChild(orderItemElement);
}
totalPriceElement.textContent = totalPrice.toLocaleString();
}
// 아이템 삭제 로직
orderList.addEventListener('click', (event) => {
const itemName = event.target.getAttribute('data-item');
if (event.target.classList.contains('remove')) {
totalPrice -= order[itemName].price * order[itemName].quantity;
delete order[itemName];
updateOrderList();
}
});
// 주문 제출 로직
submitOrderButton.addEventListener('click', () => {
if (Object.keys(order).length > 0) {
alert('주문해 주셔서 감사합니다!');
order = {};
totalPrice = 0;
updateOrderList();
} else {
alert('주문 내역이 비어 있습니다!');
}
});
});
추가 설명:
- 메뉴 표시 힌트:
- menu.forEach를 사용하여 각 메뉴 아이템을 순회하면서, document.createElement('div')를 통해 메뉴 아이템을 감쌀 div 요소를 생성합니다.
- 생성된 div 안에 메뉴 이름과 가격을 표시할 span 요소를 추가하고, '주문 추가' 버튼을 생성하여 div에 추가합니다.
- 마지막으로, 생성된 div를 menuContainer.appendChild를 통해 화면에 추가합니다.
- 주문 추가 로직 힌트:
- menuContainer.addEventListener를 사용하여 클릭 이벤트를 감지하고, 클릭된 요소가 버튼인지 event.target.tagName을 통해 확인합니다.
- 버튼의 data-index 속성을 활용하여, menu 배열에서 해당 메뉴를 가져오고, 이 메뉴가 이미 주문에 있는지 확인합니다.
- 이미 주문에 있다면 order[menuItem.name].quantity += 1;로 수량을 증가시키고, 없다면 새로운 객체로 추가합니다.
- 총 가격을 업데이트하고, updateOrderList() 함수를 호출하여 주문 목록을 갱신합니다.
- 나머지 로직들은 위에 구현해 놓은 것들을 그대로 쓰시면 됩니다. 지금은 ‘아..! 이렇게 구현이 되구나! 정도로 한번 보기만 해주세요!’
'프론트엔드[개발자에 대한 정보]' 카테고리의 다른 글
| JavaScript 배열 고급 메서드 활용`slice`, `splice`, `reverse` (0) | 2024.12.13 |
|---|---|
| 배열의 개념과 기본적인 생성 방법을 익혀보자. (0) | 2024.12.12 |
| JavaScript 반복문의 기초와 활용[1부터 100까지의 합을 계산하는 프로그램.] (1) | 2024.12.11 |
| JavaScript 연산자의 종류와 사용법 (0) | 2024.12.10 |
| JavaScript 데이터 타입의 종류와 특징 이해하기 (1) | 2024.12.09 |
음양 더하기
2024. 12. 19. 14:42
설명
- answer 변수를 0으로 초기화합니다.
- for 루프를 사용하여 absolutes 배열의 각 요소를 순회합니다.
- signs[i]가 true이면 absolutes[i]를 더하고, false이면 absolutes[i]를 뺍니다.
- 최종 합계인 answer를 반환합니다.
'함수로직풀기' 카테고리의 다른 글
| 핸드폰 번호 가리기 (0) | 2024.12.20 |
|---|---|
| 서울에서 김서방 찾기 (1) | 2024.12.17 |
| 두 정수 사이의 합 (0) | 2024.12.13 |
| 하샤드 수 (1) | 2024.12.13 |
| 정수 제곱근 판별 (0) | 2024.12.12 |
객체 프로퍼티 접근 및 조회
2024. 12. 18. 14:58
1️⃣ 객체 프로퍼티 접근 및 조회
- 점 표기법(객체명.key)과 대괄호 표기법(객체명['key'])으로 프로퍼티에 접근할 수 있습니다.
- 키에 공백 또는 특수문자가 포함된 경우 대괄호 표기법을 사용해야 합니다.
- 객체의 프로퍼티 값을 조회하거나 변경할 수 있습니다.
const person = {
name: 'John',
age: 30,
gender: 'male',
'place of birth': 'Seoul',
};
console.log(person.name); // 점 표기법
console.log(person.age); // 점 표기법
console.log(person['gender']); // 대괄호 표기법
console.log(person['place of birth']); // 대괄호 표기법// 결과
John
30
male
Seoulperson.age = 20;
console.log(person);// 결과
{ name: 'John', age: 20, gender: 'male', 'place of birth': 'Seoul' }
2️⃣ 객체 프로퍼티 추가 및 삭제
점 표기법 사용하기
- object.key = value 형식으로 객체에 새로운 프로퍼티를 추가하거나 수정할 수 있습니다.
- delete object.key 형식으로 객체의 프로퍼티를 삭제할 수 있습니다.
person.bloodType = 'AB+';delete person.gender;
대괄호 표기법 사용하기
- object['key'] = value 형식으로 객체에 새로운 프로퍼티를 추가하거나 수정할 수 있습니다.
- delete object['key'] 형식으로 객체의 프로퍼티를 삭제할 수 있습니다.
person['bloodType'] = 'AB+';delete person['gender'];
객체에 생성된 데이터 key, value로 구성된 property 입니다.
'자바스크립트' 카테고리의 다른 글
| 삼항연산자 (1) | 2024.12.16 |
|---|---|
| 로또 번호 생성기 과제 (0) | 2024.12.16 |
| switch 함수 (0) | 2024.12.12 |
| if 문 / if ...else 문/ else if 절 (0) | 2024.12.11 |
| 비교 연산자 (0) | 2024.12.10 |
서울에서 김서방 찾기
2024. 12. 17. 14:29
'함수로직풀기' 카테고리의 다른 글
| 핸드폰 번호 가리기 (0) | 2024.12.20 |
|---|---|
| 음양 더하기 (0) | 2024.12.19 |
| 두 정수 사이의 합 (0) | 2024.12.13 |
| 하샤드 수 (1) | 2024.12.13 |
| 정수 제곱근 판별 (0) | 2024.12.12 |
삼항연산자
2024. 12. 16. 18:01
1️⃣ 삼항 연산자
- 조건에 따라 값을 간결하게 선택할 수 있는 연산자입니다.
- 항이 총 3개 있기 때문에 삼항 연산자라고 부릅니다.
조건식 ? 참일 때의 반환값 : 거짓일 때의 반환값- 조건식은 참 또는 거짓으로 평가되는 표현식입니다.
- 조건식이 참인 경우 콜론 왼쪽의 값이, 거짓인 경우 콜론 오른쪽의 값이 반환됩니다.
2️⃣ 삼항 연산자 활용하기
- 삼항 연산자를 사용해 if...else 문을 보다 간결하게 작성할 수 있습니다.
const score = 85;
if (score >= 70) {
console.log('Pass');
} else {
console.log('Fail');
}// 결과
Passconst score = 85;
const result = score >= 70 ? 'Pass' : 'Fail';
console.log(result);// 결과
Pass
⚠️ 여기서 잠깐!
- 삼항 연산자가 항상 if...else 문보다 좋은 것은 아닙니다.
- 삼항 연산자를 중첩해서 사용하면 코드가 복잡해져 가독성이 떨어집니다.
- 삼항 연산자는 조건이 간단하고, 조건에 따라 특정 값을 반환하는 경우에 사용됩니다.
- 복잡한 조건 분기에 따라 결과를 처리할 때는 if...else 문이 더 적합합니다.
const score = 85;
const grade =
score > 90 ? 'A' : score > 80 ? 'B' : score > 70 ? 'C' : 'F';
console.log(grade);// 결과
B  |
'자바스크립트' 카테고리의 다른 글
| 객체 프로퍼티 접근 및 조회 (0) | 2024.12.18 |
|---|---|
| 로또 번호 생성기 과제 (0) | 2024.12.16 |
| switch 함수 (0) | 2024.12.12 |
| if 문 / if ...else 문/ else if 절 (0) | 2024.12.11 |
| 비교 연산자 (0) | 2024.12.10 |
로또 번호 생성기 과제
2024. 12. 16. 17:22
로또 번호 생성기 과제 (난이도 하)
<aside> 🔥
이 과제에서는 HTML, CSS, JavaScript를 사용하여 간단한 로또 번호 생성기를 만드는 법을 배웁니다. 특히, 로또 번호를 생성하는 로직도 직접 한번 생성을 해보면서 함수 생성에 대한 연습을 해볼게요.
</aside>
Screen Recording 2024-09-09 at 3.09.12 AM.mov
1단계: 프로젝트 파일 구조 설정
먼저, 프로젝트를 시작하기 위해 기본 파일 구조를 설정합니다.
- 새 폴더 생성: 컴퓨터의 원하는 위치에 'lotto-generator'라는 폴더를 만듭니다.
- 파일 생성: 아래와 같은 파일들을 폴더 안에 생성하세요.
- index.html
- styles.css
- script.js
2단계: HTML 파일 만들기
이제 index.html 파일을 열고, 아래의 코드를 입력합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로또 번호 생성기</title>
<!-- 여기에 styles.css 파일을 불러오는 링크를 추가하세요 -->
</head>
<body>
<div class="container">
<h1>로또 번호 생성기</h1>
<button id="generateButton">행운의 넘버!</button>
<div id="numbers"></div>
</div>
<!-- 여기에 script.js 파일을 불러오는 스크립트를 추가하세요 -->
</body>
</html>
과제: HTML 파일 완성하기
- <head> 태그 안에 styles.css 파일을 불러오는 <link> 태그를 추가하세요.
- <body> 태그 끝 부분에 script.js 파일을 불러오는 <script> 태그를 추가하세요.
이 파일들을 불러오지 않으면 스타일과 기능이 적용되지 않습니다.
3단계: CSS 파일 만들기
- 이제 styles.css 파일을 열고, 아래의 기본적인 스타일을 적용합니다.
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
/* 여기에 container 클래스에 대한 스타일을 추가하세요 */
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
/* 여기에 numbers ID에 대한 스타일을 추가하세요 */
과제: CSS 파일 완성하기
- 제가 기본적인 css 만 했으니, 여러분들이 나머지는 완성시켜주세요!
- .container 클래스에 대한 스타일을 추가하세요. (배경색, 패딩, 그림자 등을 지정해 보세요.)
- #numbers ID에 대한 스타일을 추가하세요. (폰트 크기나 텍스트 정렬 등을 지정해 보세요.)
4단계: JavaScript 파일 만들기
마지막으로, script.js 파일을 열고, 아래의 코드를 입력합니다.
// 버튼이 눌렸을 때, 이벤트가 작동되도록 이벤트리스너를 넣어준 코드입니다.
document.getElementById('generateButton').addEventListener('click', function() {
let numbers = generateLottoNumbers(); // 버튼이 눌리면 이 함수가 실행이 될 거에요.
document.getElementById('numbers').textContent = numbers.join(', ');
});
function generateLottoNumbers() {
/* 여기에 generateLottoNumbers 함수를 완성해주세요. */
}
과제: generateLottoNumbers 함수 완성하기
generateLottoNumbers 함수는 로또 번호를 생성하는 역할을 합니다. 다음 힌트를 참고하여 함수를 작성하세요:
- 빈 배열 만들기: 로또 번호를 저장할 빈 배열을 만듭니다.
- 반복문 사용: 배열에 6개의 번호가 들어갈 때까지 반복문을 사용하세요.
- 랜덤 번호 생성: 1부터 45 사이의 랜덤 번호를 생성합니다. 이때, Math.random()과 Math.floor() 함수를 사용하면 유용합니다.
- 중복 검사: 배열에 이미 같은 번호가 들어있지 않은지 확인한 후, 배열에 추가하세요. 배열의 includes() 메서드를 사용하면 중복 검사가 가능합니다.
- 배열 반환: 6개의 번호가 모두 배열에 추가되면, 배열을 반환합니다.
힌트를 참고하여, generateLottoNumbers 함수를 직접 작성해보세요!
5단계: 프로젝트 실행
모든 파일을 저장한 후, index.html 파일을 브라우저에서 열어보세요. HTML, CSS, JavaScript 파일을 올바르게 작성하고 링크했다면, "Generate Numbers" 버튼을 클릭했을 때 1부터 45까지의 로또 번호가 화면에 표시될 것입니다.
추가 과제 (Optional)
기본 기능을 완성했다면, 아래의 추가 과제를 시도해 보세요:
- 번호를 오름차순으로 정렬해서 출력하기
- 이전 결과를 저장하고, 새 결과와 비교하기
- 결과를 더 멋지게
'자바스크립트' 카테고리의 다른 글
| 객체 프로퍼티 접근 및 조회 (0) | 2024.12.18 |
|---|---|
| 삼항연산자 (1) | 2024.12.16 |
| switch 함수 (0) | 2024.12.12 |
| if 문 / if ...else 문/ else if 절 (0) | 2024.12.11 |
| 비교 연산자 (0) | 2024.12.10 |
JavaScript 배열 고급 메서드 활용`slice`, `splice`, `reverse`
2024. 12. 13. 15:35
JavaScript 배열 고급 메서드 활용
- `slice`, `splice`, `reverse` 메서드의 동작 방식을 이해하고, 이를 활용한 실습 예제를 작성하세요.
- 예: 배열의 특정 구간을 잘라내거나, 특정 위치에 데이터를 삽입 및 삭제하는 로직 구현.
'프론트엔드[개발자에 대한 정보]' 카테고리의 다른 글
| 스타벅스 만들기 (0) | 2024.12.20 |
|---|---|
| 배열의 개념과 기본적인 생성 방법을 익혀보자. (0) | 2024.12.12 |
| JavaScript 반복문의 기초와 활용[1부터 100까지의 합을 계산하는 프로그램.] (1) | 2024.12.11 |
| JavaScript 연산자의 종류와 사용법 (0) | 2024.12.10 |
| JavaScript 데이터 타입의 종류와 특징 이해하기 (1) | 2024.12.09 |