Présentation du projet
Présentation du projet
Dans ce cours, nous allons construire une application web simple mais complète qui interagit avec une API REST. Cette application sera un excellent moyen de mettre en pratique vos connaissances en HTML, CSS et JavaScript, tout en apprenant à interagir avec une API pour récupérer et manipuler des données.
Description de l'application que nous allons construire
Nous allons créer une application front-end qui se connecte à une API REST pour gérer une liste d'aliments. Chaque aliment aura un nom, un type (par exemple, fruit, légume, condiment) et un emoji associé. L'application permettra aux utilisateurs de :
- Voir une liste d'aliments : Récupérer et afficher tous les aliments disponibles dans la base de données.
- Ajouter un nouvel aliment : Soumettre un formulaire pour ajouter un nouvel aliment à la base de données.
- Interagir avec l'interface utilisateur : Une interface simple et intuitive pour visualiser et ajouter des aliments.
Cette application est conçue pour être simple afin de se concentrer sur les concepts fondamentaux de l'interaction avec une API REST en utilisant JavaScript.
Aperçu de l'interface utilisateur et des fonctionnalités
L'interface utilisateur de notre application sera composée des éléments suivants :
-
En-tête : Un titre pour l'application, par exemple "Food API".
-
Liste des aliments :
- Une section qui affiche tous les aliments sous forme de cartes ou de listes.
- Chaque carte d'aliment affichera le nom, le type et l'emoji de l'aliment.
-
Formulaire d'ajout d'aliment :
- Un formulaire avec des champs pour saisir le nom, le type et l'emoji d'un nouvel aliment.
- Un bouton pour soumettre le formulaire et ajouter l'aliment à la base de données.
-
Styles et mise en page :
- Utilisation de CSS pour rendre l'interface attrayante et responsive.
- Mise en page avec Flexbox ou Grid pour organiser les éléments de manière efficace.
Voici un aperçu visuel de ce à quoi pourrait ressembler l'interface utilisateur :
- En-tête : Un titre centré en haut de la page.
- Liste des aliments : Une grille de cartes, chaque carte contenant les détails d'un aliment.
- Formulaire d'ajout : Un formulaire en bas de la page avec des champs de saisie et un bouton de soumission.
Cette application vous donnera une expérience pratique de la création d'une interface utilisateur dynamique qui interagit avec une API REST, tout en renforçant vos compétences en développement front-end.