PROJET 1 : Création d'une application de
gestion de budget
1. HTML :
- Crée une page web avec un formulaire pour que
l'utilisateur puisse saisir des dépenses et des revenus. Le
formulaire doit avoir des champs pour le montant, la
catégorie (par exemple, nourriture, transport, loisirs) et une
description.
- Ajoute un tableau en HTML pour afficher les dépenses et
les revenus saisis par l'utilisateur. Le tableau doit avoir des
colonnes pour la date, la catégorie, le montant et une
action pour supprimer une entrée.
2. CSS :
- Utilise CSS pour styliser la page, en rendant le formulaire
et le tableau attrayants. Par exemple, utilise des couleurs,
des bordures et des marges pour améliorer l'apparence.
3. JavaScript :
- Utilise JavaScript pour manipuler le DOM. Lorsque
l'utilisateur soumet le formulaire, ajoute une nouvelle ligne
dans le tableau avec les informations saisies.
- Implémente une fonctionnalité pour supprimer une entrée
du tableau lorsque l'utilisateur clique sur un bouton
"Supprimer" à côté de chaque ligne.
- Demande à l'utilisateur de saisir un montant en dollars et
affiche la conversion en euros dans une boîte de dialogue.
Tu peux utiliser un taux de conversion fixe pour simplifier
(par exemple, 1 dollar = 0,85 euro).
- Affiche également un message dans la page pour montrer
le total des dépenses et des revenus. Cet exercice te
permettra de pratiquer la manipulation du DOM, l'ajout et
la suppression d'éléments dans une liste, la création de
formulaires, et l'utilisation de JavaScript pour les
conversions et l'interaction avec l'utilisateur.
Amuse-toi bien avec ce
projet !
Projet 2: Gestionnaire d’Inventaire avec
Conversion Monétaire
Objectif : Créer une page web permettant de gérer un
inventaire de produits avec des fonctionnalités d'ajout et
suppression d'éléments, affichage de données sous forme
de tableau, formulaire pour saisir de nouveaux produits, et
conversion de prix entre dollars et euros.
Fonctionnalités :
1. Formulaire d'Ajout de Produits :
- Permet à l'utilisateur de saisir le nom et le prix d'un
produit en dollars.
- Le formulaire doit valider les données saisies pour
s'assurer qu'elles sont correctes (par exemple, le prix doit
être un nombre).
2. Affichage de la Liste des Produits :
- Une liste où chaque produit ajouté est affiché avec son
nom et son prix.
- Chaque produit de la liste doit avoir un bouton pour le
supprimer.
3. Tableau des Produits :
- Un tableau récapitulatif de tous les produits ajoutés, avec
les colonnes pour le nom du produit, le prix en dollars, le
prix converti en euros et un bouton de suppression.
- La conversion de dollars en euros doit être effectuée
automatiquement lors de l'ajout du produit.
4. Convertisseur Monétaire :
- Une section permettant à l'utilisateur de convertir un
montant en dollars en euros.
- Le taux de conversion doit être fixe pour simplifier
l'exercice (par exemple, 1 $ = 0.85 €).
5. Boîte de Dialogue :
- Une boîte de dialogue qui affiche des messages de
confirmation lorsque des actions importantes sont
effectuées (par exemple, ajout ou suppression de produits).
- La boîte de dialogue doit être visible temporairement pour
informer l'utilisateur des actions réalisées.
Composants Clés :
1. HTML :
- Structure générale de la page avec les éléments
nécessaires : formulaire, liste, tableau, boîte de dialogue.
- Balises adéquates pour chaque section (form, ul, table,
div).
2. CSS :
- Styles pour rendre la page attrayante et lisible. -
Utilisation de classes et d'ID pour cibler les éléments de la
page à styliser.
3. JavaScript :** - Gestion des interactions dynamiques,
comme l'ajout et la suppression d'éléments.
- Manipulation du DOM pour mettre à jour la liste et le
tableau en temps réel.
- Fonctionnalités de conversion et affichage des résultats.
- Contrôle de la boîte de dialogue pour afficher les
messages.
Processus :
1. Initialisation :
- Créer la structure de la page avec HTML et appliquer les
styles avec CSS.
- Configurer les événements JavaScript pour interagir avec
le DOM.
2. Ajouter des Produits :
- Utiliser le formulaire pour saisir les détails des produits et
les ajouter à la liste et au tableau.
- Valider les saisies et afficher les messages de
confirmation.
3. Gérer les Suppressions :
- Ajouter des boutons de suppression pour chaque produit,
permettant de les retirer de la liste et du tableau.
- Mettre à jour l'affichage en conséquence.
4. Conversion Monétaire :
- Implémenter une fonctionnalité pour convertir les
montants en dollars en euros et afficher le résultat.
5. Afficher les Messages :
- Utiliser la boîte de dialogue pour informer l'utilisateur des
actions (ajout, suppression, conversion).
