Ajout de la logique JavaScript
Ajouter de la logique JavaScript à votre page web permet de la rendre interactive et dynamique. Vous pouvez utiliser JavaScript pour sélectionner des éléments du DOM, récupérer et afficher des données à partir d'une API, et gérer l'envoi de formulaires. Voici comment vous pouvez accomplir ces tâches.
Sélection des éléments du DOM
Pour interagir avec les éléments de votre page HTML, vous devez d'abord les sélectionner. Vous pouvez utiliser des méthodes comme document.getElementById, document.querySelector, et document.querySelectorAll pour sélectionner des éléments.
// Sélectionne l'élément où la liste des aliments sera affichée
const foodsList = document.getElementById('foods-list');
// Sélectionne le formulaire pour ajouter de nouveaux aliments
const foodForm = document.getElementById('food-form');
Récupération et affichage des aliments avec fetch
Pour récupérer des données à partir d'une API et les afficher sur votre page, vous pouvez utiliser l'API Fetch. Voici comment vous pouvez récupérer une liste d'aliments et les afficher :
// Fonction asynchrone pour récupérer et afficher les aliments
async function fetchFoods() {
try {
// Envoie une requête GET à l'API pour récupérer les aliments
const response = await fetch('http://localhost/Food/back/foods');
// Vérifie si la réponse est réussie
if (!response.ok) {
throw new Error('Erreur réseau');
}
// Convertit la réponse en JSON
const foods = await response.json();
// Efface la liste actuelle des aliments
foodsList.innerHTML = '';
// Pour chaque aliment, crée un élément et l'ajoute à la liste
foods.forEach(food => {
const foodItem = document.createElement('div');
foodItem.className = 'food-item';
foodItem.innerHTML = `
<p>${food.emoji}</p>
<p>${food.name}</p>
<p>${food.type}</p>
`;
foodsList.appendChild(foodItem);
});
} catch (error) {
// Affiche une erreur dans la console en cas de problème
console.error('Erreur lors de la récupération des aliments :', error);
}
}
// Appelle la fonction pour récupérer et afficher les aliments lorsque la page est chargée
document.addEventListener('DOMContentLoaded', fetchFoods);
Gestion de l'envoi du formulaire pour ajouter de nouveaux aliments
Pour gérer l'envoi d'un formulaire et ajouter un nouvel aliment à votre liste, vous pouvez écouter l'événement submit du formulaire et utiliser l'API Fetch pour envoyer les données du formulaire à votre API.
// Écoute l'événement submit du formulaire
foodForm.addEventListener('submit', async function(event) {
// Empêche le comportement par défaut du formulaire
event.preventDefault();
// Récupère les valeurs des champs du formulaire
const name = document.getElementById('food-name').value;
const type = document.getElementById('food-type').value;
const emoji = document.getElementById('food-emoji').value;
try {
// Envoie une requête POST à l'API pour ajouter un nouvel aliment
const response = await fetch('http://localhost/Food/back/foods', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ name, type, emoji })
});
// Vérifie si la réponse est réussie
if (response.ok) {
// Rafraîchit la liste des aliments
fetchFoods();
// Réinitialise le formulaire
foodForm.reset();
} else {
// Affiche une erreur dans la console en cas de problème
console.error('Erreur lors de l\'ajout de l\'aliment :', response.statusText);
}
} catch (error) {
// Affiche une erreur dans la console en cas de problème
console.error('Erreur lors de l\'ajout de l\'aliment :', error);
}
});
En ajoutant cette logique JavaScript à votre page, vous pouvez créer une interface utilisateur dynamique qui interagit avec une API pour récupérer et afficher des données, et permet aux utilisateurs d'ajouter de nouveaux éléments via un formulaire. Cette approche rend votre application plus interactive et réactive aux actions de l'utilisateur.