ダイエットしてる人のトレーニングメニューを考えるアプリ。トレーニングの時間、強度を選択できる。最後に、美少女からの応援メッセージを受け取れる。
トレーニングメニュー生成アプリ
トレーニングメニュー生成アプリ
<!DOCTYPE html> <html> <head> <title>トレーニングメニュー生成アプリ</title> <style> body { font-family: Arial, sans-serif; background-color: #eee; } h1 { text-align: center; } form { background-color: #fff; padding: 20px; margin: 0 auto; max-width: 500px; border-radius: 10px; box-shadow: 0px 0px 10px #aaa; } fieldset { border: none; margin: 0; padding: 0; } input[type='number'] { width: 70px; } label { display: block; margin-bottom: 5px; font-weight: bold; } button { margin-top: 10px; padding: 8px 16px; background-color: #2ecc71; color: #fff; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #27ae60; } p { margin-top: 20px; font-size: 18px; } </style> </head> <body> <h1>トレーニングメニュー生成アプリ</h1> <form onsubmit="generateMenu(); return false;"> <fieldset> <legend>トレーニングメニュー設定</legend> <label>トレーニング時間(分):<input type="number" min="1" max="120" value="30" id="timeInput"></label> <label>トレーニング強度(1〜10):<input type="number" min="1" max="10" value="5" id="intensityInput"></label> </fieldset> <button type="submit">メニューを生成する</button> </form> <p id="menu"></p> <p id="message"></p> <script> function generateMenu() { let time = document.getElementById("timeInput").value; let intensity = document.getElementById("intensityInput").value; // ダイエットメニューの生成 let options = ["腕立て伏せ", "スクワット", "ランニング", "腹筋", "腕のストレッチ", "腿のストレッチ", "胸のストレッチ"]; let menu = []; for (let i = 0; i < 3; i++) { menu.push(options[Math.floor(Math.random() * options.length)]); } // メッセージの生成 let message = ""; if (intensity >= 8) { message = "がんばれ!きみはヒーローだ!"; } else if (intensity >= 6) { message = "偉大なる健康オタクよ、今日も地獄のようなトレーニングをこなしてくれるのだ!"; } else { message = "頑張ってるね!継続は力なり!"; } // 表示の更新 document.getElementById("menu").textContent = `${time}分間のダイエットメニューは、${menu[0]}、${menu[1]}、${menu[2]}だよ!`; document.getElementById("message").textContent = message; } </script> </body> </html>