소개
이 단계별 프로젝트에서는 HTML, CSS 및 JavaScript 를 사용하여 현대적이고 시각적으로 매력적인 Expense Splitter 웹 애플리케이션을 만들 것입니다. 이 애플리케이션을 통해 여러 사람 간의 비용을 분할하고 누가 누구에게 얼마를 빚지고 있는지 계산할 수 있습니다. 처음부터 시작하여 프로젝트를 점진적으로 구축하기 위한 각 단계를 다룰 것입니다.
👀 미리보기
🎯 작업
이 프로젝트에서 다음을 배우게 됩니다.
- HTML 및 CSS 를 사용하여 반응형 웹 페이지 레이아웃을 만드는 방법
- JavaScript 를 사용하여 비용과 잔액을 계산하는 대화형 기능을 구현하는 방법
- 현대적이고 시각적으로 매력적인 디자인을 갖도록 웹 페이지 스타일을 지정하는 방법
- 비용을 추가하고 결과를 동적으로 표시하기 위한 사용자 입력을 처리하는 방법
- 데이터 정확성을 보장하고 문제를 방지하기 위해 오류 처리를 구현하는 방법
🏆 성과
이 프로젝트를 완료하면 다음을 수행할 수 있습니다.
- 프로젝트 파일을 생성하고 웹 애플리케이션의 기본 구조를 설정합니다.
- 입력 필드와 자리 표시자를 포함하여 Expense Splitter 앱의 HTML 구조를 구축합니다.
- CSS 를 사용하여 현대적이고 다채로운 디자인을 달성하도록 웹 애플리케이션의 스타일을 지정합니다.
- 비용 추가, 비용 목록 업데이트 및 비용 요약 계산을 처리하는 JavaScript 기능을 구현합니다.
- 앱을 대화형으로 만들기 위해 이벤트 리스너를 추가합니다.
- 비용 추가 및 요약 업데이트와 같은 특정 작업을 수행하는 JavaScript 함수를 만듭니다.
HTML 구조 생성
요구 사항:
index.html의<body>내부에 앱의 HTML 구조를 생성합니다.비용 추가, 비용 목록 표시 및 비용 요약을 표시하기 위한 자리 표시자를 포함합니다.
기능:
- 입력 필드와 버튼을 사용하여 앱의 시각적 구조를 만듭니다.
단계:
index.html을 열고 HTML 구조를 다음과 같이 업데이트합니다.
<!-- Inside the <body> tag -->
<div class="container">
<h1>Expense Splitter</h1>
<div class="input-card">
<h2>Add an Expense</h2>
<div class="input-group">
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Enter name" />
</div>
<div class="input-group">
<label for="expense">Expense:</label>
<input type="number" id="expense" placeholder="Enter expense" />
</div>
<button id="addExpense">Add Expense</button>
</div>
<div class="expense-card">
<h2>Expenses:</h2>
<ul id="expenses"></ul>
</div>
<div class="summary-card">
<h2>Expense Summary:</h2>
<ul id="summary"></ul>
</div>
</div>
CSS 로 앱 스타일 지정
요구 사항:
styles.css에서 앱의 스타일을 지정하는 CSS 규칙을 추가합니다.- CSS 를 사용하여 현대적이고 다채로운 디자인을 만듭니다.
기능:
CSS 스타일을 적용하여 앱을 시각적으로 매력적으로 만듭니다.
단계:
styles.css를 열고 다음 CSS 코드를 추가합니다.
body {
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #ff7f50, #ff3399);
margin: 0;
padding: 0;
color: #333;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
padding: 20px;
}
h1 {
font-size: 2rem;
margin: 20px 0;
color: #fff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.input-card,
.expense-card,
.summary-card {
background: rgba(255, 255, 255, 0.9);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
border-radius: 10px;
padding: 20px;
margin: 20px 0;
width: 100%;
max-width: 400px;
text-align: left;
}
.input-card h2,
.expense-card h2,
.summary-card h2 {
color: #007bff;
font-size: 1.5rem;
margin-bottom: 15px;
}
.input-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"],
input[type="number"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background: linear-gradient(135deg, #ff3399, #ff7f50);
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
transition: background 0.3s ease;
}
button:hover {
background: linear-gradient(135deg, #ff7f50, #ff3399);
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
margin-bottom: 10px;
}
/* Animation for cards */
@keyframes fade-in {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.input-card,
.expense-card,
.summary-card {
animation: fade-in 0.5s ease;
}
이벤트 리스너 추가
이제 JavaScript 를 사용하여 Expense Splitter 앱에 기능을 추가할 차례입니다. 비용 추가, 비용 목록 업데이트 및 비용 요약 계산을 처리합니다.
요구 사항:
- HTML 의 버튼에 이벤트 리스너를 추가합니다.
- 사용자가 앱과 상호 작용할 때 이벤트 리스너가 적절한 작업을 트리거하는지 확인합니다.
기능:
- 버튼 클릭을 감지하여 앱을 대화형으로 만듭니다.
단계:
script.js를 열고 버튼 클릭을 처리하는 다음 코드를 추가합니다.
// Event listener for the "Add Expense" button
document.getElementById("addExpense").addEventListener("click", addExpense);
addExpense 함수 구현
요구 사항:
script.js에서addExpense라는 JavaScript 함수를 생성합니다.- 이 함수는 입력 필드에서 값을 추출하고, 유효성을 검사하며, 비용을 배열에 추가해야 합니다.
기능:
- 사용자가 앱에 비용을 추가할 수 있도록 합니다.
단계:
script.js를 열고 다음 코드를 추가합니다.
const expenses = [];
// Implement the addExpense function
function addExpense() {
const name = document.getElementById("name").value;
const amount = parseFloat(document.getElementById("expense").value);
if (name && amount) {
// Add the expense to the expenses array
expenses.push({ name, amount });
// Update the expense list and summary
updateExpenseList();
document.getElementById("name").value = "";
document.getElementById("expense").value = "";
}
}
updateExpenseList 함수 구현
요구 사항:
script.js에서updateExpenseList라는 JavaScript 함수를 생성합니다.- 이 함수는 웹 페이지에 표시되는 비용 목록을 업데이트해야 합니다.
기능:
- 사용자가 비용을 추가할 때 웹 페이지에 비용 목록을 표시합니다.
단계:
script.js를 열고 다음 코드를 추가합니다.
// Implement the updateExpenseList function
function updateExpenseList() {
const expensesList = document.getElementById("expenses");
expensesList.innerHTML = "";
for (const expense of expenses) {
const li = document.createElement("li");
li.textContent = `${expense.name}: $${expense.amount.toFixed(2)}`;
expensesList.appendChild(li);
}
// Call the updateSummary function
updateSummary();
}
updateSummary 함수 구현
요구 사항:
script.js에서updateSummary라는 JavaScript 함수를 생성합니다.- 이 함수는 누가 누구에게 얼마를 빚졌는지 포함하여 비용 요약을 계산하고 표시해야 합니다.
기능:
- 사용자에게 비용 요약에 대한 개요를 제공합니다.
단계:
script.js를 열고 다음 코드를 추가합니다.
// Implement the updateSummary function
function updateSummary() {
const summaryList = document.getElementById("summary");
summaryList.innerHTML = "";
const totalExpense = expenses.reduce(
(total, expense) => total + expense.amount,
0
);
const averageExpense = totalExpense / expenses.length;
for (const expense of expenses) {
const balance = expense.amount - averageExpense;
const li = document.createElement("li");
if (balance > 0) {
li.textContent = `${expense.name}은 다른 사람들에게 $${balance.toFixed(
2
)}를 빚졌습니다.`;
} else if (balance < 0) {
li.textContent = `${
expense.name
}은 다른 사람들로부터 $${(-balance).toFixed(2)}를 받아야 합니다.`;
} else {
li.textContent = `${expense.name}은 정산되었습니다.`;
}
summaryList.appendChild(li);
}
}
updateSummary 함수 구현
- 웹 브라우저에서
index.html을 엽니다.
- 비용을 추가하고 비용 목록 및 요약이 올바르게 업데이트되는지 확인하여 애플리케이션을 테스트합니다.
- 페이지의 효과는 다음과 같습니다.
요약
이 프로젝트에서 우리는 현대적인 Expense Splitter 웹 앱을 단계별로 구축했습니다. 프로젝트 파일을 생성하고, HTML 구조를 설정하고, CSS 스타일을 추가하고, JavaScript 기능을 구현했습니다. 이제 앱을 통해 비용을 추가하고, 비용 목록을 보고, 비용 요약을 확인할 수 있습니다. 스타일을 더 사용자 정의하고 더 많은 기능을 추가하여 앱의 기능과 모양을 향상시킬 수 있습니다.
