almost complete

3lectricfly69 · Sep 26, 2023 · 73fa22c · 73fa22c
1 parent 5bf431a
commit 73fa22c
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,16 @@
 # WorkDayPlanner
 This page contains time blocks from 9am-5pm. Each time block is color coded to indicate the past, present, and future. A user can then, enter an event during this time block and save it.
+
+GIVEN I am using a daily planner to create a schedule
+WHEN I open the planner
+THEN the current day is displayed at the top of the calendar
+WHEN I scroll down
+THEN I am presented with time blocks for standard business hours of 9am to 5pm
+WHEN I view the time blocks for that day
+THEN each time block is color-coded to indicate whether it is in the past, present, or future
+WHEN I click into a time block
+THEN I can enter an event
+WHEN I click the save button for that time block
+THEN the text for that event is saved in local storage
+WHEN I refresh the page
+THEN the saved events persist
diff --git a/index.html b/index.html
@@ -23,13 +23,19 @@
     <link rel="stylesheet" href="style.css" />
     <title>Work Day Scheduler</title>
   </head>
-
   <body>
     <header class="p-5 mb-4">
       <h1 class="display-3">Work Day Scheduler</h1>
       <p class="lead">A simple calendar app for scheduling your work day</p>
       <p text a
-      id="currentDay" class="lead"></p>
+      id="currentDay" class="lead"
+      var timeDisplay = document.getElementById("time"); function refreshTime() {
+      var dateString = new Date().toLocaleString("en-US", {timeZone: "America/Chicago"});
+      var formattedString = dateString.replace(", ", " - ");
+      timeDisplay.innerHTML = formattedString;
+      } setInterval(refreshTime, 1000);
+      <p id="time"></p>
+      ></p>
     </header>
     <div class="container-fluid px-5">
       <!-- Use class for "past", "present", and "future" to apply styles to the

diff --git a/script.js b/script.js
@@ -1,17 +1,23 @@
-var TenAM = $("#Ten");
-var ElevenAM = $("Eleven");
-var TwelveAM = $("#Twelve");
-var OnePM = $("#One");
-var TwoPM = $("#Two");
-var ThreePM = $("#Three");
-var FourPM = $("#Four");
-var FivePM = $("#Five");
-
-
 console.log(moment().hours());
 console.log(moment().date());
 
-$("#date").text("Today's date is: " + ((moment().month()) + 1 )+ "/" + (moment().date()) + "/" + (moment().year()));
+$("#currentDay").text("Today's date is: " + ((moment().month()) + 1 )+ "/" + (moment().date()) + "/" + (moment().year()));
+$(#currentTime)
+function startTime() {
+  var today = new Date();
+  var h = today.getHours();
+  var m = today.getMinutes();
+  var s = today.getSeconds();
+  m = checkTime(m);
+  s = checkTime(s);
+  document.getElementById('txt').innerHTML =
+  h + ":" + m + ":" + s;
+  var t = setTimeout(startTime, 500);
+}
+function checkTime(i) {
+  if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
+  return i;
+}
 
 $(".saveBtn").on("click", function(){
   console.log($(this));