I'm building a work day scheduler and I'm having difficulty figuring out how to save data inside the schedule event (eg: 8am) and then have it persist on reload, I have already got the coloured time block element(changes colour as hours in the day pass) sorted out. I just need help on how I can save the data inside the time block.
const clock = document.getElementById("clock");
setInterval(() => {
const now = moment();
const readable =now.format("dddd, MMMM Do YYYY, h:mm:ss a");
clock.textContent = readable;
}, 1000);
$(document).ready(function(){
var scheduleContent = [];
var getLocalStorageData = JSON.parse(localStorage.getItem("schedule-items"));
if (getLocalStorageData !== null) {
scheduleContent = getLocalStorageData;
}
$("button").on("click", function() {
var container = $(this).parent().parent();
var inputValue = container.find("input").val();
var inputId = container.find("input").attr("id");
var textObj = {
"input-id": inputId,
"input-value": inputValue
};
if (textObj["input-value"] !== "") {
scheduleContent.push(textObj);
localStorage.setItem("schedule-items", JSON.stringify(scheduleContent));
}
});
var elements = $(".time-block");
var d = new Date();
var h = d.getHours();
for (i = 0; i < elements.length; i++) {
var t = parseInt(elements[i].getAttribute("data-hour"));
if (h < t) {
elements[i].classList.add('future');
elements[i].classList.remove('past');
elements[i].classList.remove('present');
} else if (h > t) {
elements[i].classList.add('past');
elements[i].classList.remove('future');
elements[i].classList.remove('present');
} else if (h === t) {
elements[i].classList.add('present');
elements[i].classList.remove('future');
elements[i].classList.remove('past');
} else if (h > 16 && h < 9) {
elements[i].classList.add('future');
elements[i].classList.remove('past');
elements[i].classList.remove('present');
}
}
});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 0.3s ease-in-out;
}<!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="./styles/style.css" />
<title>Work Day Scheduler</title>
<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>
<div id="clock"></div>
</header>
</head>
<body>
<div class="container">
<!-- Timeblocks go here -->
<div id ="hour-1" data-hour="8" class = "row time-block">
<div class="col-1 hour">
8AM
</div>
<textarea id ="8AM" class="col-md-10 description">
</textarea>
<button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
</div>
<div id ="hour-2" data-hour="9" class = "row time-block">
<div class="col-md-1 hour">
9AM
</div>
<textarea id="9AM" class="col-md-10 description">
</textarea>
<button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
</div>
<div id ="hour-3" data-hour="10" class = "row time-block">
<div class="col-md-1 hour">
10AM
</div>
<textarea id="10AM" class="col-md-10 description">
</textarea>
<button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
</div>
<div id ="hour-4" data-hour="11" class = "row time-block">
<div class="col-md-1 hour">
11AM
</div>
<textarea id ="11AM" class="col-md-10 description">
</textarea>
<button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
</div>
<div id ="hour-5" data-hour="12" class = "row time-block">
<div class="col-md-1 hour">
12PM
</div>
<textarea id ="12PM" class="col-md-10 description">
</textarea>
<button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
</div>
<div id ="hour-6" data-hour="13" class = "row time-block">
<div class="col-md-1 hour">
1PM
</div>
<textarea id="1PM" class="col-md-10 description">
</textarea>
<button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
</div>
<div id ="hour-7" data-hour="14" class = "row time-block">
<div class="col-md-1 hour">
2PM
</div>
<textarea id="2PM" class="col-md-10 description">
</textarea>
<button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
</div>
<div id ="hour-8" data-hour="15" class = "row time-block">
<div class="col-md-1 hour">
3PM
</div>
<textarea id="3PM" class="col-md-10 description">
</textarea>
<button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
</div>
<div id ="hour-9" data-hour="16" class = "row time-block">
<div class="col-md-1 hour">
4PM
</div>
<textarea id="4PM" class="col-md-10 description">
</textarea>
<button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
</div>
<div id ="hour-10" data-hour="17" class = "row time-block">
<div class="col-md-1 hour">
5PM
</div>
<textarea id="5PM" class="col-md-10 description">
</textarea>
<button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
