Merge pull request #29 from tajulafreen/Day_Predictor

tajulafreen · web-flow · commit 824a1b542b6e · 2024-07-27T03:52:13.000+05:30
50Projects-HTML-CSS-JavaScript : Day predictor
diff --git a/README.md b/README.md
@@ -298,6 +298,17 @@ In order to run this project you need:
 </details>
 </li>
 
+<li>
+<details>
+<summary>Day Predictor</summary>
+<p>A Simple Week Day Predictor App written in HTML, CSS, and JavaScript. This app displays the current day of the week along with a corresponding motivational quote, using local computer time.</p>
+<ul>
+<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/DayPredictor/">Live Demo</a></li>
+<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/DayPredictor">Source</a></li>
+</ul> 
+</details>
+</li>
+
 </ol>
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
diff --git a/Source-Code/DayPredictor/index.html b/Source-Code/DayPredictor/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Day Predictor</title>
+  </head>
+
+  <body>
+    <div id="container">
+      <h1>Today is:</h1>
+      <ul>
+        <li>
+          <span id="weekday"> Display day of the week. </span>
+        </li>
+        <li>
+          <span id="phrase">Display a quote</span>
+        </li>
+      </ul>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Source-Code/DayPredictor/script.js b/Source-Code/DayPredictor/script.js
@@ -0,0 +1,49 @@
+document.addEventListener('DOMContentLoaded', () => {
+  // Grab day of the week from local computer
+  const date = new Date();
+  const dayOfWeekNumber = date.getDay();
+  let nameOfDay;
+  let quote;
+
+  switch (dayOfWeekNumber) {
+    case 0:
+      nameOfDay = 'Sunday';
+      quote = 'Time to chillax!';
+      break;
+    case 1:
+      nameOfDay = 'Monday';
+      quote = 'Monday morning blues!';
+      break;
+    case 2:
+      nameOfDay = 'Tuesday';
+      quote = 'Taco Time!';
+      break;
+    case 3:
+      nameOfDay = 'Wednesday';
+      quote = 'Two more days to the weekend.';
+      break;
+    case 4:
+      nameOfDay = 'Thursday';
+      quote = 'The weekend is almost here...';
+      break;
+    case 5:
+      nameOfDay = 'Friday';
+      quote = 'Weekend is here!';
+      break;
+    case 6:
+      nameOfDay = 'Saturday';
+      quote = 'Time to party!';
+      break;
+    default:
+      nameOfDay = 'Unknown';
+      quote = '';
+  }
+
+  // Display the day of the week
+  const weekdayDiv = document.getElementById('weekday');
+  weekdayDiv.innerHTML = `${nameOfDay}`;
+
+  // Display quote
+  const quoteDiv = document.getElementById('phrase');
+  quoteDiv.innerHTML = `${quote}`;
+});
diff --git a/Source-Code/DayPredictor/style.css b/Source-Code/DayPredictor/style.css
@@ -0,0 +1,41 @@
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  margin: 50px;
+  background: #fff;
+}
+
+#container {
+  width: 500px;
+  height: 350px;
+  background-color: rgb(157, 255, 0);
+  margin: auto;
+  border-radius: 30px;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 40px;
+  font-weight: 900;
+  text-transform: uppercase;
+  text-align: center;
+  color: #f533e8;
+}
+
+ul {
+  list-style-type: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#weekday {
+  font-size: 40px;
+  color: #dd5800;
+  font-weight: 800;
+}
+
+#phrase {
+  font-size: 40px;
+  color: #00f;
+  font-weight: 800;
+}
