50Projects-HTML-CSS-JavaScript : Day predictor

README.md

@@ -298,6 +298,17 @@ In order to run this project you need:
 
 
 
+
+
+Day Predictor
+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.
+
+Live Demo
+Source
+ 
+
+
+
 
 
 (back to top)

Source-Code/DayPredictor/index.html

@@ -0,0 +1,25 @@
+
+
+  
+    
+    
+    
+    
+    Day Predictor
+  
+
+  
+    
+      Today is:
+      
+        
+           Display day of the week. 
+        
+        
+          Display a quote
+        
+      
+    
+    
+  
+

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}`;
+});

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;
+}