Crie um Aplicativo Web Moderno de Divisão de Despesas

Introdução

Neste projeto passo a passo, criaremos uma aplicação web moderna e visualmente atraente de divisão de despesas (Expense Splitter) usando HTML, CSS e JavaScript. Esta aplicação permitirá que você divida despesas entre um grupo de pessoas e calcule quem deve o quê a quem. Começaremos do zero e cobriremos cada etapa para construir o projeto progressivamente.

👀 Pré-visualização

Expense Splitter

🎯 Tarefas

Neste projeto, você aprenderá:

Como criar um layout de página web responsivo usando HTML e CSS
Como implementar funcionalidades interativas com JavaScript para calcular despesas e saldos
Como estilizar a página web para ter um design moderno e visualmente atraente
Como lidar com as entradas do usuário para adicionar despesas e exibir resultados dinamicamente
Como implementar tratamento de erros para garantir a precisão dos dados e evitar problemas

🏆 Conquistas

Após concluir este projeto, você será capaz de:

Criar arquivos de projeto e configurar a estrutura básica para uma aplicação web
Construir a estrutura HTML para um aplicativo de divisão de despesas (Expense Splitter), incluindo campos de entrada e espaços reservados
Estilizar uma aplicação web usando CSS para obter um design moderno e colorido
Implementar a funcionalidade JavaScript para lidar com a adição de despesas, atualização da lista de despesas e cálculo do resumo das despesas
Adicionar ouvintes de eventos (event listeners) para tornar o aplicativo interativo
Criar funções em JavaScript para realizar tarefas específicas, como adicionar despesas e atualizar o resumo

Criar a Estrutura HTML

Requisitos:

Dentro da tag <body> de index.html, crie a estrutura HTML para o seu aplicativo.
Inclua espaços reservados (placeholders) para adicionar despesas, exibir a lista de despesas e mostrar o resumo das despesas.

Funcionalidade:

Crie uma estrutura visual para o aplicativo com campos de entrada e botões.

Passos:

Abra index.html e atualize a estrutura HTML da seguinte forma:

<!-- Dentro da tag <body> -->

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

  <div class="input-card">
    <h2>Adicionar uma Despesa</h2>
    <div class="input-group">
      <label for="name">Nome:</label>
      <input type="text" id="name" placeholder="Inserir nome" />
    </div>
    <div class="input-group">
      <label for="expense">Despesa:</label>
      <input type="number" id="expense" placeholder="Inserir despesa" />
    </div>
    <button id="addExpense">Adicionar Despesa</button>
  </div>

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

  <div class="summary-card">
    <h2>Resumo das Despesas:</h2>
    <ul id="summary"></ul>
  </div>
</div>

Estilizar o Aplicativo com CSS

Requisitos:

Em styles.css, adicione regras CSS para estilizar o aplicativo.
Crie um design moderno e colorido com CSS.

Funcionalidade:

Aplique estilos CSS para tornar o aplicativo visualmente atraente.

Passos:

Abra styles.css e adicione o seguinte 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;
}

/* Animação para os cartões */
@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;
}

Adicionar Event Listeners

Agora, é hora de adicionar funcionalidade ao nosso aplicativo Expense Splitter usando JavaScript. Vamos lidar com a adição de despesas, a atualização da lista de despesas e o cálculo do resumo das despesas.

Requisitos:

Adicione event listeners aos botões no seu HTML.
Certifique-se de que os event listeners acionem as ações apropriadas quando os usuários interagem com o aplicativo.

Funcionalidade:

Torne o aplicativo interativo ouvindo os cliques nos botões.

Passos:

Abra script.js e adicione o seguinte código para lidar com os cliques nos botões:

// Event listener para o botão "Adicionar Despesa"
document.getElementById("addExpense").addEventListener("click", addExpense);

Implementar a Função addExpense

Requisitos:

Crie uma função JavaScript chamada addExpense em script.js.
Esta função deve extrair valores dos campos de entrada, validá-los e adicionar despesas a um array.

Funcionalidade:

Permitir que os usuários adicionem despesas ao aplicativo.

Passos:

Abra script.js e adicione o seguinte código:

const expenses = [];
// Implementar a função addExpense
function addExpense() {
  const name = document.getElementById("name").value;
  const amount = parseFloat(document.getElementById("expense").value);

  if (name && amount) {
    // Adicionar a despesa ao array de despesas
    expenses.push({ name, amount });

    // Atualizar a lista de despesas e o resumo
    updateExpenseList();
    document.getElementById("name").value = "";
    document.getElementById("expense").value = "";
  }
}

Implementar a Função updateExpenseList

Requisitos:

Crie uma função JavaScript chamada updateExpenseList em script.js.
Esta função deve atualizar a lista de despesas exibida na página web.

Funcionalidade:

Exibir a lista de despesas na página web à medida que os usuários as adicionam.

Passos:

Abra script.js e adicione o seguinte código:

// Implementar a função 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);
  }

  // Chamar a função updateSummary
  updateSummary();
}

Implementar a Função updateSummary

Requisitos:

Crie uma função JavaScript chamada updateSummary em script.js.
Esta função deve calcular e exibir o resumo das despesas, incluindo quem deve o quê a quem.

Funcionalidade:

Fornecer aos usuários uma visão geral do resumo das despesas.

Passos:

Abra script.js e adicione o seguinte código:

// Implementar a função 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} deve $${balance.toFixed(2)} a outros.`;
    } else if (balance < 0) {
      li.textContent = `${expense.name} tem a receber $${(-balance).toFixed(
        2
      )} de outros.`;
    } else {
      li.textContent = `${expense.name} está em dia.`;
    }

    summaryList.appendChild(li);
  }
}

Implementar a Função updateSummary

Abra index.html em um navegador web.
Teste a aplicação adicionando despesas e verificando se a lista de despesas e o resumo são atualizados corretamente.
O efeito da página é o seguinte:

Resumo

Neste projeto, construímos um aplicativo web moderno de Expense Splitter passo a passo. Criamos os arquivos do projeto, configuramos a estrutura HTML, adicionamos estilos CSS e implementamos a funcionalidade JavaScript. O aplicativo agora permite que você adicione despesas, visualize a lista de despesas e veja o resumo das despesas. Você pode personalizar ainda mais os estilos e adicionar mais recursos para aprimorar a funcionalidade e a aparência do aplicativo.

Construindo um Aplicativo Web Moderno de Divisão de Despesas

Introdução

👀 Pré-visualização

🎯 Tarefas

🏆 Conquistas

Criar a Estrutura HTML

Estilizar o Aplicativo com CSS

Adicionar Event Listeners

Implementar a Função addExpense

Implementar a Função updateExpenseList

Implementar a Função updateSummary

Implementar a Função updateSummary

Resumo