Contexte :
Vous allez réaliser une interface web dynamique en partant d’une interface statique HTML/CSS fournie. L’objectif est de transformer cette interface pour qu’elle récupère dynamiquement les données d’un fichier JSON externe contenant une liste de recettes. Vous ajouterez également des fonctionnalités interactives comme une barre de recherche et un affichage détaillé de chaque recette.
Objectifs :
-
Charger et afficher dynamiquement une liste de recettes depuis un fichier JSON avec fetch.
-
Implémenter une barre de recherche permettant de filtrer les recettes par nom.
-
Afficher une pop-up ou une section contenant les détails d’une recette lorsqu’on clique sur celle-ci.
-
Utiliser Git pour le suivi de version et GitHub pour héberger et partager le dépôt.
Détails de l’évaluation
Durée : Vous disposez de 3 jours pour réaliser cet exercice.
Technologies :
-
JavaScript (DOM, fetch API, async/await)
-
Git pour le suivi de version
-
GitHub pour l’hébergement du code
Consignes :
-
Structure HTML & CSS :
-
Utilisez l’interface statique fournie comme base de votre travail.
-
Respectez une mise en page propre et ergonomique.
-
Interaction dynamique avec JavaScript :
-
Récupérez les données depuis un fichier recettes.json à l’aide de fetch et async/await.
-
Affichez chaque recette sous forme de carte (nom, ingrédients, nombre de personnes).
-
Ajoutez une barre de recherche permettant de filtrer les recettes par leur nom.
-
Lorsqu’une carte est cliquée, affichez plus de détails sur la recette.
-
Utilisation de Git et GitHub :
-
Suivi de version : utilisez Git pour suivre les étapes du développement avec des commits clairs et réguliers.
-
Branches : créez au moins une branche de fonctionnalité (ex : feature/search-bar, feature/details-popup).
-
GitHub : hébergez le projet sur GitHub et partagez le lien.
-
README.md : ajoutez une documentation expliquant le fonctionnement du projet et les étapes d’installation.
Structure du projet :
project-folder/
├── index.html
├── assets/
│ ├── images/
│ ├── styles/
│ │ ├── main.css
│ ├── scripts/
│ │ ├── app.js
├── recettes.json
├── README.md
Critères de réussite :
Affichage des recettes (25 points) : récupération et affichage correct des données JSON.
Fonctionnalité de recherche (20 points) : filtre fonctionnel sur le nom de la recette.
Pop-up ou section détaillée (25 points) : affichage complet d’une recette au clic.
Qualité du code (20 points) : lisibilité, bonnes pratiques, structuration.
Utilisation de Git et GitHub (10 points) : historique de commits, branches, dépôt organisé.
Rendu final :
Soumettez le lien vers votre dépôt GitHub pour évaluation.
Bon développement et bonne cuisine ! 🍲👩💻👨💻