diff --git a/README.md b/README.md index f9d09cf..9e77327 100644 --- a/README.md +++ b/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.

    + +
    +
    • +

    (back to top)

    diff --git a/Source-Code/DayPredictor/index.html b/Source-Code/DayPredictor/index.html new file mode 100644 index 0000000..5d567f3 --- /dev/null +++ b/Source-Code/DayPredictor/index.html @@ -0,0 +1,25 @@ + + + + + + + + Day Predictor + + + +
    +

    Today is:

    + +
    + + + diff --git a/Source-Code/DayPredictor/script.js b/Source-Code/DayPredictor/script.js new file mode 100644 index 0000000..7b37a7c --- /dev/null +++ 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 new file mode 100644 index 0000000..c63b418 --- /dev/null +++ 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; +}