Bonjour,
Je suis en formation dev web et nous avons comme TD d'utiliser une api.
Je dois réussir a afficher 6 cards en aléatoire avec le lien prévu pour ca : www.themealdb.com/api/json/v1/1/random.php
J'arrive a récupérer les 6 objets dans la console, mais je n'arrive pas a afficher les 6 Cards sur la page HTML.
Auriez-vous l'amabilité de m'aider pour enfin afficher ces 6 cards ! un grand MERCI si vous trouvez la solution !!!!!
page html :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="../assets/css/style.css"> <title>Accueil recette</title> </head> <body> <section class="rechercher"> <div class="container"> <form> <input type="text" placeholder="Chercher une recette" autofocus> <button type="submit" class = "bouton recherche" id = "search"> <i class = "fas fa-search"></i></button> <span class="msg"></span> </form> </div> </section> <!-- <img src="../assets/img/header-modified.jpg" class="rounded mx-auto d-block" alt="fond"> <div id ="header" class="container-fluid"> </div> <div class="d-flex align-items-center"> <img src="../assets/img/Mmm_ail_a_l'exquise_logo.png" class="rounded mx-auto d-block" alt="fond"> </div> </div> --> <!-- <p class="text-center">Toutes nos recettes.</p> <div class="input-group rounded "> <input type="search" class="form-control rounded mt-4" placeholder="Search" aria-label="Search" aria-describedby="search-addon" /> <span class="input-group-text border-0 mt-4" id="search-addon"> <i class="fas fa-search"></i> </span> </div> </br> </br> --> <!-- <div class="container text-center"> <div class="row align-items-start"> --> <div class="col-sm-4"> <div class="recette"> <!-- <img class= "recetteImage" src="../assets/img/i16421-gratin-de-boeuf-et-gnocchi.webp" class="rounded" alt="gratin de boeuf"> <h5 class="recetteTitre">Gratin de buf et gnocchi</h5> <p class="recetteInstruction">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" id="card1" class="btn btn-primary">Go somewhere</a> </div> </div> </div> --> <!-- <div class="container text-center"> <div class="row align-items-start"> <div class="col-sm-4"> <div class="recette"> <img class= "recetteImage" src="../assets/img/i16421-gratin-de-boeuf-et-gnocchi.webp" class="rounded" alt="gratin de boeuf"> <h5 class="recetteTitre">Gratin de buf et gnocchi</h5> <p class="recetteInstruction">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" id="card1" class="btn btn-primary">Go somewhere</a> </div> </div> </div> --> <!-- <div class="container text-center"> <div class="row align-items-start"> <div class="col-sm-4"> --> <!-- <div class="recette"> <img class= "recetteImage" src="../assets/img/i16421-gratin-de-boeuf-et-gnocchi.webp" class="rounded" alt="gratin de boeuf"> <h5 class="recetteTitre">Gratin de buf et gnocchi</h5> <p class="recetteInstruction">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" id="card1" class="btn btn-primary">Go somewhere</a> </div> --> <!-- </div> </div> --> <script src="bundle.js"></script> </body> </html>
Le fichier INdex.js
/
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76 import { RecetteCard } from "./components/RecetteCard.js"; const apiKey = "1"; // Le début de l'URL pour utiliser Open Weather Map const urlStart = "https://www.themealdb.com/api/json/v1/1/search.php?s="; // Les paramètres à appeler en plus pour avoir les catégorie et les régions //const paramsUrl = "&s"; const form = document.querySelector(".rechercher form"); const input = document.querySelector(".rechercher input"); const list = document.querySelector(".recette"); //const rechercheCategorie = document.querySelector(".recetteCategorie"); form.addEventListener("submit", onFormSubmitted); function onFormSubmitted(event) { // ne recharge pas la page (qui est le comportement par défaut) event.preventDefault(apiKey); // on récupère la valeur de la ville cherchée let inputValue = input.value; // Requête AJAX avec le nom de la ville const url = `${urlStart}${inputValue}`; console.log("URL", url); // <a href="https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-fetch-api-to-get-data-fr" target="_blank">https://www.digitalocean.com/communi...to-get-data-fr</a> fetch(url) .then((response) => response.json()) .then(function (data) { console.log(data); }); } // recette.addEventListener("submit", recettealeatoire); // function recettealeatoire(event) { // const recette = document.querySelector(".recette"); // event.preventDefault(); // let inputvalue = input.value; // const urlRandoms = "www.themealdb.com/api/json/v1/1/randomselection.php"; // const urlRandoms = `${urlRandoms}`; console.log("recettes aléatoires"); for (let compteur = 0; compteur <= 5; compteur++) { fetch(`https://www.themealdb.com/api/json/v1/1/random.php`) .then((response) => response.json()) .then(function (data) { // let Recette = new RecetteCard(); console.log(data); const { meals, strMeal, strMealThumb, strInstructions } = data; let Recette = new RecetteCard( meals, strMeal, strMealThumb, strInstructions ); list.appendChild(Recette.content); }); // .catch((data) => { // console.error(data.message); // "oh, no!" // }) // console.error( // "Il y a eu un problème avec l'opération fetch : " + error.message // ); // }); }
le fichier recettecard en javascript
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38 export class RecetteCard { _titre; _photo; _instruction; constructor(titre, photo, instruction) { this._titre = titre; this._photo = photo; this._instruction = instruction; console.log( "New recettecarte", this._titre, this._photo, this._instruction ); } get content() { const recette = document.createElement("recette"); recette.classList.add("recette"); const markup = ` <img class= "recetteImage" data-name="${this._photo}" alt="gratin de boeuf"> <h5 class="recetteTitre" data-name="${this._titre}"> <p class="recetteInstruction"data-name="${this._instruction}"</p> <a href="#" id="card1" class="btn btn-primary">Go somewhere</a> `; recette.innerHTML = markup; return recette; } }
le fichier index.js
/
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76 import { RecetteCard } from "./components/RecetteCard.js"; const apiKey = "1"; // Le début de l'URL pour utiliser Open Weather Map const urlStart = "https://www.themealdb.com/api/json/v1/1/search.php?s="; // Les paramètres à appeler en plus pour avoir les catégorie et les régions //const paramsUrl = "&s"; const form = document.querySelector(".rechercher form"); const input = document.querySelector(".rechercher input"); const list = document.querySelector(".recette"); //const rechercheCategorie = document.querySelector(".recetteCategorie"); form.addEventListener("submit", onFormSubmitted); function onFormSubmitted(event) { // ne recharge pas la page (qui est le comportement par défaut) event.preventDefault(apiKey); // on récupère la valeur de la ville cherchée let inputValue = input.value; // Requête AJAX avec le nom de la ville const url = `${urlStart}${inputValue}`; console.log("URL", url); // <a href="https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-fetch-api-to-get-data-fr" target="_blank">https://www.digitalocean.com/communi...to-get-data-fr</a> fetch(url) .then((response) => response.json()) .then(function (data) { console.log(data); }); } // recette.addEventListener("submit", recettealeatoire); // function recettealeatoire(event) { // const recette = document.querySelector(".recette"); // event.preventDefault(); // let inputvalue = input.value; // const urlRandoms = "www.themealdb.com/api/json/v1/1/randomselection.php"; // const urlRandoms = `${urlRandoms}`; console.log("recettes aléatoires"); for (let compteur = 0; compteur <= 5; compteur++) { fetch(`https://www.themealdb.com/api/json/v1/1/random.php`) .then((response) => response.json()) .then(function (data) { // let Recette = new RecetteCard(); console.log(data); const { meals, strMeal, strMealThumb, strInstructions } = data; let Recette = new RecetteCard( meals, strMeal, strMealThumb, strInstructions ); list.appendChild(Recette.content); }); // .catch((data) => { // console.error(data.message); // "oh, no!" // }) // console.error( // "Il y a eu un problème avec l'opération fetch : " + error.message // ); // }); }
Partager