열한 번째 문제: 배열 및 함수를 활용한 장바구니 계산기

요구사항

데이터 정의 (JS):

다음 구조를 가진 상품 객체 배열을 JavaScript 코드 내에 정의합니다. 이 배열을 cartItems 변수에 저장하세요.

JavaScript

const cartItems = [
    { id: 1, name: '노트북', price: 1200000, quantity: 1 },
    { id: 2, name: '무선 마우스', price: 35000, quantity: 2 },
    { id: 3, name: '모니터', price: 300000, quantity: 1 },
    { id: 4, name: '키보드', price: 80000, quantity: 3 }
];

총합 계산 함수 구현:
- calculateTotal이라는 함수를 구현합니다.
- 이 함수는 cartItems 배열을 인수로 받아야 합니다.
- 함수는 배열을 순회하며 **각 상품의 금액 (price * quantity)**을 계산하고, 이 금액들을 모두 더한 최종 합계 금액을 반환해야 합니다. (힌트: Array.prototype.reduce() 사용을 권장합니다.)
총 개수 계산 함수 구현:
- calculateTotalQuantity라는 함수를 구현합니다.
- 이 함수는 배열을 순회하며 모든 상품의 quantity를 더한 총 개수를 반환해야 합니다.
HTML 및 출력:
- <body> 안에 <h2>와 <div id="result">를 만듭니다.
- JavaScript를 사용하여 두 함수를 실행하고, 그 결과를 result 요소 안에 출력합니다.
  - 예: "총 상품 금액: 1,695,000원 (총 수량: 7개)"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>배열 및 함수를 활용한 장바구니 계산기</h2>
    <div id="result"></div>

    <script>
        const cartItems = [
            {id: 1, name: '노트북', price: 1200000, quantity: 1},
            {id: 2, name: '무선 마우스', price: 35000, quantity: 2},
            {id: 3, name: '모니터', price: 300000, quantity: 1},
            {id: 4, name: '키보드', price: 80000, quantity: 3},
            {id: 5, name: '마우스 패드', price: 10000, quantity: 2},
        ];

        document.addEventListener("DOMContentLoaded", () => {
            const resultElement = document.getElementById('result');

            function calculateTotal(items) {
                const total = items.reduce((accumulator, item) => {
                    const itemTotal = item.price * item.quantity;
                    return accumulator + itemTotal;
                }, 0);

                return total;
            }

            function calculateTotalQuantity(items) {
                const totalQuantity = items.reduce((accumulator, item) => {
                    return accumulator + item.quantity;
                }, 0);
                
                return totalQuantity;
            }

            const finalTotal = calculateTotal(cartItems);
            const finalQuantity = calculateTotalQuantity(cartItems);

            const formattedTotal = finalTotal.toLocaleString('ko-KR');

            const resultText = `총 상품 금액 : ${formattedTotal}원 (총 수량 : ${finalQuantity}개)`;

            resultElement.textContent = resultText;
        })
    </script>
</body>
</html>

저작자표시 비영리 동일조건 (새창열림)

'w. Gemini' 카테고리의 다른 글

열세 번째 문제: Promise를 사용한 비동기 체이닝 (JS 개념 심화 2) (0)	2025.10.31
열두 번째 문제: 비동기 작업 시뮬레이션 및 콜백 함수 이해 (0)	2025.10.27
열 번째 문제: To-Do List 앱 만들기 (0)	2025.10.27
아홉 번째 문제: Light/Dark 모드 토글 버튼 만들기 (0)	2025.10.27
여덟 번째 문제: Grid Area를 활용한 블로그 레이아웃 만들기 (0)	2025.10.27

요구사항

'w. Gemini' 카테고리의 다른 글

티스토리툴바