Construir una aplicación web moderna de división de gastos

Introducción

En este proyecto paso a paso, crearemos una aplicación web de división de gastos moderna y visualmente atractiva utilizando HTML, CSS y JavaScript. Esta aplicación te permitirá dividir los gastos entre un grupo de personas y calcular quién debe qué a quién. Empezaremos desde cero y cubriremos cada paso para construir el proyecto progresivamente.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

Cómo crear un diseño de página web responsivo utilizando HTML y CSS
Cómo implementar características interactivas con JavaScript para calcular gastos y saldos
Cómo dar estilo a la página web para que tenga un diseño moderno y visualmente atractivo
Cómo manejar las entradas del usuario para agregar gastos y mostrar los resultados dinámicamente
Cómo implementar la gestión de errores para garantizar la precisión de los datos y prevenir problemas

🏆 Logros

Después de completar este proyecto, podrás:

Crear archivos de proyecto y configurar la estructura básica de una aplicación web
Construir la estructura HTML para una aplicación de división de gastos, incluyendo campos de entrada y marcadores de posición
Dar estilo a una aplicación web utilizando CSS para lograr un diseño moderno y colorido
Implementar la funcionalidad de JavaScript para manejar la adición de gastos, actualizar la lista de gastos y calcular el resumen de gastos
Agregar oyentes de eventos para hacer que la aplicación sea interactiva
Crear funciones en JavaScript para realizar tareas específicas, como agregar gastos y actualizar el resumen

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 82%. Ha recibido una tasa de reseñas positivas del 83% por parte de los estudiantes.

Crea la estructura HTML

Requisitos:

Dentro del <body> de index.html, crea la estructura HTML para tu aplicación.
Incluye marcadores de posición para agregar gastos, mostrar la lista de gastos y mostrar el resumen de gastos.

Funcionalidad:

Crea una estructura visual para la aplicación con campos de entrada y botones.

Pasos:

Abre index.html y actualiza la estructura HTML de la siguiente manera:

<!-- Dentro de la etiqueta <body> -->

<div class="container">
  <h1>Expense Splitter</h1>

  <div class="input-card">
    <h2>Agrega un gasto</h2>
    <div class="input-group">
      <label for="name">Nombre:</label>
      <input type="text" id="name" placeholder="Ingresa el nombre" />
    </div>
    <div class="input-group">
      <label for="expense">Gasto:</label>
      <input type="number" id="expense" placeholder="Ingresa el gasto" />
    </div>
    <button id="addExpense">Agregar gasto</button>
  </div>

  <div class="expense-card">
    <h2>Gastos:</h2>
    <ul id="expenses"></ul>
  </div>

  <div class="summary-card">
    <h2>Resumen de gastos:</h2>
    <ul id="summary"></ul>
  </div>
</div>

✨ Revisar Solución y Practicar

Dale estilo a la aplicación con CSS

Requisitos:

En styles.css, agrega reglas CSS para dar estilo a la aplicación.
Crea un diseño moderno y colorido con CSS.

Funcionalidad:

Aplica estilos CSS para que la aplicación sea visualmente atractiva.

Pasos:

Abre styles.css y agrega el siguiente código 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;
}

/* Animación para las tarjetas */
@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;
}

✨ Revisar Solución y Practicar

Agrega oyentes de eventos

Ahora, es hora de agregar funcionalidad a nuestra aplicación de división de gastos utilizando JavaScript. Manejaremos la adición de gastos, la actualización de la lista de gastos y el cálculo del resumen de gastos.

Requisitos:

Agrega oyentes de eventos a los botones en tu HTML.
Asegúrate de que los oyentes de eventos desencadenen las acciones adecuadas cuando los usuarios interactúan con la aplicación.

Funcionalidad:

Haz que la aplicación sea interactiva escuchando los clics en los botones.

Pasos:

Abre script.js y agrega el siguiente código para manejar los clics en los botones:

// Oyente de evento para el botón "Agregar gasto"
document.getElementById("addExpense").addEventListener("click", addExpense);

✨ Revisar Solución y Practicar

Implementa la función addExpense

Requisitos:

Crea una función de JavaScript llamada addExpense en script.js.
Esta función debe extraer valores de los campos de entrada, validarlos y agregar los gastos a una matriz.

Funcionalidad:

Permite a los usuarios agregar gastos a la aplicación.

Pasos:

Abre script.js y agrega el siguiente código:

const expenses = [];
// Implementa la función addExpense
function addExpense() {
  const name = document.getElementById("name").value;
  const amount = parseFloat(document.getElementById("expense").value);

  if (name && amount) {
    // Agrega el gasto a la matriz de gastos
    expenses.push({ name, amount });

    // Actualiza la lista de gastos y el resumen
    updateExpenseList();
    document.getElementById("name").value = "";
    document.getElementById("expense").value = "";
  }
}

✨ Revisar Solución y Practicar

Implementa la función updateExpenseList

Requisitos:

Crea una función de JavaScript llamada updateExpenseList en script.js.
Esta función debe actualizar la lista de gastos que se muestra en la página web.

Funcionalidad:

Muestra la lista de gastos en la página web a medida que los usuarios los agregan.

Pasos:

Abre script.js y agrega el siguiente código:

// Implementa la función updateExpenseList
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);
  }

  // Llama a la función updateSummary
  updateSummary();
}

✨ Revisar Solución y Practicar

Implementa la función updateSummary

Requisitos:

Crea una función de JavaScript llamada updateSummary en script.js.
Esta función debe calcular y mostrar el resumen de gastos, incluyendo quién debe qué a quién.

Funcionalidad:

Proporciona a los usuarios una visión general del resumen de gastos.

Pasos:

Abre script.js y agrega el siguiente código:

// Implementa la función updateSummary
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} debe $${balance.toFixed(
        2
      )} a los demás.`;
    } else if (balance < 0) {
      li.textContent = `${expense.name} le deben $${(-balance).toFixed(
        2
      )} a los demás.`;
    } else {
      li.textContent = `${expense.name} está saldado.`;
    }

    summaryList.appendChild(li);
  }
}

✨ Revisar Solución y Practicar

Implementa la función updateSummary

Abre index.html en un navegador web.
Prueba la aplicación agregando gastos y verificando que la lista de gastos y el resumen se actualicen correctamente.
El efecto de la página es el siguiente:

✨ Revisar Solución y Practicar

Resumen

En este proyecto, hemos construido paso a paso una moderna aplicación web de división de gastos. Creamos los archivos del proyecto, configuramos la estructura HTML, agregamos estilos CSS e implementamos la funcionalidad de JavaScript. La aplicación ahora te permite agregar gastos, ver la lista de gastos y ver el resumen de gastos. Puedes personalizar aún más los estilos y agregar más funciones para mejorar la funcionalidad y apariencia de la aplicación.

Construyendo una aplicación web moderna de división de gastos

Introducción

👀 Vista previa

🎯 Tareas

🏆 Logros

Crea la estructura HTML

Dale estilo a la aplicación con CSS

Agrega oyentes de eventos

Implementa la función addExpense

Implementa la función updateExpenseList

Implementa la función updateSummary

Implementa la función updateSummary

Resumen