Shopping List
Conception en langages HTML, JS et CSS d’une shopping list
Date
2025
Outils utilisés
CSS
HTML
JS
Brief
de projet
Réaliser une shopping list où on puisse
– saisir un produit dans la liste
-ôter un produit précédemment rentré dans la liste
Objectifs
définis
1
Calculatrice
Pour ce projet, je voulais insérer une calculatrice qui affiche sur la liste le prix total de chaque article et, à la fin de la liste, le prix total de tous les articles saisis.
2
Filtre
Un des mes objectifs était d’avoir une possibilité de filtrer les produits selon leur catégorie. Ici, j’ai choisi d’incarner une petite entreprise vendant des accessoires en fleurs séchées. Les catégories était donc : boucles d’oreilles, accesssoires de cheveux, décorations.
3
Cartes interactives
Je voulais afficher mes produits sous forme de cartes avec une photo, un titre et une petite description. Je voulais également que ces cartes soit un minimum interactives.
Graphisme
Web Design
HTML
CSS
Codage
Web Design
JS
HTML
CSS
CSS
Web Design
CSS
Rôles
dans ce projet
Web Designer
Chefferie de projet
Processus
de création
1 Recherche
Recherche d’illustrations et de couleurs inspirantes, adaptées à l’univers de « La Fleur du Bonheur » afin de créer une identité visuelle.
2 Structure
Création de la structure de ma page : entête, partie recherche, grille de produits présentant les produits sous forme de cartes, shopping list
3 Données
Les données des cartes des produits sont répertoriées dans le fichier JS, sous forme d’objets, ce qui permet ensuite de changer leur affichage dynamiquement.
4 Fonctions
Définition de deux fonctions JS, une affichant sous forme de carte les informations des produits, et une permettant d’afficher les produits dans la liste et de calculer leur prix
Compétences
acquises lors de ce projet
Hard Skills
HTML
JS
CSS
Soft Skills
Chefferie de projet
Travail en autonomie