coding-boot-camp · Father-of-Cats · Apr 22, 2022 · Apr 22, 2022 · Apr 22, 2022 · Apr 22, 2022
diff --git a/Develop/index.html b/Develop/index.html
diff --git a/README.md b/README.md
@@ -1 +1 @@
-# Work Day Scheduler Starter Code
+
diff --git a/assets/script.js b/assets/script.js
@@ -0,0 +1,51 @@
+$(document).ready(function() {
+    // This posts the current date and 24h clock in the header
+    const today = moment().format('MMMM Do YY, H:mm:ss a')
+    $("#currentDay").html(today);
+
+    loadLocal = () => {
+        // creates an element to run through for each row.id
+        let id = ["9","10","11","12","13","14","15","16","17"]
+        // iterate through entire id list
+        for (let i = 0; i < id.length; i++) {
+        // creates an id element with a value of each of the id iterations
+            let idEl = id[i];
+        // sets the value of each description to locally saved data of each corresponding id
+            $(`#${idEl} .description`).val(localStorage.getItem(idEl))
+        }
+    };
+    loadLocal();
+
+    // Saves to local storage on button click
+    $(".btn").click(() => {
+        // pulls hour from id of .btn parent div
+        let hour = $(this).parent().attr("id")
+        // pulls description from text value of textarea
+        let description = $(this).siblings(".description").val()
+        // saves hour and description to localStorage
+        localStorage.setItem(hour,description)
+    });
+    // tracks time and shifts row color
+    timeTracker = () => {
+        // loops through the .row DOM element activating the function
+        $("textarea").each(function() {
+            // current hour from moment js
+            let currentTime = 12
+            // pulls interger from id of the parent row
+            let timeBlock = parseInt($(this).parent().attr("id"));
+            if(timeBlock > currentTime) {
+                $(this).addClass("future")
+                $(this).removeClass("present")
+            }else if(timeBlock == currentTime) {
+                $(this).removeClass("future")
+                $(this).removeClass("past")
+                $(this).addClass("present")
+            } else {
+                $(this).removeClass("future")
+                $(this).removeClass("present")
+                $(this).addClass("past")
+            }
+        })
+    }
+    timeTracker();
+});
diff --git a/Develop/style.css → assets/style.css b/Develop/style.css → assets/style.css
@@ -8,7 +8,7 @@ textarea{
   background: transparent;
   border: none;
   resize: none;
-  color: #000000;
+  color: black;
   border-left: 1px solid black;
   padding: 10px;
 }
@@ -18,16 +18,18 @@ textarea{
   background-color: transparent;
   color: black;
   border-radius: 0;
-  border-bottom: 10px solid black;
+  border-bottom: 2px solid black;
 }
 
 .description{
   white-space: pre-wrap;
+  border: 1px solid black
 }
 
 .time-block{
   text-align: center;
   border-radius: 15px;
+  color: black;
 }
 
 .row {
@@ -39,9 +41,11 @@ textarea{
 .hour {
   background-color: #ffffff;
   color: #000000;
-  border-top: 1px dashed #000000;
+  border-top: 2px solid #000000;
 }
 
+/* dynamic css options */
+
 .past {
   background-color: #d3d3d3;
   color: white;
@@ -53,7 +57,7 @@ textarea{
 }
 
 .future {
-  background-color: #77dd77;
+  background-color: #77c5dd;
   color: white;
 }
 

diff --git a/index.html b/index.html
@@ -0,0 +1,94 @@
+<!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="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
+      integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
+      crossorigin="anonymous"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="./assets/style.css" />
+    <title>Work Day Scheduler</title>
+  </head>
+
+  <body>
+    <header class="jumbotron">
+      <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>
+    </header>
+
+      <!-- Timeblocks go here -->
+    <div id="9" class="row time-block justify-content-center">
+      <div class="hour col-md-1">9:00</div>
+      <textarea id="input" class="col-md-8 text-dark description"></textarea>
+      <button class="btn saveBtn col-md-1">save</button>
+    </div>
+
+    <div id="10" class="row time-block justify-content-center">
+      <div class="hour col-md-1">10:00</div>
+      <textarea class="col-md-8 text-dark description"></textarea>
+      <button class="btn saveBtn col-md-1">save</button>
+    </div>
+
+    <div id="11" class="row time-block justify-content-center">
+      <div class="hour col-md-1">11:00</div>
+      <textarea class="col-md-8 text-dark description"></textarea>
+      <button class="btn saveBtn col-md-1">save</button>
+    </div>
+
+    <div id="12" class="row time-block justify-content-center">
+      <div class="hour col-md-1">12:00</div>
+      <textarea class="col-md-8 text-dark description"></textarea>
+      <button class="btn saveBtn col-md-1">save</button>
+    </div>
+
+    <div id="13" class="row time-block justify-content-center">
+      <div class="hour col-md-1">13:00</div>
+      <textarea class="col-md-8 text-dark description"></textarea>
+      <button class="btn saveBtn col-md-1">save</button>
+    </div>
+
+    <div id="14" class="row time-block justify-content-center">
+      <div class="hour col-md-1">14:00</div>
+      <textarea class="col-md-8 text-dark description"></textarea>
+      <button class="btn saveBtn col-md-1">save</button>
+    </div>
+
+    <div id="15" class="row time-block justify-content-center">
+      <div class="hour col-md-1">15:00</div>
+      <textarea class="col-md-8 text-dark description"></textarea>
+      <button class="btn saveBtn col-md-1">save</button>
+    </div>
+
+    <div id="16" class="row time-block justify-content-center">
+      <div class="hour col-md-1">16:00</div>
+      <textarea class="col-md-8 text-dark description"></textarea>
+      <button class="btn saveBtn col-md-1">save</button>
+    </div>
+
+    <div id="17" class="row time-block justify-content-center">
+      <div class="hour col-md-1">17:00</div>
+      <textarea class="col-md-8 text-dark description"></textarea>
+      <button class="btn saveBtn col-md-1">save</button>
+    </div>
+
+
+
+
+    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
+    <script src="./assets/script.js"></script>r
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "work-day-scheduler",
+  "version": "1.0.0",
+  "description": "persistant work day planner using localStorage and moment.js",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Father-of-Cats/Work-Day-Scheduler.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Father-of-Cats/Work-Day-Scheduler/issues"
+  },
+  "homepage": "https://github.com/Father-of-Cats/Work-Day-Scheduler#readme"
+}