-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (116 loc) · 5.64 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
<!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://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<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/css2?family=Fira+Sans:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./assets/styles.css" />
<title>Work Day Planner</title>
</head>
<body>
<header class="p-5 mb-4 border-5 border-bottom border-dark text-center">
<h1 class="display-3">Work Day Planner</h1>
<p class="lead">A simple calendar app for planning your work day</p>
<p id="currentDay" class="lead"></p>
<p>Current Date & Time:</p>
<p>Date: <span id="date"></span> | Time: <span id="time"></span></p>
</header>
<div class="container-fluid 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-9" class="row time-block ">
<div class="col-2 col-md-1 hour text-center py-3">9:00AM</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 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">10:00AM</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">11:00AM</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">12:00PM</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">1:00PM</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">2:00PM</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">3:00PM</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">4:00PM</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-17" class="row time-block">
<div class="col-2 col-md-1 hour text-center py-3">5:00PM</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://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.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>
<script src="./assets/script.js"></script>
</body>
</html>