Создайте современное веб-приложение для разделения расходов

Введение

В этом пошаговом проекте мы создадим современное и визуально привлекательное веб-приложение для разделения расходов с использованием HTML, CSS и JavaScript. Это приложение позволит вам разделить расходы между группой людей и рассчитать, кто должен кому. Мы начнем с нуля и рассмотрим каждый шаг по построению проекта по порядку.

👀 Предварительный просмотр

Expense Splitter

🎯 Задачи

В этом проекте вы научитесь:

Создавать адаптивный макет веб-страницы с использованием HTML и CSS
Реализовывать интерактивные функции с использованием JavaScript для расчета расходов и балансов
Стилизовать веб-страницу, чтобы она имела современный и визуально привлекательный дизайн
Обрабатывать ввод пользователя для добавления расходов и динамического отображения результатов
Реализовывать обработку ошибок, чтобы обеспечить точность данных и предотвратить проблемы

🏆 Достижения

После завершения этого проекта вы сможете:

Создавать файлы проекта и настраивать базовую структуру веб-приложения
Построить HTML-структуру для приложения по разделению расходов, включая поля ввода и подсказки
Стилизовать веб-приложение с использованием CSS, чтобы достичь современного и яркого дизайна
Реализовать функциональность JavaScript для обработки добавления расходов, обновления списка расходов и расчета суммарного расхода
Добавить слушатели событий, чтобы сделать приложение интерактивным
Создавать функции в JavaScript для выполнения конкретных задач, таких как добавление расходов и обновление сводки

Создайте HTML-структуру

Требования:

Внутри <body> файла index.html создайте HTML-структуру для вашего приложения.
Включите подсказки для добавления расходов, отображения списка расходов и показа суммарного расхода.

Функциональность:

Создайте визуальную структуру для приложения с полями ввода и кнопками.

Шаги:

Откройте index.html и обновите HTML-структуру следующим образом:

<!-- Внутри тега <body> -->

<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. Мы будем обрабатывать добавление расходов, обновление списка расходов и расчет суммарного расхода.

Требования:

Добавьте слушатели событий для кнопок в вашем HTML.
Убедитесь, что слушатели событий вызывают соответствующие действия при взаимодействии пользователя с приложением.

Функциональность:

Сделайте приложение интерактивным, слушая нажатия на кнопки.

Шаги:

Откройте script.js и добавьте следующий код для обработки нажатий на кнопки:

// Event listener for the "Add Expense" button
document.getElementById("addExpense").addEventListener("click", addExpense);

Реализуйте функцию addExpense

Требования:

Создайте JavaScript-функцию с именем addExpense в script.js.
Эта функция должна извлекать значения из полей ввода, проверять их и добавлять расходы в массив.

Функциональность:

Разрешить пользователям добавлять расходы в приложение.

Шаги:

Откройте 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

Требования:

Создайте JavaScript-функцию с именем updateExpenseList в script.js.
Эта функция должна обновлять список расходов, отображаемый на веб-странице.

Функциональность:

Отображать список расходов на веб-странице при добавлении их пользователем.

Шаги:

Откройте 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

Требования:

Создайте JavaScript-функцию с именем updateSummary в script.js.
Эта функция должна вычислять и отображать обзор расходов, включая то, кто должен кому сколько.

Функциональность:

Предоставлять пользователям обзор обзора расходов.

Шаги:

Откройте 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} owes $${balance.toFixed(2)} to others.`;
    } else if (balance < 0) {
      li.textContent = `${expense.name} is owed $${(-balance).toFixed(
        2
      )} by others.`;
    } else {
      li.textContent = `${expense.name} is settled up.`;
    }

    summaryList.appendChild(li);
  }
}

Реализуйте функцию updateSummary

Откройте index.html в веб-браузере.
Протестируйте приложение, добавляя расходы и проверяя, правильно ли обновляются список расходов и обзор.
Эффект страницы выглядит так:

Резюме

В этом проекте мы пошагово создали современное веб-приложение для разделения расходов. Мы создали файлы проекта, настроили HTML-структуру, добавили CSS-стили и реализовали функциональность на JavaScript. Теперь приложение позволяет добавлять расходы, просматривать список расходов и получать обзор расходов. Вы можете дополнительно настроить стили и добавить больше функций, чтобы улучшить функциональность и внешний вид приложения.

Создание современного веб-приложения для разделения расходов

Введение

👀 Предварительный просмотр

🎯 Задачи

🏆 Достижения

Создайте HTML-структуру

Стилизуйте приложение с использованием CSS

Добавьте слушатели событий

Реализуйте функцию addExpense

Реализуйте функцию updateExpenseList

Реализуйте функцию updateSummary

Реализуйте функцию updateSummary

Резюме