-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
150 lines (135 loc) · 6.49 KB
/
index.html
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!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
href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/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 rel="stylesheet" href="./assets/css/style.css" />
<title>Work Day Scheduler</title>
</head>
<body>
<header class="p-5 mb-4 border-5 border-bottom border-dark text-center">
<h1 class="display-3">Work Day Scheduler</h1>
<p class="lead">A simple calendar app for the work day</p>
<p id="currentDay" class="lead"></p>
</header>
<div class="container-lg 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.
-->
<div id="alert" class="alert alert-success alert-dismissible fade show d-none" role="alert">
<strong>Success!</strong> Event saved to local storage.
<button type="button" class="btn-close" aria-label="Close"></button>
</div>
<!-- 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 id="block-9" 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 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 id="block-10" 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 id="block-11" 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">
<div class="col-2 col-md-1 hour text-center py-3">12PM</div>
<textarea id="block-12" 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">
<div class="col-2 col-md-1 hour text-center py-3">1PM</div>
<textarea id="block-13" 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">
<div class="col-2 col-md-1 hour text-center py-3">2PM</div>
<textarea id="block-14" 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">
<div class="col-2 col-md-1 hour text-center py-3">3PM</div>
<textarea id="block-15" 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">
<div class="col-2 col-md-1 hour text-center py-3">4PM</div>
<textarea id="block-16" 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">
<div class="col-2 col-md-1 hour text-center py-3">5PM</div>
<textarea id="block-17" 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>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/dayjs@1.11.3/dayjs.min.js"
integrity="sha256-iu/zLUB+QgISXBLCW/mcDi/rnf4m4uEDO0wauy76x7U="
crossorigin="anonymous"
></script>
<!-- Bootstrap -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous">
</script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous">
</script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous">
</script>
<!-- <script src="./assets/js/script.js"></script> -->
<script src="./assets/js/dayscript.js"></script>
</body>
</html>