Erstelle eine moderne Expense Splitter-Web-App

Einführung

In diesem schrittweisen Projekt werden wir eine moderne und visuell ansprechende Expense Splitter-Webanwendung mit HTML, CSS und JavaScript erstellen. Diese Anwendung ermöglicht es Ihnen, Ausgaben zwischen einer Gruppe von Personen aufzuteilen und zu berechnen, wer wem wie viel schuldet. Wir werden von vorne beginnen und jeden Schritt abdecken, um das Projekt schrittweise aufzubauen.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt lernen Sie:

Wie man mithilfe von HTML und CSS ein responsives Webseitenlayout erstellt
Wie man interaktive Funktionen mit JavaScript implementiert, um Ausgaben und Salden zu berechnen
Wie man die Webseite stylt, um ein modernes und visuell ansprechendes Design zu erhalten
Wie man Benutzer-Eingaben für das Hinzufügen von Ausgaben und das dynamische Anzeigen von Ergebnissen behandelt
Wie man Fehlerbehandlung implementiert, um die Datengenauigkeit sicherzustellen und Probleme zu vermeiden

🏆 Errungenschaften

Nach Abschluss dieses Projekts werden Sie in der Lage sein:

Projekt-Dateien zu erstellen und die grundlegende Struktur für eine Webanwendung einzurichten
Die HTML-Struktur für eine Expense Splitter-App zu erstellen, einschließlich Eingabefelder und Platzhalter
Eine Webanwendung mit CSS zu stylen, um ein modernes und farbenfrohes Design zu erreichen
Die JavaScript-Funktionalität zur Behandlung des Hinzufügens von Ausgaben, Aktualisierung der Ausgabenliste und Berechnung der Ausgabenübersicht zu implementieren
Event-Listener hinzuzufügen, um die App interaktiv zu machen
Funktionen in JavaScript zu erstellen, um spezifische Aufgaben auszuführen, wie das Hinzufügen von Ausgaben und die Aktualisierung der Zusammenfassung

Erstellen Sie die HTML-Struktur

Anforderungen:

Erstellen Sie innerhalb des <body> von index.html die HTML-Struktur für Ihre App.
Fügen Sie Platzhalter für das Hinzufügen von Ausgaben, die Anzeige der Ausgabenliste und die Anzeige der Ausgabenübersicht hinzu.

Funktionalität:

Erstellen Sie eine visuelle Struktur für die App mit Eingabefeldern und Schaltflächen.

Schritte:

Öffnen Sie index.html und aktualisieren Sie die HTML-Struktur wie folgt:

<!-- Innerhalb des <body>-Tags -->

<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>

✨ Lösung prüfen und üben

Stylen Sie die App mit CSS

Anforderungen:

Fügen Sie in styles.css CSS-Regeln hinzu, um die App zu stylen.
Erstellen Sie mit CSS ein modernes und farbenfrohes Design.

Funktionalität:

Wenden Sie CSS-Stile an, um die App visuell ansprechend zu gestalten.

Schritte:

Öffnen Sie styles.css und fügen Sie den folgenden CSS-Code hinzu:

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 für Karten */
@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;
}

✨ Lösung prüfen und üben

Fügen Sie Event-Listener hinzu

Jetzt ist es an der Zeit, Funktionalität zu unserer Expense Splitter-App hinzuzufügen, indem wir JavaScript verwenden. Wir werden das Hinzufügen von Ausgaben, die Aktualisierung der Ausgabenliste und die Berechnung der Ausgabenübersicht behandeln.

Anforderungen:

Fügen Sie Event-Listener zu den Schaltflächen in Ihrer HTML hinzu.
Stellen Sie sicher, dass die Event-Listener die entsprechenden Aktionen auslösen, wenn Benutzer mit der App interagieren.

Funktionalität:

Machen Sie die App interaktiv, indem Sie auf Buttonklicks lauschen.

Schritte:

Öffnen Sie script.js und fügen Sie den folgenden Code hinzu, um auf Buttonklicks zu reagieren:

// Event-Listener für den "Add Expense"-Button
document.getElementById("addExpense").addEventListener("click", addExpense);

✨ Lösung prüfen und üben

Implementieren Sie die `addExpense`-Funktion

Anforderungen:

Erstellen Sie in script.js eine JavaScript-Funktion namens addExpense.
Diese Funktion sollte Werte aus Eingabefeldern extrahieren, validieren und Ausgaben zu einem Array hinzufügen.

Funktionalität:

Ermöglichen Sie es Benutzern, Ausgaben zur App hinzuzufügen.

Schritte:

Öffnen Sie script.js und fügen Sie den folgenden Code hinzu:

const expenses = [];
// Implementieren Sie die addExpense-Funktion
function addExpense() {
  const name = document.getElementById("name").value;
  const amount = parseFloat(document.getElementById("expense").value);

  if (name && amount) {
    // Fügen Sie die Ausgabe zum expenses-Array hinzu
    expenses.push({ name, amount });

    // Aktualisieren Sie die Ausgabenliste und die Zusammenfassung
    updateExpenseList();
    document.getElementById("name").value = "";
    document.getElementById("expense").value = "";
  }
}

✨ Lösung prüfen und üben

Implementieren Sie die `updateExpenseList`-Funktion

Anforderungen:

Erstellen Sie in script.js eine JavaScript-Funktion namens updateExpenseList.
Diese Funktion sollte die auf der Webseite angezeigte Ausgabenliste aktualisieren.

Funktionalität:

Zeigen Sie die Liste der Ausgaben auf der Webseite an, wenn Benutzer sie hinzufügen.

Schritte:

Öffnen Sie script.js und fügen Sie den folgenden Code hinzu:

// Implementieren Sie die updateExpenseList-Funktion
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);
  }

  // Rufen Sie die updateSummary-Funktion auf
  updateSummary();
}

✨ Lösung prüfen und üben

Implementieren Sie die `updateSummary`-Funktion

Anforderungen:

Erstellen Sie in script.js eine JavaScript-Funktion namens updateSummary.
Diese Funktion sollte die Ausgabenübersicht berechnen und anzeigen, einschließlich dessen, wer wem wie viel schuldet.

Funktionalität:

Geben Sie Benutzern einen Überblick über die Ausgabenübersicht.

Schritte:

Öffnen Sie script.js und fügen Sie den folgenden Code hinzu:

// Implementieren Sie die updateSummary-Funktion
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);
  }
}

✨ Lösung prüfen und üben

Ausführen der App

Öffnen Sie index.html in einem Webbrowser.
Testen Sie die Anwendung, indem Sie Ausgaben hinzufügen und überprüfen, ob die Ausgabenliste und die Zusammenfassung richtig aktualisiert werden.
Der Effekt der Seite ist wie folgt:

✨ Lösung prüfen und üben

Zusammenfassung

In diesem Projekt haben wir schrittweise eine moderne Expense Splitter-Web-App gebaut. Wir haben die Projektdateien erstellt, die HTML-Struktur eingerichtet, CSS-Stile hinzugefügt und die JavaScript-Funktionalität implementiert. Die App ermöglicht es Ihnen jetzt, Ausgaben hinzuzufügen, die Ausgabenliste anzuzeigen und die Ausgabenübersicht zu sehen. Sie können die Stile weiter anpassen und weitere Funktionen hinzufügen, um die Funktionalität und das Aussehen der App zu verbessern.

Erstellen einer modernen Expense Splitter-Web-App

Einführung

👀 Vorschau

🎯 Aufgaben

🏆 Errungenschaften

Direkt aus dem Tutorial heraus programmieren.

Erstellen Sie die HTML-Struktur

Stylen Sie die App mit CSS

Dein Coding-Labor im Browser.

Fügen Sie Event-Listener hinzu

Implementieren Sie die `addExpense`-Funktion

Praxis statt nur Theorie.

Implementieren Sie die `updateExpenseList`-Funktion

Implementieren Sie die `updateSummary`-Funktion

Ausführen der App

Zusammenfassung