random.html

<!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">
    <title>Random</title>
    <link rel="stylesheet" href="./styles/navbar.css">
    <link rel="stylesheet" href="./styles/receipe.css">
</head>
<body>
    <div id="navbar"></div>
    <h1>Random Receipe for You</h1>
    <div id="container"></div>
</body>
</html>

<script type="module">
import navbar from "./components/navbar.js";
document.getElementById("navbar").innerHTML=navbar()

import {getData,append} from "./scripts/appendFetch.js"
 //let url = "https://www.themealdb.com/api/json/v1/1/random.php";
 let url = "https://www.themealdb.com/api/json/v1/1/random.php";
let data = await getData(url);
console.log(data)
let container = document.getElementById("container")
append(data.meals,container)


</script>


<script>
/*
    async function myFun(){
         let url = "https://www.themealdb.com/api/json/v1/1/random.php";
        // let url ='https://www.themealdb.com/api/json/v1/1/list.php?c=list'
         let res = await fetch(url);
         let data = await res.json();
         console.log(data)
         append(data.meals)
     }
   myFun()
   
   let box = document.getElementById("container")
   function append(data){
       data.forEach(elem => {
           let div= document.createElement("div");
           let img = document.createElement("img")
           img.src = elem.strMealThumb;
          // let p = document.createElement("p")
          // p.innerText=elem.strTags;
           let cat = document.createElement("p");
           cat.innerText=elem.strCategory
       div.append(img,cat)
       box.append(div)
         //  console.log(elem)
       });
   }
   
   
   */
   
   </script>