-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
118 lines (107 loc) · 4.98 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
<!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://cdn.jsdelivr.net/npm/[email protected]/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
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="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 scheduling your 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.
-->
<!-- Example of a past time block. The "past" class adds a gray background color. -->
<div id="hour-09" class="row time-block ">
<div class="col-2 col-md-1 hour text-center py-3">9AM</div>
<textarea 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 ">
<div class="col-2 col-md-1 hour text-center py-3">10AM</div>
<textarea 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">
<div class="col-2 col-md-1 hour text-center py-3">11AM</div>
<textarea 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 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">01PM</div>
<textarea 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">02PM</div>
<textarea 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">03PM</div>
<textarea 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">04PM</div>
<textarea 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/[email protected]/dayjs.min.js"
integrity="sha256-iu/zLUB+QgISXBLCW/mcDi/rnf4m4uEDO0wauy76x7U="
crossorigin="anonymous"
></script>
<script src="script.js"></script>
</body>
</html>