Faire apparaitre ses Card depuis une API

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:

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 bœuf 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 bœuf 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 bœuf 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:

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:

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:

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
  //   );
  // });
}