Meine Reaktionsreise: Tag 20

Budget-Tracker-Projekt

Heute habe ich an einem Projekt mit dem Titel Budget Tracker gearbeitet. Ziel dieses Projekts war es, zuvor erlernte Konzepte praktisch und funktional anzuwenden. Hier ist ein Überblick über die Konzepte, die ich umgesetzt habe, und wie sie meine Fähigkeiten verbessert haben:

Konzepte erlernt und angewendet

1.HTML-Struktur und Semantik

• Für den Budget-Tracker habe ich ein semantisches und gut strukturiertes HTML-Layout verwendet, um Übersichtlichkeit und einfache Wartung zu gewährleisten. Beispielsweise wurde das Tabellenelement zur Organisation von Budgeteinträgen verwendet und Eingabefelder für die Datenerfassung hinzugefügt.

2.CSS für Styling
Ich habe gelernt, das Projekt sowohl im Hinblick auf Funktionalität als auch auf Ästhetik zu gestalten:

• Verwendete Klassen wie .budget-tracker, .input und .delete-entry zum Entwerfen und Strukturieren der Benutzeroberfläche.
• Konzentriert sich auf Prinzipien des responsiven Designs, um sicherzustellen, dass der Tracker auf verschiedenen Bildschirmgrößen funktioniert.
• Hover-Effekte für Schaltflächen wie .delete-entry hinzugefügt, um die Interaktivität zu verbessern.

3.JavaScript-Module

• Ich habe mein JavaScript modularisiert, indem ich eine separate BudgetTracker.js-Klasse erstellt habe. Dies verbessert die Wiederverwendbarkeit des Codes und die Trennung von Bedenken.

4.Lokaler Speicher

• Ich habe Local Storage implementiert, um Budgeteinträge sitzungsübergreifend beizubehalten. Benutzer können die App neu laden, ohne ihre Daten zu verlieren:

localStorage.setItem("budget-tracker-entries-dev", JSON.stringify(data));

5.Dynamische DOM-Manipulation

• Dynamisch erstellte und aktualisierte Zeilen in der Budgettabelle mithilfe von JavaScript:

this.root.querySelector(".entries").insertAdjacentHTML("beforeend", BudgetTracker.entryHtml());

6.Ereignisbehandlung
Ich habe Ereignis-Listener verwendet, um die App interaktiv zu gestalten. Zum Beispiel:

• Durch Klicken auf die Schaltfläche „Neuer Eintrag“ wird eine neue Zeile hinzugefügt.
• Durch Klicken auf die Schaltfläche „Löschen“ wird eine Zeile entfernt.

row.querySelector(".delete-entry").addEventListener("click", e => {
    this.onDeleteEntryBtcClick(e);
});

7.Datenvalidierung und Formatierung

• Angewandte Logik zur Berechnung der Gesamteinnahmen oder -ausgaben und Anzeige im entsprechenden Format mithilfe von Intl.NumberFormat:

const totalFormatted = new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD"
}).format(total);

8.Versionskontrolle und Debugging

• Verwendete Browser-Entwicklungstools, um Fehler zu debuggen und das Verhalten dynamischer Komponenten zu überprüfen.

Projektergebnisse

Dieses Projekt hat mir ein tieferes Verständnis von Folgendem vermittelt:

• Benutzerfreundliche Schnittstellen mit HTML und CSS entwerfen.
• Integration von JavaScript-Logik zur dynamischen Datenverarbeitung.
• Die Bedeutung der Code-Modularität für die Skalierung von Projekten.
• Lokalen Speicher verwenden, um den Zustand aufrechtzuerhalten.

Das Projekt hat auch meine Fähigkeiten zur Problemlösung geschärft, da ich mit Herausforderungen wie dem Umgang mit leeren Eingabefeldern und der Sicherstellung genauer Berechnungen usw. konfrontiert wurde.

Der Tracker besteht aus Eingabefeldern für Datum, Beschreibung, Typ und Betrag, mit einem dynamischen Zusammenfassungsbereich, der den Gesamtsaldo anzeigt.

Dieses Projekt hat mein Selbstvertrauen in die Entwicklung realer Anwendungen gestärkt! ?

Bereit, in React Native einzutauchen

Das obige ist der detaillierte Inhalt vonMeine Reaktionsreise: Tag 20. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!