DayPlanner02

working on JS to work properly on 'save' selection

by moshfeu

HTML

<!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="style.css" />
  <title>Work Day Scheduler</title>
</head>

<body>
  <header class="jumbotron jumbotron-fluid">
    <div class="container-fluid">
      <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>
    </div>
  </header>
  <main class="container schedule">


    <div class="input-group input-group-lg schedule-day">
      <!-- <button type="button" class="btn btn-outline-secondary">Action</button> -->
      <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"
        data-bs-toggle="dropdown" aria-expanded="false">
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item working" href="#">Working On</a></li>
        <li><a class="dropdown-item complete" href="#">Complete</a></li>
        <li><a class="dropdown-item save" href="#">Save</a></li>

      </ul>
      <input type="text" class="form-control" id="task-0" aria-label="Text input with segmented dropdown button" name="task-0">
      <span class="input-group-text schedule-time">9am</span>
    </div>


  </main>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="...

CSS

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1;
}

textarea{
  background: transparent;
  border: none;
  resize: none;
  color: #000000;
  border-left: 1px solid black;
  padding: 10px;
}

.jumbotron {
  text-align: center;
  background-color: transparent;
  color: black;
  border-radius: 0;
  border-bottom: 10px solid black;
}

.description{
  white-space: pre-wrap;
}

.time-block{
  text-align: center;
  border-radius: 15px;
}

.row {
  white-space: pre-wrap;
  height: 80px;
  border-top: 1px solid white;;
}

.hour {
  background-color: #ffffff;
  color: #000000;
  border-top: 1px dashed #000000;
}

.past {
  background-color: #d3d3d3;
  color: white;
}

.present {
  background-color: #ff6961;
  color: white;
}

.future {
  background-color: #77dd77;
  color: white;
}

.saveBtn {
  border-left: 1px solid black;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  background-color: #06AED5;
  color: white;
}

.saveBtn i:hover {
  font-size: 20px;
  transition: all .3s ease-in-out;
}

JavaScript

'use strict';

$(function () {
    console.log("doc is ready for jquery!");

    var usTime = ["10am", "11am", "12pm", "1 pm", "2 pm", "3 pm", "4 pm", "5 pm"];
    var $schedule = $('.schedule');
    var $scheduleDay = $('.schedule-day');
    var $taskInput = $('.form-control');
    var $save = $(".save")
    const $tasks = [];


    usTime.forEach(function (time, index) {
        var newDay = $scheduleDay.clone();
        newDay.find('.schedule-time').text(time);
        var inputName = `task-${index + 1}`;
        newDay.find("#task").attr("id", inputName);
        /* newDay.find("input").add("name") */;
        newDay.find("input").attr("name", inputName);
        $('.schedule').append(newDay);


    });
    $('.schedule input').each(function(index) {
    	var $input = $(this);
    	$input.val(localStorage.getItem($input.attr('name')));
    });
    
    $(".complete").click(function (e) {
        console.log('complete has been clicked');
      
        $(this).closest('ul').siblings('input').css('background-color', 'blue')
      
    });

    $(".working").click(function (a) {

        console.log('working on has been clicked');

        $(this).closest('ul').siblings('input').css('background-color', 'yellow');

    })

  
    $save.click((f) => {
    		f.preventDefault();
        //var task = $("input:selected").val();
        var input = $(f.target).closest('.dropdown-menu').next();
        var task = input.val();
        var key = input.attr('name');
        console.log(task, key);
       
        /* var getTask = JSON.parse(localStorage.getItem("input") || '{}'); */
				localStorage.setItem(key, task);

       
        console.log("text input has been saved");

 

    });


})