Retour aux projets

Burger Factory : site de création de burgers

05/10/26 → 12/10/26

TD JavaScript : site multi-pages d'un restaurant de burgers avec carrousel, création d'ingrédients et de burgers avec gestion du stock sauvegardée dans le navigateur, et page « Qui sommes-nous » alimentée par l'API publique de l'Agence Bio.

JavaScript HTML CSS localStorage API REST Git

Contexte

TD de JavaScript réalisé en octobre 2026, au début de ma deuxième année. Le sujet : créer le site de « Burger Factory », un restaurant fictif, en JavaScript natif, sans framework. J'ai choisi une ambiance automnale et chaleureuse pour la charte graphique, avec une palette de couleurs définie en variables CSS.

Objectifs

  • Manipuler le DOM pour rendre les pages interactives
  • Gérer des données (ingrédients, burgers) avec des tableaux d'objets
  • Conserver les données d'une page à l'autre
  • Appeler une API externe et afficher sa réponse

Réalisation

  • Accueil : carrousel d'images qui défile automatiquement toutes les 10 secondes, et affichage du nom du burger au clic sur l'image
  • Création d'ingrédients : formulaire avec messages de succès ou d'erreur ; si l'ingrédient existe déjà (sans tenir compte des majuscules), sa quantité est additionnée au lieu de créer un doublon
  • Création de burgers : choix de trois ingrédients dans des listes triées par ordre alphabétique, refus d'un nom de burger déjà utilisé, et déduction automatique des ingrédients utilisés dans le stock
  • Sauvegarde : ingrédients et burgers enregistrés dans le localStorage du navigateur au format JSON, pour être partagés entre les pages et conservés après un rechargement
  • Qui sommes-nous : appel à l'API de l'Agence Bio avec fetch pour afficher les informations de la ferme partenaire et la liste de ses productions, avec gestion des erreurs
  • Versionnement : suivi du projet avec Git

Compétences mobilisées

  • Gérer le patrimoine informatique : organisation du projet en fichiers séparés par page et versionnement avec Git
  • Répondre aux incidents et aux demandes : gestion des cas d'erreur (champ vide, doublon, API indisponible)
  • Développer la présence en ligne : création d'un site vitrine interactif et d'une charte graphique
  • Travailler en mode projet : réalisation des pages une par une selon le cahier des charges du TD
  • Organiser son développement professionnel : apprentissage du JavaScript natif, du DOM, du stockage navigateur et des API

Captures d'écran

À compléter : ajouter ici les captures du projet (dossier src/screen projets).

Bilan

Ce TD m'a permis de vraiment comprendre le JavaScript côté navigateur : sélectionner des éléments, réagir aux clics, transformer des données avec find, sort ou forEach, et récupérer des données depuis une API. Je suis allée au-delà du sujet en ajoutant la fusion des ingrédients en double et l'interdiction des noms de burgers identiques.

Pour aller plus loin, il faudrait empêcher la création d'un burger quand un ingrédient n'est plus en stock, et pouvoir modifier ou supprimer les burgers créés.