-
Notifications
You must be signed in to change notification settings - Fork 0
/
planner.js
83 lines (58 loc) · 2.41 KB
/
planner.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
// WHEN I open the planner, the current day is displayed at the top of the calenda
var monthNames = [
"January", "February", "March",
"April", "May", "June",
"July", "August", "September",
"October", "November", "December"
];
var days = [
"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
//test function in console
// console.log(days[(new Date()).getMonth()] + "," + ' ' + monthNames[(new Date()).getMonth()] + " " + (new Date()).getDate());
//current date displayed at the top of page
var date = days[(new Date()).getMonth()] + "," + ' ' + monthNames[(new Date()).getMonth()] + " " + (new Date()).getDate();
$("#currentDay").text(date);
// WHEN I scroll down, THEN I am presented with time blocks for standard business hours
var currentHour = new Date();
console.log(currentHour.getHours());
function pastPresentFuture() {
hour = currentHour.getHours();
$(".time-block").each(function () {
var thisHour = parseInt($(this).attr("id"));
if (thisHour > hour) {
$(this).addClass("future")
}
else if (thisHour === hour) {
$(this).addClass("present");
}
else {
$(this).addClass("past");
}
})
}
pastPresentFuture();
// 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
//function that changes color to red when it is in the past & blue current & green future;
// WHEN I click into a time block
var saveBtn = $(".saveBtn");
saveBtn.on("click", function () {
var time = $(this).parent().attr("id");
var schedule = $(this).siblings(".schedule").val();
// THEN I can enter an event and the text is saved in local storage
localStorage.setItem(time, schedule);
});
// WHEN I refresh the page, THEN the saved events persist
function setPlanner() {
$(".time-block").each(function () {
var id = $(this).attr("id");
var schedule = localStorage.getItem(id);
if (schedule !== null) {
$(this).children(".schedule").val(schedule);
}
});
}
setPlanner();
// THEN the text for that event is saved in local storage
// WHEN I refresh the page
// THEN the saved events persist
//cancel page refresh