my changes

Develop/index.html

@@ -29,44 +29,77 @@
       <h1 class="display-3">Work Day Scheduler</h1>
       <p class="lead">A simple calendar app for scheduling your work day</p>
       <p id="currentDay" class="lead"></p>
+      <p id="safe" class="lead"></p>
     </header>
     <div class="container-fluid px-5">
-      <!-- Use class for "past", "present", and "future" to apply styles to the
-        time-block divs accordingly. The javascript will need to do this by
-        adding/removing these classes on each div by comparing the hour in the
-        id to the current hour. The html provided below is meant to be an example
-        demonstrating how the css provided can be leveraged to create the
-        desired layout and colors. The html below should be removed or updated
-        in the finished product. Remember to delete this comment once the
-        code is implemented.
-        -->
-
-      <!-- Example of a past time block. The "past" class adds a gray background color. -->
+
       <div id="hour-9" class="row time-block past">
         <div class="col-2 col-md-1 hour text-center py-3">9AM</div>
         <textarea class="col-8 col-md-10 description" rows="3"> </textarea>
         <button class="btn saveBtn col-2 col-md-1" aria-label="save">
           <i class="fas fa-save" aria-hidden="true"></i>
         </button>
       </div>
-
-      <!-- Example of a present time block. The "present" class adds a red background color. -->
+
       <div id="hour-10" class="row time-block present">
         <div class="col-2 col-md-1 hour text-center py-3">10AM</div>
         <textarea class="col-8 col-md-10 description" rows="3"> </textarea>
         <button class="btn saveBtn col-2 col-md-1" aria-label="save">
           <i class="fas fa-save" aria-hidden="true"></i>
         </button>
       </div>
-
-      <!-- Example of a future time block. The "future" class adds a green background color. -->
+
       <div id="hour-11" class="row time-block future">
         <div class="col-2 col-md-1 hour text-center py-3">11AM</div>
         <textarea class="col-8 col-md-10 description" rows="3"> </textarea>
         <button class="btn saveBtn col-2 col-md-1" aria-label="save">
           <i class="fas fa-save" aria-hidden="true"></i>
         </button>
       </div>
+
+
+      <div id="hour-12" class="row time-block future">
+        <div class="col-2 col-md-1 hour text-center py-3">12PM</div>
+        <textarea class="col-8 col-md-10 description" rows="3"> </textarea>
+        <button class="btn saveBtn col-2 col-md-1" aria-label="save">
+          <i class="fas fa-save" aria-hidden="true"></i>
+        </button>
+      </div>
+      <div id="hour-13" class="row time-block future">
+        <div class="col-2 col-md-1 hour text-center py-3">1PM</div>
+        <textarea class="col-8 col-md-10 description" rows="3"> </textarea>
+        <button class="btn saveBtn col-2 col-md-1" aria-label="save">
+          <i class="fas fa-save" aria-hidden="true"></i>
+        </button>
+      </div>
+      <div id="hour-14" class="row time-block future">
+        <div class="col-2 col-md-1 hour text-center py-3">2PM</div>
+        <textarea class="col-8 col-md-10 description" rows="3"> </textarea>
+        <button class="btn saveBtn col-2 col-md-1" aria-label="save">
+          <i class="fas fa-save" aria-hidden="true"></i>
+        </button>
+      </div>
+      <div id="hour-15" class="row time-block future">
+        <div class="col-2 col-md-1 hour text-center py-3">3PM</div>
+        <textarea class="col-8 col-md-10 description" rows="3"> </textarea>
+        <button class="btn saveBtn col-2 col-md-1" aria-label="save">
+          <i class="fas fa-save" aria-hidden="true"></i>
+        </button>
+      </div>
+      <div id="hour-16" class="row time-block future">
+        <div class="col-2 col-md-1 hour text-center py-3">4PM</div>
+        <textarea class="col-8 col-md-10 description" rows="3"> </textarea>
+        <button class="btn saveBtn col-2 col-md-1" aria-label="save">
+          <i class="fas fa-save" aria-hidden="true"></i>
+        </button>
+      </div>
+      <div id="hour-17" class="row time-block future">
+        <div class="col-2 col-md-1 hour text-center py-3">5PM</div>
+        <textarea class="col-8 col-md-10 description" rows="3"> </textarea>
+        <button class="btn saveBtn col-2 col-md-1" aria-label="save">
+          <i class="fas fa-save" aria-hidden="true"></i>
+        </button>
+      </div>
     </div>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Develop/script.js

@@ -2,6 +2,38 @@
 // the code isn't run until the browser has finished rendering all the elements
 // in the html.
 $(function () {
+  $("#currentDay").text(dayjs().format("dddd, MMMM D YYYY"));
+
+    $(".time-block").each(function(){
+      // console.log($(this))
+      var id = $(this).attr("id").split("-")[1];
+      var currenttime = dayjs().hour()
+
+      if (id < currenttime){
+        $(this).addClass("past").removeClass("present future")
+      }else if(id == currenttime){
+        $(this).addClass("present").removeClass("past future")
+      }else{
+        $(this).addClass("future").removeClass("past present")
+      }
+
+      var savedData = localStorage.getItem("hour-" + id);
+      if (savedData) {
+        $(this).find("textarea").val(savedData);
+      }
+
+    })
+
+    $(".saveBtn").on("click", function() {
+      var id = $(this).parent().attr("id").split("-")[1];
+      var userInput = $(this).siblings("textarea").val();
+
+      localStorage.setItem("hour-" + id, userInput);
+      $("#safe").text("Your event has been saved!");
+      setTimeout(function(){
+        $("#safe").text("");
+      }, 1000);
+    });
   // TODO: Add a listener for click events on the save button. This code should
   // use the id in the containing time-block as a key to save the user input in
   // local storage. HINT: What does `this` reference in the click listener

README.md

@@ -1 +1,54 @@
-# Work Day Scheduler Starter Code
+# Work Day Scheduler
+Work Day Scheduler
+
+
+## About The Project
+
+This one was a fun one to do especially because of my line of work.
+I have to schedule clients on a certain time.
+i certainly saw myself using the need to be able to use this application. 
+
+### Assignment  Acceptance Criteria
+
+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
+
+## Implementation
+* HTML
+* CSS3
+* JavaScript
+
+## Step By Step Personal Process
+
+* Build a Github Repo
+* Clone repo to local VS Code
+* Build a basic structure to HTML
+* Build a basic structure to JavaScript
+* Add a style sheet 
+* Troubleshoot bugs 
+* Add README file
+* Push changes to GitHub
+* Launch!
+
+## Usage
+
+Users can input their schedule into the planner, allowing them to stay on track of their activity.  Feature past present and future color coded and saves event for them to see later!
+
+
+## License
+
+none
+
+## Contact
+https://github.com/LONZEE