24 lines
1.1 KiB
JavaScript
24 lines
1.1 KiB
JavaScript
(async () => {
|
|
const recipe = (await (await fetch("https://www.themealdb.com/api/json/v1/1/random.php")).json()).meals[0];
|
|
|
|
document.getElementById("thumbnail").src = recipe.strMealThumb;
|
|
document.getElementById("category").innerText = `Category: ${recipe.strCategory}`;
|
|
document.getElementById("location").innerText = `Area: ${recipe.strArea}`;
|
|
document.getElementById("meal").innerText = `Meal: ${recipe.strMeal}`;
|
|
document.getElementById("source").innerHTML = `Source: <a href="${recipe.strSource}">${recipe.strSource}</a>`;
|
|
document.getElementById("yt").innerHTML = `YouTube Tutorial: <a href="${recipe.strYoutube}">${recipe.strYoutube}</a>`;
|
|
document.getElementById("instructions").innerText = recipe.strInstructions;
|
|
|
|
const ingredientsList = document.getElementById("ingredientsList");
|
|
|
|
for (let index = 0; index < 20; index++) {
|
|
const element = recipe[`strIngredient${index + 1}`];
|
|
|
|
if (element === '') break;
|
|
|
|
const li = document.createElement('li');
|
|
recipe[`strMeasure${index + 1}`] === '' ? li.innerHTML = `<p>${element}</p>` : li.innerHTML = `<p>${element}, ${recipe[`strMeasure${index + 1}`]}</p>`;
|
|
|
|
ingredientsList.appendChild(li);
|
|
}
|
|
})();
|