```html
<!DOCTYPE html>
<html>
<head>
<title>Food Recipe App</title>
</head>
<body>
<h1>Food Recipe App</h1>
<input type="text" id="foodInput" placeholder="Enter food name">
<button onclick="getFoodRecipe()">Get Recipe</button>
<div id="recipeOutput"></div>
<script>
function getFoodRecipe() {
const foodName = document.getElementById('foodInput').value;
if (foodName.trim() === '') {
document.getElementById('recipeOutput').innerText = 'Please enter a food name.';
return;
}
// Fetching recipe details from an external API (Mock API used for demonstration purposes)
fetch(`https://api.mockapi.com/recipes/${foodName}`)
.then(response => {
if(!response.ok) {
throw new Error('Recipe not found!');
}
return response.json();
})
.then(data => {
const recipe = data.recipe;
const nutrients = data.nutrients;
document.getElementById('recipeOutput').innerHTML = `
<h2>${foodName} Recipe:</h2>
<p>${recipe}</p>
<h3>Nutritional Information:</h3>
<p>Calories: ${nutrients.calories}</p>
<p>Protein: ${nutrients.protein}</p>
<p>Carbohydrates: ${nutrients.carbs}</p>
<p>Fat: ${nutrients.fat}</p>
`;
})
.catch(error => {
document.getElementById('recipeOutput').innerText = error.message;
});
}
</script>
</body>
</html>
```
このアプリは、食品名を入力するとその食品のレシピを表示し、栄養情報も表示してくれます。栄養情報はAPI経由で取得しています。ジョークを追加する場合、入力フォームのプレースホルダーに面白いキャッチフレーズを追加すると良いでしょう。またレシピ表示後に「Enjoy your meal!」とメッセージを表示するなど、ユーザーを楽しませる工夫も良いでしょう。
