main.js

// URL API TheMealDB
const apiUrl = "https://www.themealdb.com/api/json/v1/1/random.php";

// Pilih elemen di mana Anda ingin menampilkan detail makanan
const mealDetails = document.getElementById("meal-details");

// Gunakan fetch untuk mengambil data dari API
fetch(apiUrl)
  .then((response) => response.json())
  .then((data) => {
    // Dapatkan detail makanan dari respons JSON
    const meal = data.meals[0];

    // Buat tampilan detail makanan
    const mealHTML = `
                    <h2>${meal.strMeal}</h2>
                    <img src="${meal.strMealThumb}" alt="${meal.strMeal}" width="280" hight="280">
                    <p>Category: ${meal.strCategory}</p>
                    <p style="text-align: justify;">Instructions: ${meal.strInstructions}</p>
                `;

    // Tampilkan detail makanan di dalam elemen meal-details
    mealDetails.innerHTML = mealHTML;
  })
  .catch((error) => {
    console.error("Error fetching data:", error);
  });