Click here for free DL of the app version that can save data.

No:1030

136

"Today's shopping memo" Shows today's shopping mem..ALL
Developer User3207｜Date and time 23/6/18 0:19:50
Build time 59.351 sec｜Game capacity 4.465KB｜

以下がリクエストに従ったアプリの実装例です。

料理アイデアジェネレーター

このアプリでは、「料理アイデアジェネレーター」をテーマに、ボタンをクリックするとランダムで7つの食材が表示されます。画面中央には、ランダムな食材が表示されるスペースがあり、スマートフォンからも見やすいよう、文章のサイズとレイアウトも整えています。また、各食材の前には、可愛らしい絵文字を使用しています。最後に、「これらの食材を使って料理を作ってください！」というメッセージが表示されます。これで、料理のアイデアを簡単に発想することができます。

→ 　

1　

1　

[PR]現在の本の売れ筋ランキング

Click here for free DL of the app version that can save data.

(C)2023 HisashiApp

以下がリクエストに従ったアプリの実装例です。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>料理アイデアジェネレーター</title>
	<style>
		body {
			text-align: center;
			font-family: sans-serif;
		}
		h1 {
			font-size: 2rem;
			margin-top: 1rem;
		}
		#ingredients {
			font-size: 1.5rem;
			margin-top: 2rem;
			margin-bottom: 3rem;
		}
		#message {
			font-size: 1.2rem;
			margin-top: 2rem;
		}
		.button {
			display: inline-block;
			padding: 0.6rem 1.2rem;
			border-radius: 1rem;
			background-color: #4caf50;
			color: #fff;
			font-size: 1.2rem;
			cursor: pointer;
			transition: background-color 0.3s;
		}
		.button:hover {
			background-color: #388e3c;
		}
	</style>
</head>
<body>
	<h1>料理アイデアジェネレーター</h1>
	<div>
		<button class="button" onclick="generate()">食材をランダムで表示する</button>
	</div>
	<div id="ingredients"></div>
	<div id="message"></div>

<script>
		const ingredientsList = [
			"卵", 
			"玉ねぎ", 
			"にんじん", 
			"キャベツ", 
			"じゃがいも", 
			"豚肉", 
			"鶏肉", 
			"牛肉", 
			"魚", 
			"しめじ", 
			"エリンギ", 
			"豆腐", 
			"もやし",
			"ごま油",
			"しょうゆ",
			"みりん",
			"酢",
			"にんにく",
			"生姜",
			"レモン",
			"バター",
			"マヨネーズ",
			"チーズ",
			"トマト",
			"ピーマン",
			"オリーブオイル",
			"ローリエ",
			"ケチャップ",
			"マスタード"
		];

function generate() {
			let ingredientsEl = document.getElementById("ingredients");
			ingredientsEl.innerHTML = "";
			for (let i = 0; i < 7; i++) {
				let ingredient = ingredientsList[Math.floor(Math.random() * ingredientsList.length)];
				let emoji = "";
				switch (ingredient) {
					case "卵":
						emoji = "🥚";
						break;
					case "玉ねぎ":
						emoji = "🧅";
						break;
					case "にんじん":
						emoji = "🥕";
						break;
					case "キャベツ":
						emoji = "🥬";
						break;
					case "じゃがいも":
						emoji = "🥔";
						break;
					case "豚肉":
						emoji = "🐖";
						break;
					case "鶏肉":
						emoji = "🐔";
						break;
					case "牛肉":
						emoji = "🐄";
						break;
					case "魚":
						emoji = "🐟";
						break;
					case "しめじ":
						emoji = "🍄";
						break;
					case "エリンギ":
						emoji = "🍄";
						break;
					case "豆腐":
						emoji = "🥟";
						break;
					case "もやし":
						emoji = "🌱";
						break;
					case "ごま油":
						emoji = "🍶";
						break;
					case "しょうゆ":
						emoji = "🍶";
						break;
					case "みりん":
						emoji = "🍶";
						break;
					case "酢":
						emoji = "🍶";
						break;
					case "にんにく":
						emoji = "🧄";
						break;
					case "生姜":
						emoji = "🧅";
						break;
					case "レモン":
						emoji = "🍋";
						break;
					case "バター":
						emoji = "🧈";
						break;
					case "マヨネーズ":
						emoji = "🍼";
						break;
					case "チーズ":
						emoji = "🧀";
						break;
					case "トマト":
						emoji = "🍅";
						break;
					case "ピーマン":
						emoji = "🌶️";
						break;
					case "オリーブオイル":
						emoji = "🍶";
						break;
					case "ローリエ":
						emoji = "🌿";
						break;
					case "ケチャップ":
						emoji = "🍅";
						break;
					case "マスタード":
						emoji = "🌶️";
						break;
					default:
						emoji = "❓";
				}
				ingredientsEl.innerHTML += `${emoji} ${ingredient}<br>`;
			}
			let messageEl = document.getElementById("message");
			messageEl.innerHTML = "これらの食材を使って料理を作ってください！";
		}
	</script>

</body>
</html>

このアプリでは、「料理アイデアジェネレーター」をテーマに、ボタンをクリックするとランダムで7つの食材が表示されます。画面中央には、ランダムな食材が表示されるスペースがあり、スマートフォンからも見やすいよう、文章のサイズとレイアウトも整えています。また、各食材の前には、可愛らしい絵文字を使用しています。

最後に、「これらの食材を使って料理を作ってください！」というメッセージが表示されます。これで、料理のアイデアを簡単に発想することができます。