From f70ed9fca661cadfcb80a5c7cf5b3c1deff26a64 Mon Sep 17 00:00:00 2001 From: mohammed qasim <87497268+MohammedTsmu@users.noreply.github.com> Date: Fri, 7 Apr 2023 23:03:43 +0300 Subject: [PATCH] Add files via upload --- greeting.css | 76 +++++++++++ greeting.js | 115 ++++++++++++++++ index.html | 129 ++++++++++++++++++ script.js | 370 +++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 93 +++++++++++++ 5 files changed, 783 insertions(+) create mode 100644 greeting.css create mode 100644 greeting.js create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/greeting.css b/greeting.css new file mode 100644 index 0000000..b13bc04 --- /dev/null +++ b/greeting.css @@ -0,0 +1,76 @@ +/* ================ S T A R T - G R E E T I N G ================*/ +body { + font-family: Arial, sans-serif; + text-align: center; +} +#nameInputContainer { + margin-top: 20px; +} +#nameInput { + margin-left: 10px; + padding: 5px; + font-size: 16px; +} + +#nameInputContainer.saved #nameInput { + display: none; +} + +.greeting, +.nameInputContainer { + background-color: #f9a03f; + color: white; + margin: 20px; + padding: 40px; + padding: 20px; + border-radius: 10px; + text-align: center; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); + transition: 0.3s; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -ms-transition: 0.3s; + -o-transition: 0.3s; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + -ms-border-radius: 10px; + -o-border-radius: 10px; +} + +.greeting:hover, +.nameInputContainer:hover { + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); +} + +.greeting h1, +.nameInputContainer h1 { + font-size: 48px; + margin-bottom: 20px; +} + +.greeting p, +.nameInputContainer p { + font-size: 24px; + line-height: 1.5; +} + +/* ================ E N D - G R E E T I N G ================*/ +/* ------------------------------------------------------------------------------------------ */ +/* ================ S T A R T - M O T I V A T I O N A L - M E S S A G E S ================*/ +/* #motivation-message { + background-color: #f2f2f2; + border: 1px solid #ddd; + margin: 20px; + padding: 20px; + text-align: center; + border-radius: 4px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; +} +#motivation-message h2 { + margin-top: 0; +} */ +/* ================ E N D - M O T I V A T I O N A L - M E S S A G E S ================*/ +/* -------------------------------------------------------------------------------------- */ diff --git a/greeting.js b/greeting.js new file mode 100644 index 0000000..8abc393 --- /dev/null +++ b/greeting.js @@ -0,0 +1,115 @@ +// ========================== S T A R T - G R E E T I N G ========================= +function saveName() { + var name = document.getElementById("nameInput").value; + if (localStorage.getItem("name") != name) { + // Reload the current page + location.reload(); + + localStorage.setItem("name", name); + // document.getElementById("nameInputContainer").style.display = "none"; + + // Reload the current page + location.reload(); + } +} + +function loadName() { + var name = localStorage.getItem("name"); + if (name != null) { + setInterval(function () { + // Get the current time in hours and minutes + var now = new Date(); + var hour = now.getHours(); + var minute = now.getMinutes(); + + // Determine the appropriate greeting based on the time of day + var greeting; + if (hour >= 0 && hour < 12) { + greeting = "Good morning"; + // Display the greeting with the current time in minutes + document.getElementById("greeting").innerHTML = "

" + hour + ":" + (minute < 10 ? "0" : "") + minute + "am, " + greeting + ", " + name + "!

Welcome back to our food planner. We're glad to have you here!

"; + } else if (hour >= 12 && hour < 18) { + greeting = "Good afternoon"; + // Display the greeting with the current time in minutes + document.getElementById("greeting").innerHTML = "

" + hour + ":" + (minute < 10 ? "0" : "") + minute + "pm, " + greeting + ", " + name + "!

Welcome back to our food planner. We're glad to have you here!

"; + } else { + greeting = "Good evening"; + // Display the greeting with the current time in minutes + document.getElementById("greeting").innerHTML = "

" + hour + ":" + (minute < 10 ? "0" : "") + minute + "pm, " + greeting + ", " + name + "!

Welcome back to our food planner. We're glad to have you here!

"; + } + }, 1000); // Update every 1000 milliseconds (1 second) + + // document.getElementById("greeting").innerHTML = greeting + ", " + name + "!"; + document.getElementById("nameInputContainer").style.display = "none"; + } +} +// ========================== E N D - G R E E T I N G ========================= +// ------------------------------------------------------------------------------------------------------------- + + + +// ========================== S T A R T - M O T I V A T I O N A L - M E S S A G E S ========================= +// Define the URL of the API that provides the motivational messages +const API_URL = "https://type.fit/api/quotes"; + +// Define the default messages to use when no internet connection is available +const DEFAULT_MESSAGES = [ + "Believe in yourself and all that you are. Know that there is something inside you that is greater than any obstacle.", + "You are never too old to set a new goal or to dream a new dream.", + "Success is not final, failure is not fatal: It is the courage to continue that counts.", + "Chase your dreams but always know the road that will lead you home again.", +]; + +// Get the last time a message was displayed from localStorage +let lastDisplayed = localStorage.getItem("lastDisplayed"); + +// If there is no lastDisplayed value in localStorage, set it to 0 +if (!lastDisplayed) { + lastDisplayed = 0; + localStorage.setItem("lastDisplayed", lastDisplayed); +} + +// Get the current time in milliseconds +const now = new Date().getTime(); + +// Calculate the time since the last message was displayed +const timeSinceLastDisplayed = now - lastDisplayed; + +// If more than 24 hours have passed since the last message was displayed +// if (timeSinceLastDisplayed > 24 * 60 * 60 * 1000) { +if (timeSinceLastDisplayed > 1000) { + // Make a request to the API to get a new message + fetch(API_URL) + .then((response) => response.json()) + .then((data) => { + // Get a random message from the API response + const randomIndex = Math.floor(Math.random() * data.length); + const randomMessage = data[randomIndex]; + + // Display the new message to the user + const messageElement = document.getElementById("message"); + messageElement.innerText = randomMessage.text; + // Show the motivation message div + const motivationDiv = document.getElementById("motivation-message"); + motivationDiv.style.display = "block"; + // Update the lastDisplayed value in localStorage with the current time + localStorage.setItem("lastDisplayed", now); + }) + .catch((error) => { + // If there is an error fetching the message from the API, use the next default message instead + const lastDisplayedIndex = parseInt(lastDisplayed); + const nextIndex = (lastDisplayedIndex + 1) % DEFAULT_MESSAGES.length; + const messageElement = document.getElementById("message"); + messageElement.innerText = DEFAULT_MESSAGES[nextIndex]; + // Show the motivation message div + const motivationDiv = document.getElementById("motivation-message"); + motivationDiv.style.display = "block"; + // Update the lastDisplayed value in localStorage with the current time + localStorage.setItem("lastDisplayed", nextIndex.toString()); + }); +} else { + // If less than 24 hours have passed since the last message was displayed, hide the motivation message div + const motivationDiv = document.getElementById("motivation-message"); + motivationDiv.style.display = "none"; +} +// ========================== E N D - M O T I V A T I O N A L - M E S S A G E S ========================= \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..310d3a7 --- /dev/null +++ b/index.html @@ -0,0 +1,129 @@ + + + + + + Healthy Meals + Random Healthy Meals Generator + + + + + + +
+

Healthy Meals Planner

+ +
+ +
+
+ + + +
+
+ + + +
+
+
Motivational Message
+
+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer + posuere erat a ante. +

+ +
+
+
+
+ + + +
+
+
Meals for today
+

Here are your meals for today:

+
+
+
+
+
Meal One
+

+ This is the description for meal one. +

+
+
+
+
+
+
+
Meal Two
+

+ This is the description for meal two. +

+
+
+
+
+
+
+
Total Calories
+

+ Total calories for today: +

+
+
+
+
+
+
+ + + + + + + + + + + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..af197ec --- /dev/null +++ b/script.js @@ -0,0 +1,370 @@ +// Define the meals data +const mealsData = [ + { + name: 'Turkey Burger with Avocado and Sweet Potato Fries', + protein: 25, + vegetables: 100, + carbohydrates: 100, + salad: 0, + calories: 350 + }, { name: 'Grilled Chicken with Quinoa Salad', protein: 30, vegetables: 0, carbohydrates: 0, salad: 100, calories: 250 }, + { name: 'Salmon and Mixed Greens Salad', protein: 25, vegetables: 0, salad: 150, carbohydrates: 0, calories: 300 }, + { name: 'Vegetarian Chickpea Salad', protein: 15, vegetables: 0, salad: 80, carbohydrates: 0, calories: 150 }, + { name: 'Roast Beef and Arugula Salad', protein: 35, vegetables: 0, salad: 120, carbohydrates: 0, calories: 280 }, + { name: 'Grilled Chicken with Sweet Potato and Broccoli', protein: 30, vegetables: 150, salad: 100, carbohydrates: 100, calories: 350 }, + { name: 'Salmon with Brown Rice and Asparagus', protein: 25, vegetables: 150, salad: 100, carbohydrates: 100, calories: 350 }, + { name: 'Grilled Salmon with Roasted Carrots and Cauliflower Rice', protein: 25, vegetables: 150, salad: 100, carbohydrates: 50, calories: 300 }, + { name: 'Roast Beef with Steamed Broccoli and Sweet Potato Mash', protein: 35, vegetables: 150, salad: 100, carbohydrates: 100, calories: 400 }, + { name: 'Turkey Burger with Avocado and Sweet Potato Fries', protein: 25, vegetables: 100, salad: 100, carbohydrates: 100, calories: 350 }, + { name: 'Oven-Baked Salmon with Green Beans and Quinoa', protein: 25, vegetables: 150, salad: 100, carbohydrates: 100, calories: 350 }, + { + name: 'Spinach and Feta Stuffed Chicken with Roasted Carrots', + protein: 30, + vegetables: 150, + carbohydrates: 50, + salad: 0, + calories: 350 + }, { + name: 'Grilled Steak with Grilled Bell Peppers and Cauliflower Rice', + protein: 35, + vegetables: 150, + carbohydrates: 50, + salad: 0, + calories: 400 + }, { + name: 'Roasted Chicken Thighs with Brussels Sprouts and Sweet Potato Mash', + protein: 25, + vegetables: 150, + carbohydrates: 100, + salad: 0, + calories: 350 + }, { + name: 'Grilled Salmon with Roasted Cauliflower and Sweet Potato', + protein: 25, + vegetables: 150, + carbohydrates: 100, + salad: 0, + calories: 350 + }, { + name: 'Chicken and Vegetable Skewers with Quinoa', + protein: 30, + vegetables: 150, + carbohydrates: 100, + salad: 0, + calories: 350 + }, { + name: 'Beef and Broccoli Bowl with Brown Rice', + protein: 35, + vegetables: 150, + carbohydrates: 100, + salad: 0, + calories: 400 + }, { + name: 'Veggie Burger with Sweet Potato Fries and Roasted Brussel Sprouts', + protein: 20, + vegetables: 200, + carbohydrates: 100, + salad: 0, + calories: 350 + }, { + name: 'Spinach and Feta Scrambled Eggs with Roasted Tomatoes and Avocado', + protein: 20, + vegetables: 100, + carbohydrates: 50, + salad: 0, + calories: 350 + }, + { + name: 'Egg Salad Wrap with Mixed Greens and Carrots', + protein: 15, + vegetables: 100, + carbohydrates: 50, + salad: 0, + calories: 250 + }, + { + name: 'Vegetable Omelette with Whole Wheat Toast and Berries', + protein: 20, + vegetables: 100, + carbohydrates: 30, + salad: 0, + calories: 300 + }, + { + name: 'Spinach and Feta Scrambled Eggs with Roasted Tomatoes and Avocado', + protein: 20, + vegetables: 100, + carbohydrates: 50, + salad: 0, + calories: 350 + }, + { + name: 'Egg Salad Wrap with Mixed Greens and Carrots', + protein: 15, + vegetables: 100, + carbohydrates: 50, + salad: 0, + calories: 250 + }, + { + name: 'Quinoa and Egg Bowl with Roasted Vegetables', + protein: 20, + vegetables: 150, + carbohydrates: 100, + salad: 0, + calories: 350 + }, + { + name: 'Sweet Potato and Kale Frittata with Sliced Apple', + protein: 20, + vegetables: 100, + carbohydrates: 30, + salad: 0, + calories: 300 + }, { + name: 'Egg and Avocado Toast with Sliced Cucumber', + protein: 15, + vegetables: 50, + carbohydrates: 30, + salad: 0, + calories: 200 + }, { + name: 'Grilled Chicken and Zucchini Skewers with Cauliflower Rice', + protein: 30, + vegetables: 150, + carbohydrates: 50, + salad: 0, + calories: 350 + }, { + name: 'Broiled Salmon with Asparagus and Roasted Brussels Sprouts', + protein: 25, + vegetables: 200, + carbohydrates: 50, + salad: 0, + calories: 350 + }, + { + name: 'Grilled Shrimp and Vegetable Kabobs with Cucumber Salad', + protein: 25, + vegetables: 150, + carbohydrates: 30, + salad: 0, + calories: 300 + }, + { + name: 'Stuffed Bell Peppers with Ground Turkey and Cauliflower Rice', + protein: 25, + vegetables: 200, + carbohydrates: 30, + salad: 0, + calories: 350 + }, + { + name: 'Spaghetti Squash with Meatballs and Roasted Broccoli', + protein: 30, + vegetables: 150, + carbohydrates: 50, + salad: 0, + calories: 400 + }, + { + name: 'Grilled Portobello Mushroom with Roasted Eggplant and Mixed Greens', + protein: 10, + vegetables: 200, + carbohydrates: 30, + salad: 0, + calories: 250 + }, { + name: 'Grilled Salmon with Steamed Broccoli and Quinoa Salad', + protein: 25, + vegetables: 100, + carbohydrates: 50, + salad: 0, + calories: 350 + }, { + name: 'Baked Chicken Breast with Roasted Carrots and Cauliflower Mash', + protein: 30, + vegetables: 150, + carbohydrates: 30, + salad: 0, + calories: 350 + }, { + name: 'Beef Stir Fry with Mixed Vegetables and Brown Rice', + protein: 25, + vegetables: 150, + carbohydrates: 50, + salad: 0, + calories: 400 + }, { + name: 'Beef and Broccoli Stir Fry with Zucchini Noodles', + protein: 25, + vegetables: 200, + carbohydrates: 30, + salad: 0, + calories: 400 + }, { + name: 'Grilled Salmon with Lemon Butter Sauce and Steamed Broccoli', + protein: 25, + vegetables: 100, + carbohydrates: 5, + salad: 0, + calories: 350 + }, { + name: 'Pan-Fried Chicken Thighs with Roasted Cauliflower and Green Beans', + protein: 30, + vegetables: 150, + carbohydrates: 7, + salad: 0, + calories: 400 + }, { + name: 'Grilled Steak with Garlic Butter Mushrooms and Asparagus', + protein: 30, + vegetables: 100, + carbohydrates: 7, + salad: 0, + calories: 400 + }, { + name: 'Spicy Shrimp and Avocado Salad with Mixed Greens', + protein: 25, + vegetables: 100, + carbohydrates: 7, + salad: 0, + calories: 300 + }, { + name: 'Sesame Ginger Beef Stir Fry with Cauliflower Rice', + protein: 30, + vegetables: 150, + carbohydrates: 7, + salad: 0, + calories: 400 + }, { + name: 'Lemon Butter Chicken Thighs with Garlic Roasted Brussels Sprouts', + protein: 30, + vegetables: 100, + carbohydrates: 7, + salad: 0, + calories: 400 + }, { + name: 'Baked Salmon with Roasted Garlic Butter Broccoli', + protein: 25, + vegetables: 100, + carbohydrates: 5, + salad: 0, + calories: 350 + }, { + name: 'Grilled Ribeye Steak with Sauteed Mushrooms and Asparagus', + protein: 30, + vegetables: 100, + carbohydrates: 7, + salad: 0, + calories: 450 + }, + { + name: 'Buffalo Chicken Lettuce Wraps with Celery and Blue Cheese Dressing', + protein: 25, + vegetables: 100, + carbohydrates: 5, + salad: 0, + calories: 300 + }, + { + name: 'Grilled Chicken Skewers with Bell Peppers and Onions', + protein: 25, + vegetables: 100, + carbohydrates: 5, + salad: 0, + calories: 300 + } +]; + +// Define a function to get a random meal from the meals data +function getRandomMeal() { + // Shuffle the meals data + const shuffledMeals = mealsData.sort(() => 0.5 - Math.random()); + // Get two random meals + const randomMeals = shuffledMeals.slice(0, 2); + // Return the random meals + return randomMeals; +} + +// Define a function to calculate the total calories for the day +function getTotalCalories(meals) { + // Initialize the total calories to 0 + let totalCalories = 0; + // Loop through the meals and add up their calories + meals.forEach((meal) => { + totalCalories += meal.calories; + }); + // Return the total calories + return totalCalories; +} + +// Define a function to display the meals and total calories +function displayMeals(meals, totalCalories) { + // Get the meal placeholders + const meal1 = document.getElementById('meal1'); + const meal2 = document.getElementById('meal2'); + // Display the meals + meal1.innerHTML = `
${meals[0].name} (${meals[0].protein}g protein,${meals[0].carbohydrates}g carbohydrates,${meals[0].vegetables}g vegetables, ${meals[0].salad}g salad, ${meals[0].calories} calories)
+
`; + meal2.innerHTML = `
${meals[1].name} (${meals[1].protein}g protein,${meals[0].carbohydrates}g carbohydrates,${meals[0].vegetables}g vegetables, ${meals[1].salad}g salad, ${meals[1].calories} calories)
+
`; + // meal1.innerHTML = `
${meals[0].name} (${meals[0].protein}g protein, ${meals[0].salad}g salad, ${meals[0].calories} calories)
+ //
`; + // meal2.innerHTML = `
${meals[1].name} (${meals[1].protein}g protein, ${meals[1].salad}g salad, ${meals[1].calories} calories)
+ //
`; + // + // Get the total calories placeholder + const totalCaloriesPlaceholder = document.getElementById('totalCalories'); + // Display the total calories + totalCaloriesPlaceholder.innerHTML = "
" + totalCalories + "
"; +} + +// Define a function to check if a meal is already in the local storage +function isMealInLocalStorage(meal) { + // Get the meals from the local storage + const meals = JSON.parse(localStorage.getItem('meals')) || []; + // Check if the meal is already in the local storage + const isMealInLocalStorage = meals.some( + (savedMeal) => savedMeal.name === meal.name + ); + // Return the result + return isMealInLocalStorage; +} + +// Define a function to save the meals to the local storage +function saveMealsToLocalStorage(meals) { + // Get the meals from the local storage + const savedMeals = JSON.parse(localStorage.getItem('meals')) || []; + // Add the new meals to the saved meals + const updatedMeals = savedMeals.concat(meals); + // Save the updated meals to the local storage + localStorage.setItem('meals', JSON.stringify(updatedMeals)); +} + +// Get the current date +const currentDate = new Date(); + +// Get the meals from the local storage or generate new ones +const savedMeals = JSON.parse(localStorage.getItem('meals')) || []; +let meals; +if ( + savedMeals.length === 0 || + currentDate.getDay() !== new Date(savedMeals[savedMeals.length - 1].date).getDay() +) { + // Generate new meals if there are no saved meals or if the last saved meal was from a different day + meals = getRandomMeal(); + // Save the new meals to the local storage + saveMealsToLocalStorage( + meals.map((meal) => ({ ...meal, date: currentDate.toISOString() })) + ); +} else { + // Use the saved meals if they are from the same day + meals = savedMeals.slice(savedMeals.length - 2); +} + +// Calculate the total calories for the day +const totalCalories = getTotalCalories(meals); + +// Display the meals and total calories +displayMeals(meals, totalCalories); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..003a446 --- /dev/null +++ b/style.css @@ -0,0 +1,93 @@ +body { + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + margin: 0; + padding: 0; + background-color: #f8f8f8; + color: #333; +} + +header { + background-color: #333; + color: #fff; + padding: 10px; + display: flex; + justify-content: space-between; + align-items: center; +} + +nav ul { + list-style: none; + margin: 0; + padding: 0; + display: flex; +} + +nav li { + margin-right: 20px; +} + +nav a { + color: #fff; + text-decoration: none; + transition: color 0.3s ease-in-out; +} + +nav a:hover { + color: #f00; +} + +main { + padding: 20px; +} + +footer { + background-color: #ccc; + padding: 10px; + text-align: center; +} +#totalCalories { + font-weight: bold; +} + +@media screen and (min-width: 576px) { + .card { + margin-bottom: 1.5rem; + margin: 1.5rem; + } + + .row > .col-sm-6:nth-of-type(odd) { + clear: left; + } +} + +@media screen and (min-width: 480px) { + .card { + margin-bottom: 1.5rem; + } + + .row > .col-sm-6:nth-of-type(odd) { + clear: left; + } +} + +footer { + background-color: #333; + color: #ccc; + padding: 10px; + text-align: center; +} +.blockquote-footer { + background-color: violet; + color: #000; +} + +.card { + padding: 20px; + border-radius: 5px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25); + border: none; +}