health.life
get a custom deit planunknown
plain_text
a month ago
2.9 kB
3
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Personal Diet Planner</title> <style> body { font-family: Arial, sans-serif; text-align: center; margin: 0; padding: 20px; } .hidden { display: none; } </style> </head> <body> <div id="homePage"> <h1>Welcome to the Personal Diet Planner</h1> <button onclick="goToDietaryRestrictions()">Start</button> </div> <div id="dietaryRestrictionsPage" class="hidden"> <h2>Step 1: Enter Dietary Restrictions</h2> <textarea id="restrictions" placeholder="E.g., Gluten-free, Dairy-free, etc."></textarea><br> <button onclick="goToQuestions()">Next</button> </div> <div id="questionsPage" class="hidden"> <h2>Step 2: Answer the Questions</h2> <p>What is your goal? (e.g., Weight loss, Muscle gain, etc.)</p> <input type="text" id="goal"><br> <p>How many meals per day do you prefer?</p> <input type="number" id="meals"><br> <button onclick="generateDiet()">Submit</button> </div> <div id="resultPage" class="hidden"> <h2>Your Personalized Diet Plan</h2> <p id="result"></p> <button onclick="restart()">Start Over</button> </div> <script> function goToDietaryRestrictions() { document.getElementById('homePage').classList.add('hidden'); document.getElementById('dietaryRestrictionsPage').classList.remove('hidden'); } function goToQuestions() { document.getElementById('dietaryRestrictionsPage').classList.add('hidden'); document.getElementById('questionsPage').classList.remove('hidden'); } function generateDiet() { const restrictions = document.getElementById('restrictions').value; const goal = document.getElementById('goal').value; const meals = document.getElementById('meals').value; const dietPlan = ` Based on your input: - Dietary Restrictions: ${restrictions} - Goal: ${goal} - Meals per day: ${meals} Here's your perfect diet! (You can customize this further.) `; document.getElementById('questionsPage').classList.add('hidden'); document.getElementById('resultPage').classList.remove('hidden'); document.getElementById('result').innerText = dietPlan; } function restart() { document.getElementById('resultPage').classList.add('hidden'); document.getElementById('homePage').classList.remove('hidden'); } </script> </body> </html>
Editor is loading...
Leave a Comment