Mon parcours React : jour 20

Projet de suivi du budget

Aujourd'hui, j'ai travaillé sur un projet intitulé Budget Tracker. Le but de ce projet était d'appliquer les concepts précédemment appris de manière pratique et fonctionnelle. Voici un aperçu des concepts que j'ai mis en œuvre et comment ils ont amélioré mes compétences :

Concepts appris et appliqués

1.Structure HTML et sémantique

• J'ai utilisé une mise en page HTML sémantique et bien structurée pour le suivi du budget, garantissant clarté et facilité de maintenance. Par exemple, l'élément table a été utilisé pour organiser les entrées budgétaires et des champs de saisie ont été ajoutés pour la collecte de données.

2.CSS pour le style
J'ai appris à styliser le projet à la fois pour la fonctionnalité et l'esthétique :

• Utilisation de classes telles que .budget-tracker, .input et .delete-entry pour concevoir et structurer l'interface utilisateur.
• Axé sur les principes de conception réactive, garantissant que le tracker fonctionne sur différentes tailles d'écran.
• Ajout d'effets de survol pour les boutons comme .delete-entry pour améliorer l'interactivité.

3.Modules JavaScript

• J'ai modularisé mon JavaScript en créant une classe BudgetTracker.js distincte. Cela a amélioré la réutilisabilité du code et la séparation des préoccupations.

4.Stockage local

• J'ai implémenté le stockage local pour conserver les entrées budgétaires d'une session à l'autre. Les utilisateurs peuvent recharger l'application sans perdre leurs données :

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

5.Manipulation dynamique du DOM

• Lignes créées et mises à jour dynamiquement dans le tableau du budget à l'aide de JavaScript :

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

6.Gestion des événements
J'ai utilisé des écouteurs d'événements pour rendre l'application interactive. Par exemple :

• Cliquer sur le bouton « Nouvelle entrée » ajoute une nouvelle ligne.
• Cliquer sur le bouton "Supprimer" supprime une ligne.

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

7.Validation et formatage des données

• Logique appliquée pour calculer le revenu ou les dépenses totaux et l'afficher dans le format approprié à l'aide de Intl.NumberFormat :

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

8.Contrôle de version et débogage

• Utilisation d'outils de développement de navigateur pour déboguer les erreurs et inspecter le comportement des composants dynamiques.

Résultats du projet

Ce projet m'a permis de mieux comprendre :

• Concevoir des interfaces conviviales avec HTML et CSS.
• Intégration de la logique JavaScript pour gérer les données de manière dynamique.
• L'importance de la modularité du code pour la mise à l'échelle des projets.
• Utiliser le stockage local pour maintenir l'état.

Le projet a également perfectionné mes compétences en résolution de problèmes, car j'ai été confronté à des défis tels que gérer des champs de saisie vides et assurer des calculs précis, etc.

Le tracker se compose de champs de saisie pour la date, la description, le type et le montant, avec une section récapitulative dynamique affichant le solde total.

Ce projet a renforcé ma confiance dans la création d'applications du monde réel ! ?

Prêt à plonger dans React Native

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!