Créer une application web de partage d'expenses moderne

Introduction

Dans ce projet étape par étape, nous allons créer une application web Expense Splitter moderne et visuellement attrayante en utilisant HTML, CSS et JavaScript. Cette application vous permettra de diviser les dépenses entre un groupe de personnes et de calculer qui doit quoi à qui. Nous allons commencer de zéro et couvrir chaque étape pour construire progressivement le projet.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment créer une mise en page web responsive en utilisant HTML et CSS
Comment implémenter des fonctionnalités interactives avec JavaScript pour calculer les dépenses et les soldes
Comment styliser la page web pour avoir un design moderne et visuellement attrayant
Comment gérer les entrées utilisateur pour ajouter des dépenses et afficher dynamiquement les résultats
Comment implémenter la gestion d'erreurs pour garantir l'exactitude des données et prévenir les problèmes

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Créer les fichiers du projet et configurer la structure de base d'une application web
Construire la structure HTML pour une application Expense Splitter, y compris les champs de saisie et les placeholders
Styliser une application web à l'aide de CSS pour obtenir un design moderne et coloré
Implémenter la fonctionnalité JavaScript pour gérer l'ajout de dépenses, la mise à jour de la liste des dépenses et le calcul du bilan des dépenses
Ajouter des écouteurs d'événements pour rendre l'application interactive
Créer des fonctions en JavaScript pour effectuer des tâches spécifiques, telles que l'ajout de dépenses et la mise à jour du bilan

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript/BasicConceptsGroup -.-> javascript/functions("Functions") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("DOM Traversal") subgraph Lab Skills javascript/functions -.-> lab-445701{{"Création d'une application web de partage d'expenses moderne"}} javascript/array_methods -.-> lab-445701{{"Création d'une application web de partage d'expenses moderne"}} javascript/dom_select -.-> lab-445701{{"Création d'une application web de partage d'expenses moderne"}} javascript/dom_manip -.-> lab-445701{{"Création d'une application web de partage d'expenses moderne"}} javascript/event_handle -.-> lab-445701{{"Création d'une application web de partage d'expenses moderne"}} javascript/dom_traverse -.-> lab-445701{{"Création d'une application web de partage d'expenses moderne"}} end

Créez la structure HTML

Exigences :

Dans le <body> de index.html, créez la structure HTML de votre application.
Incluez des placeholders pour ajouter des dépenses, afficher la liste des dépenses et montrer le bilan des dépenses.

Fonctionnalité :

Créez une structure visuelle pour l'application avec des champs de saisie et des boutons.

Étapes :

Ouvrez index.html et mettez à jour la structure HTML comme suit :

<!-- Dans la balise <body> -->

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

  <div class="input-card">
    <h2>Ajoutez une dépense</h2>
    <div class="input-group">
      <label for="name">Nom :</label>
      <input type="text" id="name" placeholder="Entrez le nom" />
    </div>
    <div class="input-group">
      <label for="expense">Dépense :</label>
      <input type="number" id="expense" placeholder="Entrez la dépense" />
    </div>
    <button id="addExpense">Ajouter la dépense</button>
  </div>

  <div class="expense-card">
    <h2>Dépenses :</h2>
    <ul id="expenses"></ul>
  </div>

  <div class="summary-card">
    <h2>Bilan des dépenses :</h2>
    <ul id="summary"></ul>
  </div>
</div>

✨ Vérifier la solution et pratiquer

Stylez l'application avec CSS

Exigences :

Dans styles.css, ajoutez des règles CSS pour styliser l'application.
Créez un design moderne et coloré avec CSS.

Fonctionnalité :

Appliquez des styles CSS pour rendre l'application visuellement attrayante.

Étapes :

Ouvrez styles.css et ajoutez le code CSS suivant :

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 pour les cartes */
@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;
}

✨ Vérifier la solution et pratiquer

Ajoutez des écouteurs d'événements

Maintenant, il est temps d'ajouter des fonctionnalités à notre application Expense Splitter en utilisant JavaScript. Nous allons gérer l'ajout de dépenses, la mise à jour de la liste des dépenses et le calcul du bilan des dépenses.

Exigences :

Ajoutez des écouteurs d'événements aux boutons de votre HTML.
Assurez-vous que les écouteurs d'événements déclenchent les actions appropriées lorsque les utilisateurs interagissent avec l'application.

Fonctionnalité :

Rendez l'application interactive en écoutant les clics sur les boutons.

Étapes :

Ouvrez script.js et ajoutez le code suivant pour gérer les clics sur les boutons :

// Écouteur d'événement pour le bouton "Ajouter la dépense"
document.getElementById("addExpense").addEventListener("click", addExpense);

✨ Vérifier la solution et pratiquer

Implémentez la fonction `addExpense`

Exigences :

Créez une fonction JavaScript nommée addExpense dans script.js.
Cette fonction devrait extraire les valeurs des champs de saisie, les valider et ajouter les dépenses à un tableau.

Fonctionnalité :

Permette aux utilisateurs d'ajouter des dépenses à l'application.

Étapes :

Ouvrez script.js et ajoutez le code suivant :

const expenses = [];
// Implémentez la fonction addExpense
function addExpense() {
  const name = document.getElementById("name").value;
  const amount = parseFloat(document.getElementById("expense").value);

  if (name && amount) {
    // Ajoutez la dépense au tableau expenses
    expenses.push({ name, amount });

    // Mettez à jour la liste des dépenses et le bilan
    updateExpenseList();
    document.getElementById("name").value = "";
    document.getElementById("expense").value = "";
  }
}

✨ Vérifier la solution et pratiquer

Implémentez la fonction `updateExpenseList`

Exigences :

Créez une fonction JavaScript nommée updateExpenseList dans script.js.
Cette fonction devrait mettre à jour la liste des dépenses affichée sur la page web.

Fonctionnalité :

Afficher la liste des dépenses sur la page web à mesure que les utilisateurs les ajoutent.

Étapes :

Ouvrez script.js et ajoutez le code suivant :

// Implémentez la fonction 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);
  }

  // Appelez la fonction updateSummary
  updateSummary();
}

✨ Vérifier la solution et pratiquer

Implémentez la fonction `updateSummary`

Exigences :

Créez une fonction JavaScript nommée updateSummary dans script.js.
Cette fonction devrait calculer et afficher le bilan des dépenses, y compris qui doit quoi à qui.

Fonctionnalité :

Fournir aux utilisateurs une vue d'ensemble du bilan des dépenses.

Étapes :

Ouvrez script.js et ajoutez le code suivant :

// Implémentez la fonction 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} doit $${balance.toFixed(2)} aux autres.`;
    } else if (balance < 0) {
      li.textContent = `${expense.name} est dû $${(-balance).toFixed(
        2
      )} par les autres.`;
    } else {
      li.textContent = `${expense.name} est réglé.`;
    }

    summaryList.appendChild(li);
  }
}

✨ Vérifier la solution et pratiquer

Exécution de l'application

Ouvrez index.html dans un navigateur web.
Testez l'application en ajoutant des dépenses et en vérifiant que la liste des dépenses et le bilan sont mis à jour correctement.
L'effet de la page est le suivant :

✨ Vérifier la solution et pratiquer

Sommaire

Dans ce projet, nous avons construit progressivement une application web moderne de partage d'expenses. Nous avons créé les fichiers du projet, configuré la structure HTML, ajouté des styles CSS et implémenté la fonctionnalité JavaScript. L'application permet désormais d'ajouter des dépenses, de visualiser la liste des dépenses et de voir le bilan des dépenses. Vous pouvez personnaliser davantage les styles et ajouter plus de fonctionnalités pour améliorer la fonctionnalité et l'apparence de l'application.