Comment créer un livre de recettes en utilisant HTML, CSS et JavaScript

Les projets sont une excellente méthode pour améliorer vos compétences en HTML, CSS et JavaScript et pour renforcer des concepts et des stratégies importants.

Un travail que vous pouvez commencer est une publication de recettes, que vous pouvez exécuter dans un navigateur tel que Google Chrome ou Firefox.

Dans la publication de recettes, le côté gauche de la page consiste en une zone où l’utilisateur peut inclure de nouvelles recettes. Sur la droite de la page web, le client peut consulter et subir les recettes existantes.

Comment demander à l’utilisateur d’ajouter une nouvelle recette ?

Ajoutez le contenu initial aux documents HTML, CSS et JavaScript. Si vous n’êtes pas familiarisé avec les concepts de croissance du web, il existe de nombreux domaines où vous pouvez découvrir la croissance de l’internet en ligne.

Vous pouvez également voir l’instance complète de publication de la recette dans ce repo GitHub.

1. Ajoutez le cadre HTML standard dans un tout nouveau document HTML appelé index.html :
2. À l’intérieur de la classe de conteneur, séparez la page Web en une colonne gauche et aussi une colonne appropriée :
3. Dans la colonne de gauche, ajoutez un formulaire permettant à l’utilisateur d’ajouter un nouveau plat. L’utilisateur peut saisir le nom du plat, la liste des ingrédients actifs et la technique :
4. Dans la balise head du fichier HTML, insérez un lien web vers une toute nouvelle donnée CSS appelée styles.css. Produisez les données dans le même dossier que votre fichier HTML :
5. Dans le fichier CSS, ajoutez des éléments de conception pour l’ensemble de la page web :
6. Ajoutez un peu de design pour le Ajouter des recettes type :
7. Au bas de la balise body de votre fichier HTML, incluez un lien web vers une donnée JavaScript appelée script.js. Développez le fichier dans le même dossier :
8. Dans script.js, utilisez la technique querySelector pour passer par le DOM et obtenir le composant type de la page.
9. Créez une toute nouvelle plage pour enregistrer les recettes que l’individu saisit dans le type :
10. Dans une nouvelle fonction, obtenez le nom, les ingrédients actifs et les zones d’approche saisies via le formulaire. Vous pouvez également effectuer une reconnaissance de type côté client pour empêcher les entrées nulles ou pour vérifier si un plat existe déjà.
11. Si les entrées sont valides, ajoutez-les à la sélection des plats :
12. Effacer les entrées sur le type :
13. Après la fonction handleSubmit(), ajouter un event listener pour appeler la fonction lorsque l’utilisateur envoie le kind :
14. Ouvrez index.html dans un navigateur Internet et observez le type à gauche :

Comment afficher les recettes ajoutées

Vous pouvez afficher les recettes enregistrées dans la sélection de plats sur le meilleur côté de la page.

1. Dans les données HTML, ajoutez une div pour afficher la liste de contrôle des recettes à l’intérieur de la colonne appropriée. Ajoutez une autre div pour afficher un message s’il n’y a pas de recettes :
2. Ajoutez un peu de style CSS pour la liste des plats :
3. En haut des données JavaScript, obtenez les aspects HTML utilisés pour afficher la liste des recettes et le message d’erreur :
4. Dans une nouvelle fonction, passez en revue chaque recette du tableau des plats. Pour chaque recette, créez une nouvelle div pour afficher cette recette :
5. Ajoutez du contenu web à la div du plat individuel pour présenter le nom, les composants et la technique. La div comprendra également un interrupteur de suppression. Vous intégrerez cette fonctionnalité dans les étapes suivantes :
6. Ajoutez un cours pour concevoir la div :
7. Ajoutez la nouvelle div au composant HTML recipeList :
8. Ajoutez le design de la classe dans le fichier CSS :
9. Vérifier s’il y a plus d’une recette. Si c’est le cas, masquer le message d’erreur :
10. Appeler la toute nouvelle fonction dans la fonction handleSubmit(), après avoir ajouté la toute nouvelle recette dans le tableau des recettes :
11. Ouvrez index.html dans un navigateur web :
12. Ajoutez des plats à la liste et voyez-les apparaître sur le côté droit :

Comment supprimer des recettes

Vous pouvez effacer des plats en cliquant sur le bouton Effacer sous les instructions d’une recette.

1. Ajouter un design CSS pour l’interrupteur de suppression :
2. Dans les données JavaScript, incluez une nouvelle fonctionnalité pour effacer une recette :
3. En utilisant l’événement JavaScript, localisez l’index de la recette sur laquelle l’individu a cliqué :
4. Utilisez l’index pour effacer la recette sélectionnée de la variété de recettes :
5. Rafraîchir la liste des recettes affichées sur la page web :
6. Ajouter un récepteur d’événements pour appeler la fonction handleDelete() lorsque l’utilisateur clique sur l’interrupteur de suppression :
7. Ouvrez le fichier index.html dans un navigateur web. Inclure une recette pour voir l’interrupteur de suppression :

Comment rechercher des recettes

Vous pouvez rechercher des plats à l’aide de la barre de recherche pour vérifier si un plat spécifique existe.

1. Dans la colonne de droite, incluez une barre de recherche avant la liste des recettes :
2. Ajoutez un style CSS pour la balise de la barre de recherche :
3. Dans script.js, obtenez l’élément HTML de la boîte de recherche :
4. Dans une toute nouvelle fonction, produire un tout nouveau tableau qui contient les recettes dont le nom correspond à l’entrée de recherche :
5. Effacez la liste de recettes actuellement affichée à l’écran :
6. Bouclez avec chaque recette du système de filtrage qui correspond au résultat de la recherche, et développez un nouvel élément div :
7. Ajoutez le contenu HTML du plat filtré à l’élément div :
8. Ajoutez exactement le même cours de plat pour un style cohérent. Ajoutez la nouvelle div à la liste affichée sur la page :
9. Ajoutez un événement pour appeler la fonction search() lorsque l’utilisateur tape dans la barre de recherche :
10. Dans la fonction handleDelete(), effacez la boîte de recherche si l’utilisateur supprime un élément, afin de rafraîchir la liste :
11. Ouvrez index.html dans un navigateur Internet pour voir la nouvelle barre de recherche et ajouter quelques recettes :
12. Ajoutez un nom de plat dans la barre de recherche pour filtrer la liste des plats :

Réaliser des projets avec HTML, CSS et JavaScript

Ce travail montre comment construire une interface frontale pour une publication de base sur les plats. Notez qu’il n’y a pas de serveur dorsal et que l’application ne conserve pas d’informations ; si vous revitalisez la page web, vous perdrez vos modifications. Une extension possible est un système permettant de sauvegarder et de charger des informations à l’aide de localStorage.

Pour améliorer vos compétences en matière de développement Internet, continuez à découvrir d’autres travaux amusants que vous pouvez réaliser vous-même sur votre ordinateur.

S’abonner à notre lettre d’information