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