Ce projet vous aidera à perfectionner vos compétences en front-end et vous apprendra à créer une interface en utilisant les normes Web de base.
Les projets sont un excellent moyen d'améliorer vos compétences en HTML, CSS et JavaScript, et de renforcer les concepts et techniques importants.
Un projet avec lequel vous pouvez commencer est un livre de recettes, que vous pouvez exécuter dans un navigateur tel que Google Chrome ou Firefox.
Dans le livre de recettes, le côté gauche de la page Web comprend une section où l'utilisateur peut ajouter de nouvelles recettes. Sur la droite de la page, l'utilisateur peut visualiser et rechercher parmi les recettes existantes.
Comment demander à l'utilisateur d'ajouter une nouvelle recette
Ajoutez le contenu initial aux fichiers HTML, CSS et JavaScript. Si vous n'êtes pas familier avec les concepts de développement Web, il existe de nombreux endroits où vous pouvez apprendre le développement web en ligne.
Vous pouvez également consulter l'exemple de livre de recettes complet dans ce Dépôt GitHub.
- Ajoutez la structure HTML de base dans un nouveau fichier HTML appelé index.html :
html>
<html>
<diriger>
<titre>Application de recettetitre>
diriger>
<corps>
<navigation>
<h1>Application de recetteh1>
navigation>
<divclasse="récipient">
Contenu ici
div>
corps>
html> - À l'intérieur de la classe de conteneur, séparez la page en une colonne de gauche et une colonne de droite :
<divclasse="colonne de gauche">div>
<divclasse="colonne de droite">div> - Dans la colonne de gauche, ajoutez un formulaire permettant à l'utilisateur d'ajouter une nouvelle recette. L'utilisateur peut saisir le nom de la recette, la liste des ingrédients et la méthode :
<h3>Ajouter une recetteh3><former>
<étiqueterpour="nom-recette">Nom:étiqueter>
<saisirtaper="texte"identifiant="nom-recette"requis>
<Br /><étiqueterpour="ingrédients-recette">Ingrédients:étiqueter>
<zone de texteidentifiant="ingrédients-recette"Lignes="5"requis>zone de texte>
<Br /><étiqueterpour="recette-méthode">Méthode:étiqueter>
<zone de texteidentifiant="recette-méthode"Lignes="5"requis>zone de texte>
<Br /><boutontaper="soumettre">Ajouter une recettebouton>
former> - Dans la balise head du fichier HTML, ajoutez un lien vers un nouveau fichier CSS appelé styles.css. Créez le fichier dans le même dossier que votre fichier HTML :
<lienrel="feuille de style"href="styles.css"> - Dans le fichier CSS, ajoutez un style pour la page globale :
corps {
famille de polices: sans empattement;
}navigation {
Couleur de l'arrière plan: #333;
position: fixé;
haut: 0;
largeur: 100%;
rembourrage: 20pixels;
gauche: 0;
couleur: blanc;
aligner le texte: centre;
}.récipient {
afficher: fléchir;
flex-direction: ligne;
justifier-contenu: l'espace entre;
marge: 150pixels 5%;
}.colonne de gauche {
largeur: 25%;
}.colonne de droite {
largeur: 65%;
} - Ajoutez un peu de style pour le Ajouter des recettes former:
former {
afficher: fléchir;
flex-direction: colonne;
}étiqueter {
marge inférieure: 10pixels;
}saisir[type="texte"], zone de texte {
rembourrage: 10pixels;
marge inférieure: 10pixels;
rayon de bordure: 5pixels;
frontière: 1pixelssolide#ccc;
largeur: 100%;
dimensionnement de la boîte: border-box;
}bouton[type="soumettre"] {
rembourrage: 10pixels;
Couleur de l'arrière plan: #3338;
couleur: #fff;
frontière: aucun;
rayon de bordure: 5pixels;
le curseur: aiguille;
} - Au bas de la balise body de votre fichier HTML, ajoutez un lien vers un fichier JavaScript appelé script.js. Créez le fichier dans le même dossier :
<corps>
Contenu
<scénariosrc="script.js">scénario>
corps> - Dans script.js, utilisez la méthode querySelector pour parcourir le DOM et récupérez l'élément de formulaire à partir de la page.
constante forme = document.querySelector('former'); - Créez un nouveau tableau pour stocker les recettes que l'utilisateur saisit dans le formulaire :
laisser recettes = [] ; - Dans une nouvelle fonction, récupérez les champs nom, ingrédients et méthode saisis via le formulaire. Vous pouvez également mettre en œuvre validation de formulaire côté client pour éviter les entrées invalides ou pour vérifier si une recette existe déjà.
fonctiongérerSoumettre(événement) {
// Empêcher le comportement de soumission de formulaire par défaut
event.preventDefault();
// Récupère le nom de la recette, les ingrédients et les valeurs d'entrée de la méthode
constante nameInput = document.querySelector('#nom-recette');
constante ingrInput = document.querySelector('#recette-ingrédients');
constante methodInput = document.querySelector('#recette-méthode');
constante nom = nomEntrée.valeur.trim();
constante ingrédients = ingrInput.value.trim().split(',').carte(je => i.trim());
constante method = methodInput.value.trim();
} - Si les entrées sont valides, ajoutez-les au tableau des recettes :
si (nom && ingrédients.longueur > 0 && méthode) {
constante newRecipe = { nom, ingrédients, méthode } ;
recettes.push (nouvelleRecette);
} - Effacez les entrées sur le formulaire :
nameInput.value = '';
ingrInput.value = '';
methodInput.value = ''; - Après la fonction handleSubmit(), ajoutez un écouteur d'événement pour appeler la fonction lorsque l'utilisateur soumet le formulaire :
form.addEventListener('soumettre', poignéeSoumettre); - Ouvrez index.html dans un navigateur et affichez le formulaire sur la gauche :
Comment afficher les recettes ajoutées
Vous pouvez afficher les recettes stockées dans le tableau de recettes sur le côté droit de la page.
- Dans le fichier HTML, ajoutez un div pour afficher la liste des recettes dans la colonne de droite. Ajoutez une autre div pour afficher un message s'il n'y a pas de recettes :
<divclasse="colonne de droite">
<dividentifiant="liste de recettes">div>
<dividentifiant="pas de recettes">Vous n'avez pas de recettes.div>
div> - Ajoutez du style CSS pour la liste des recettes :
#liste-de-recettes {
afficher: grille;
grille-modèle-colonnes: répéter(ajustement automatique, min max(300pixels, 1en));
écart de grille: 20pixels;
}#pas de recettes {
afficher: fléchir;
Couleur de l'arrière plan: #FFCCCC;
rembourrage: 20pixels;
rayon de bordure: 8pixels;
marge supérieure: 44pixels;
} - En haut du fichier JavaScript, obtenez les éléments HTML utilisés pour afficher la liste des recettes et le message d'erreur :
constante listerecette = document.querySelector('#liste-de-recette');
constante pas de recettes = document.getElementById('pas de recettes'); - À l'intérieur d'une nouvelle fonction, parcourez chaque recette du tableau de recettes. Pour chaque recette, créez une nouvelle div pour afficher cette recette :
fonctionafficherRecettes() {
liste de recettes.innerHTML = '';
recettes.pourChaque((recette, index) => {
constante divrecette = document.createElement('div');
});
} - Ajoutez du contenu à la division de recette individuelle pour afficher le nom, les ingrédients et la méthode. La div comprendra également un bouton de suppression. Vous ajouterez cette fonctionnalité dans les étapes ultérieures :
recetteDiv.innerHTML = `${recipe.name}</h3>
<fort>Ingrédients:fort></p>
- ${ingr} `).rejoindre('')}
${recipe.ingredients.map(ingr =>`
</ul><fort>Méthode:fort></p>
${recette.méthode}</p>
- Ajoutez une classe pour styliser la div :
recetteDiv.classList.add('recette'); - Ajoutez la nouvelle div à l'élément HTML RecipeList :
recetteListe.appendChild (recipeDiv); - Ajoutez le style de la classe dans le fichier CSS :
.recette {
frontière: 1pixelssolide#ccc;
rembourrage: 10pixels;
rayon de bordure: 5pixels;
boîte ombre: 0 2pixels 4pixelsRVB(0,0,0,.2);
}.recetteh3 {
marge supérieure: 0;
marge inférieure: 10pixels;
}.recetteul {
marge: 0;
rembourrage: 0;
style liste: aucun;
}.recetteulli {
marge inférieure: 5pixels;
} - Vérifiez s'il y a plus d'une recette. Si c'est le cas, masquez le message d'erreur:
noRecipes.style.display = recettes.longueur > 0? 'aucun': 'flex' ;
- Appelez la nouvelle fonction à l'intérieur de la fonction handleSubmit(), après avoir ajouté la nouvelle recette dans le tableau des recettes :
afficheRecettes(); - Ouvrez index.html dans un navigateur :
- Ajoutez des recettes à la liste et regardez-les apparaître sur le côté droit :
Comment supprimer des recettes
Vous pouvez supprimer des recettes en cliquant sur le Supprimer sous les instructions d'une recette.
- Ajoutez un style CSS pour le bouton de suppression :
.delete-bouton {
Couleur de l'arrière plan: #dc3545;
couleur: #fff;
frontière: aucun;
rayon de bordure: 5pixels;
rembourrage: 5pixels 10pixels;
le curseur: aiguille;
}.delete-bouton:flotter {
Couleur de l'arrière plan: #c82333;
} - Dans le fichier JavaScript, ajoutez une nouvelle fonction pour supprimer une recette :
fonctionpoignéeSupprimer(événement) {} - À l'aide de l'événement JavaScript, recherchez l'index de la recette sur laquelle l'utilisateur a cliqué :
si (event.target.classList.contains('bouton de suppression')) {
constante index = event.target.dataset.index ;
} - Utilisez l'index pour supprimer la recette sélectionnée du tableau des recettes :
recettes.splice (index, 1); - Rafraîchir la liste des recettes affichées sur la page :
afficheRecettes(); - Ajoutez un écouteur d'événement pour appeler la fonction handleDelete() lorsque l'utilisateur clique sur le bouton de suppression :
listerecettes.addEventListener('Cliquez sur', handleSuppr); - Ouvrez index.html dans un navigateur. Ajoutez une recette pour afficher le bouton de suppression:
Comment rechercher des recettes
Vous pouvez rechercher des recettes à l'aide de la barre de recherche pour vérifier si une certaine recette existe.
- Dans la colonne de droite, ajoutez une barre de recherche avant la liste des recettes :
<dividentifiant="section de recherche">
<h3>Liste de recettesh3>
<étiqueterpour="Barre de recherche">Recherche:étiqueter>
<saisirtaper="texte"identifiant="Barre de recherche">
div> - Ajoutez un style CSS pour le libellé de la barre de recherche :
étiqueter[pour="Barre de recherche"] {
afficher: bloc;
marge inférieure: 10pixels;
} - Dans script.js, récupérez l'élément HTML du champ de recherche :
constante champ de recherche = document.getElementById('Barre de recherche'); - Dans une nouvelle fonction, créez un nouveau tableau contenant des recettes dont le nom correspond à l'entrée de recherche :
fonctionrecherche(mettre en doute) {
constante recettesfiltrées = recettes.filtre(recette => {
retour recette.nom.toLowerCase().includes (query.toLowerCase());
});
} - Effacer la liste des recettes actuellement affichées à l'écran :
liste de recettes.innerHTML = ''; - Parcourez chaque recette filtrée qui correspond au résultat de la recherche et créez un nouvel élément div :
recettesfiltrées.forEach(recette => {
constante recetteEl = document.createElement('div');
}); - Ajoutez le contenu HTML de la recette filtrée à la div :
recetteEl.innerHTML = `${recipe.name}</h3>
<fort>Ingrédients:fort></p>
- ${ingr} `).rejoindre('')}
${recipe.ingredients.map(ingr =>`
</ul><fort>Méthode:fort></p>
${recette.méthode}</p>
- Ajoutez la même classe de recette pour un style cohérent. Ajoutez la nouvelle div à la liste affichée sur la page :
recetteEl.classList.add('recette');
recetteListe.appendChild (recetteEl); - Ajoutez un écouteur d'événement pour appeler la fonction search() lorsque l'utilisateur tape dans la barre de recherche :
searchBox.addEventListener('saisir', événement => recherche (événement.cible.valeur)); - Dans la fonction handleDelete(), effacez la zone de recherche si l'utilisateur supprime un élément, pour actualiser la liste :
searchBox.value = ''; - Ouvrez index.html dans un navigateur Web pour afficher la nouvelle barre de recherche et ajoutez quelques recettes :
- Ajoutez un nom de recette dans la barre de recherche pour filtrer la liste des recettes :
Créer des projets avec HTML, CSS et JavaScript
Ce projet montre comment créer une interface frontale pour un livre de recettes simple. Notez qu'il n'y a pas de serveur principal et que l'application ne conserve pas les données; si vous actualisez la page, vous perdrez vos modifications. Une extension possible sur laquelle vous pourriez travailler est un mécanisme pour enregistrer et charger des données à l'aide de localStorage.
Pour améliorer vos compétences en développement Web, continuez à explorer d'autres projets amusants que vous pouvez créer sur votre propre ordinateur.
