모던 Expense Splitter 웹 앱 만들기

소개

이 단계별 프로젝트에서는 HTML, CSS 및 JavaScript 를 사용하여 현대적이고 시각적으로 매력적인 Expense Splitter 웹 애플리케이션을 만들 것입니다. 이 애플리케이션을 통해 여러 사람 간의 비용을 분할하고 누가 누구에게 얼마를 빚지고 있는지 계산할 수 있습니다. 처음부터 시작하여 프로젝트를 점진적으로 구축하기 위한 각 단계를 다룰 것입니다.

👀 미리보기

🎯 작업

이 프로젝트에서 다음을 배우게 됩니다.

HTML 및 CSS 를 사용하여 반응형 웹 페이지 레이아웃을 만드는 방법
JavaScript 를 사용하여 비용과 잔액을 계산하는 대화형 기능을 구현하는 방법
현대적이고 시각적으로 매력적인 디자인을 갖도록 웹 페이지 스타일을 지정하는 방법
비용을 추가하고 결과를 동적으로 표시하기 위한 사용자 입력을 처리하는 방법
데이터 정확성을 보장하고 문제를 방지하기 위해 오류 처리를 구현하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다.

프로젝트 파일을 생성하고 웹 애플리케이션의 기본 구조를 설정합니다.
입력 필드와 자리 표시자를 포함하여 Expense Splitter 앱의 HTML 구조를 구축합니다.
CSS 를 사용하여 현대적이고 다채로운 디자인을 달성하도록 웹 애플리케이션의 스타일을 지정합니다.
비용 추가, 비용 목록 업데이트 및 비용 요약 계산을 처리하는 JavaScript 기능을 구현합니다.
앱을 대화형으로 만들기 위해 이벤트 리스너를 추가합니다.
비용 추가 및 요약 업데이트와 같은 특정 작업을 수행하는 JavaScript 함수를 만듭니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 82%입니다.학습자들로부터 83%의 긍정적인 리뷰율을 받았습니다.

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 기능을 구현했습니다. 이제 앱을 통해 비용을 추가하고, 비용 목록을 보고, 비용 요약을 확인할 수 있습니다. 스타일을 더 사용자 정의하고 더 많은 기능을 추가하여 앱의 기능과 모양을 향상시킬 수 있습니다.

모던 Expense Splitter 웹 앱 구축

소개

👀 미리보기

🎯 작업

🏆 성과

HTML 구조 생성

CSS 로 앱 스타일 지정

이벤트 리스너 추가

addExpense 함수 구현

updateExpenseList 함수 구현

updateSummary 함수 구현

updateSummary 함수 구현

요약