Healthy Eating Evangelist

Daily Recommended Intake Calculator body { font-family: Arial, sans-serif; } /* Change the color of the text in the page */ body { color: #333; /* dark grey */ } /* Change the background color of the page */ body { background-color: #eee; /* light grey */ } /* Center the form on the page and set its width */ form { width: 500px; /* set the width of the form */ margin: auto; /* center the form on the page */ } /* Add some space between the form elements */ form label, form input, form select { margin-bottom: 10px; /* add some space between the form elements */ } /* Make the form inputs look cleaner by adding rounded corners */ form input, form select { border-radius: 5px; /* add rounded corners to the form inputs */ } /* Change the appearance of the form inputs when they are focused */ form input:focus, form select:focus { outline: none; /* remove the default outline */ box-shadow: 0 0 5px #00b; /* add a bright blue box shadow */ } /* Change the appearance of the form labels */ form label { display: block; /* display the label on a new line */ font-weight: bold; /* make the label text bold */ margin-bottom: 5px; /* add some space between the label and the form input */ } /* Change the appearance of the submit button */ input[type="submit"] { background-color: #00b; /* bright blue background */ color: #fff; /* white text color */ border: none; /* remove the border */ padding: 10px 20px; /* add some padding */ font-size: 16px; /* increase the font size */ cursor: pointer; /* change the cursor to a pointer when hovering over the button */ } /* Style the results section */ #results { padding: 20px; /* add some padding */ background-color: #fff; /* white background */ border: 1px solid #ddd; /* light grey border */ } /* Style the element inside the results section */ #results ul { list-style: none; /* remove the default list style */ padding-left: 0; /* remove the default padding for the list items */ } /* Style the elements inside the results section */ #results li { font-size: 18px; /* increase the font size */ margin-bottom: 10px; /* add some space between the list items */ } /* Style the element inside the results section */ #results p { font-size: 20px; /* increase the font size */ margin-bottom: 10px; /* add some space below the paragraph */ } /* Change the appearance of the form inputs when they are disabled */ form input:disabled, form select:disabled { /* style the form inputs when they are disabled */ } /* Change the appearance of the form inputs when they are required and not filled out */ form input:required:invalid, form select:required:invalid { /* style the form inputs when they are required and not filled out */ } /* Change the appearance of the form inputs when they are valid */ form input:valid, form select:valid { /* style the form inputs when they are valid */ } /* Change the appearance of the form inputs when they are hovered over */ form input:hover, form select:hover { /* style the form inputs when they are hovered over */ } /* Change the appearance of the form inputs when they are active */ form input:active, form select:active { /* style the form inputs when they are active */ } /* Change the appearance of the form inputs when they are checked */ form input[type="checkbox"]:checked { /* style the form inputs when they are checked */ } /* Style the `` element at the top of the page */ h1 { text-align: center; /* center the text */ margin-bottom: 20px; /* add some space below the heading */ } /* Style the `` element below the `` element */ p { text-align: center; /* center the text */ margin-bottom: 20px; /* add some space below the paragraph */ } /* Add a border around the form inputs */ form input, form select { border: 1px solid #ddd; /* light grey border */ } /* Change the appearance of the form inputs when they are focused */ form input:focus, form select:focus { border: 1px solid #00b; /* bright blue border */ } /* Style the element */ h1 { font-size: 32px; /* increase the font size */ margin-top: 0; /* remove the default margin at the top of the heading */ } /* Style the element */ p { font-size: 18px; /* increase the font size */ } /* Style the results section */ #results { margin: 20px 0; /* add some space above and below the results */ border-radius: 5px; /* add rounded corners to the results section */ } /* Style the element inside the results section */ #results ul { margin-bottom: 0; /* remove the default margin at the bottom of the list */ } /* Style the elements inside the results section */ #results li { margin-bottom: 5px; /* reduce the space between the list items */ } /* Style the element inside the results section */ #results p { margin-top: 0; /* remove the default margin at the top of the paragraph */ } Daily Recommended Intake Calculator Enter your information below to calculate your daily recommended intake of calories and nutrients: Age: Weight (lbs): Height (in): Activity level: Sedentary Lightly active Moderately active Very active Extra active // JavaScript function to calculate daily recommended intake function calculateIntake(age, weight, height, activityLevel) { // Calculate Basal Metabolic Rate (BMR) let BMR = 10 * weight + 6.25 * height - 5 * age; // Adjust BMR based on activity level let dailyCalories = BMR * activityLevel; // Calculate daily recommended intake of nutrients let proteinIntake = weight * 0.36; // 0.36 grams of protein per pound of body weight let fatIntake = dailyCalories * 0.2 / 9; // 20% of calories from fat, 1 gram of fat is 9 calories let carbIntake = (dailyCalories - proteinIntake * 4 - fatIntake * 9) / 4; // remainder of calories from carbs, 1 gram of carbs is 4 calories // Return results as an object return { dailyCalories: dailyCalories, proteinIntake: proteinIntake, fatIntake: fatIntake, carbIntake: carbIntake }; } // Get form element let form = document.querySelector("form"); // Add event listener to submit form form.addEventListener("submit", function(event) { // Prevent form submission event.preventDefault(); // Get form values let age = form.elements["age"].value; let weight = form.elements["weight"].value; let height = form.elements["height"].value; let activityLevel = form.elements["activity-level"].value; // Calculate daily recommended intake let intake = calculateIntake(age, weight, height, activityLevel); // Display results let results = document.querySelector("#results"); results.innerHTML = ` Your daily recommended intake is: Calories: ${intake.dailyCalories} Protein: ${intake.proteinIntake} grams Fat: ${intake.fatIntake} grams Carbs: ${intake.carbIntake} grams `; });

Daily Recommended Intake Calculator

Subscribe