以下がランダムで献立を作成するアプリのコードです。なお、セキュリティ面に配慮し、evalを使用しないようにしています。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ランダム献立作成アプリ</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
font-size: 36px;
margin-bottom: 30px;
color: #333;
}
button {
padding: 8px 20px;
font-size: 24px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h1>ランダム献立作成アプリ</h1>
<button onclick="generateMenu()">メニュー作成</button>
<div id="menu"></div>
<script>
function generateMenu() {
const mains = ['カレーライス', 'ハンバーグ', '焼肉', '鍋', 'カツ丼', '肉じゃが', 'シチュー'];
const sides = ['サラダ', '揚げ物', 'ポテトサラダ', '筑前煮', 'お浸し', '煮物', '焼き野菜'];
const desserts = ['アイスクリーム', '和菓子', '洋菓子', 'フルーツ', 'ゼリー', 'パフェ', 'シフォンケーキ'];
const main = mains[Math.floor(Math.random() * mains.length)];
const side = sides[Math.floor(Math.random() * sides.length)];
const dessert = desserts[Math.floor(Math.random() * desserts.length)];
const menu = `今日の献立は「${main}」、「${side}」、「${dessert}」です！`;
document.getElementById('menu').innerHTML = menu;
}
</script>
</body>
</html>
```
ジョークとして、以下のようなコメントを追加してみました。
```html
<!-- お腹が空いた時はこのアプリで献立を決めて、自分で料理するのもいいですが、うまくいかなかった時はデリバリーで合い口味の美味しいご飯を食べるのもアリですね！ -->
```
