Add files via upload

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  ================*/
+/* -------------------------------------------------------------------------------------- */

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 = "<div class='greeting'><h1>" + hour + ":" + (minute < 10 ? "0" : "") + minute + "am, " + greeting + ", " + name + "!</h1><p>Welcome back to our food planner. We're glad to have you here!</p></div>";
+            } else if (hour >= 12 && hour < 18) {
+                greeting = "Good afternoon";
+                // Display the greeting with the current time in minutes
+                document.getElementById("greeting").innerHTML = "<div class='greeting'><h1>" + hour + ":" + (minute < 10 ? "0" : "") + minute + "pm, " + greeting + ", " + name + "!</h1><p>Welcome back to our food planner. We're glad to have you here!</p></div>";
+            } else {
+                greeting = "Good evening";
+                // Display the greeting with the current time in minutes
+                document.getElementById("greeting").innerHTML = "<div class='greeting'><h1>" + hour + ":" + (minute < 10 ? "0" : "") + minute + "pm, " + greeting + ", " + name + "!</h1><p>Welcome back to our food planner. We're glad to have you here!</p></div>";
+            }
+        }, 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 =========================

index.html

@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Healthy Meals</title>
+    <title>Random Healthy Meals Generator</title>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
+      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="greeting.css" />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+
+  <body style="transition: all 1s ease" onload="loadName()">
+    <header>
+      <h1>Healthy Meals Planner</h1>
+      <nav>
+        <ul>
+          <li><a href="index.html">Home</a></li>
+        </ul>
+      </nav>
+    </header>
+    <!-- ================== S T A R T  -  G R E E T I N G ================== -->
+    <div id="greeting">
+      <div id="nameInputContainer" class="nameInputContainer">
+        <label for="nameInput">Enter your name:</label>
+        <input type="text" id="nameInput" value="" />
+        <button type="button" class="btn-dark" onclick="saveName()">
+          Save Name
+        </button>
+      </div>
+    </div>
+    <!-- ================== E N D  -  G R E E T I N G ================== -->
+
+    <!-- ================== S T A R T  -  G R E E T I N G ================== -->
+    <div id="motivation-message">
+      <div class="card">
+        <div class="card-header">Motivational Message</div>
+        <div class="card-body">
+          <blockquote class="blockquote mb-0">
+            <p id="message">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
+              posuere erat a ante.
+            </p>
+            <footer class="blockquote-footer">
+              Written by
+              <cite title="https://type.fit/api/quotes"
+                ><p>&copy; Mohammed-qasim</p></cite
+              >
+            </footer>
+          </blockquote>
+        </div>
+      </div>
+    </div>
+    <!-- ================== E N D  -  G R E E T I N G ================== -->
+
+    <!-- ================== S T A R T  -  M E A L  -  P L A N N E R ================== -->
+    <main>
+      <div class="container">
+        <h5 class="card-title">Meals for today</h5>
+        <p class="card-text">Here are your meals for today:</p>
+        <div class="row">
+          <div class="col-sm-12">
+            <div class="card">
+              <div class="card-body">
+                <h5 class="card-title">Meal One</h5>
+                <p class="card-text" id="meal1">
+                  This is the description for meal one.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="col-sm-12">
+            <div class="card">
+              <div class="card-body">
+                <h5 class="card-title">Meal Two</h5>
+                <p class="card-text" id="meal2">
+                  This is the description for meal two.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="col-sm-12">
+            <div class="card">
+              <div class="card-body">
+                <h5 class="card-title">Total Calories</h5>
+                <p class="card-text">
+                  Total calories for today: <span id="totalCalories"></span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+    <!-- ================== E N D  -  M E A L  -  P L A N N E R ================== -->
+
+    <!-- ================== S T A R T  -  F O O T E R ================== -->
+    <footer>
+      <p>Mohammed-qasim &copy; 2023 all rights reserved</p>
+    </footer>
+
+    <!-- ================== E N D  -  F O O T E R ================== -->
+
+    <script
+      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
+      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
+      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
+      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
+      crossorigin="anonymous"
+    ></script>
+    <script src="script.js"></script>
+    <script src="greeting.js"></script>
+    <script src="dark.js"></script>
+  </body>
+</html>