-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
152 lines (141 loc) · 7.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
151
152
<!doctype html>
<html lang="en" data-framework="javascript">
<head>
<meta charset="utf-8">
<title>Calendar App</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="stylesheet" href="css/calendar.css">
</head>
<body>
<br><br>
<div class="container">
<div class="row">
<div class="instructions">
<h1 class="text-center">Instructions</h1>
<p>
Make a calendar app. The calendar should display all the dates for the current month. The calendar app should also be able to mark appointments. The app must have the following functionality:
<ul>
<li>Any appointment can be made for the current day or for a future date.</li>
<li>No two appointments should overlap. If an appointment already exists for a day, a warning should be shown.</li>
<li>Appointments can be edited and deleted.</li>
</ul>
</p>
</div>
</div>
<br>
<div class="row">
<div class="calendar col-md-8 offset-md-2">
<div>
<div class="card-header bg-primary">
<ul>
<li id="month" class="text-white text-uppercase text-center">
</li>
<li id="year" class="text-white text-uppercase text-center">
</li>
</ul>
</div>
<table class="table calendar table-bordered table-responsive-sm" id="calendar">
<thead>
<tr class="weekdays bg-dark">
<th scope="col" class="text-white text-center">Mo</th>
<th scope="col" class="text-white text-center">Tu</th>
<th scope="col" class="text-white text-center">We</th>
<th scope="col" class="text-white text-center">Th</th>
<th scope="col" class="text-white text-center">Fr</th>
<th scope="col" class="text-white text-center">Sa</th>
<th scope="col" class="text-white text-center">Su</th>
</tr>
</thead>
<tbody class="days bg-light" id="days"></tbody>
<tfoot></tfoot>
</table>
</div>
</div>
</div>
<br><hr>
<div class="row">
<div class="col offset-md-1">
<form id="form_create_appointment">
<div class="form-row">
<div class="col form-group">
<label class="required">Date</label>
<input class="form-control date-input" type="text" id="date" data-trigger="hover" data-toggle="popover" title="Date" data-content="You can select any date from today clicking on the number in the calendar" required>
</div>
<div class="col form-group">
<label>Description</label>
<input class="form-control" type="text" id="description">
</div>
</div>
<div class="form-row">
<div class="col form-group">
<label class="required">Start Time</label>
<input class="form-control time-input" type="text" id="start_time" required>
</div>
<div class="col form-group">
<label class="required">End Time</label>
<input class="form-control time-input" type="text" id="end_time" required>
</div>
</div>
<div class="form-row">
<div class="col form-group">
<button type="button" class="btn btn-warning btn-block" id="clear" onclick="clear_input()">Clear Form</button>
</div>
<div class="col form-group">
<button type="button" class="btn btn-primary btn-block" id="submit" onclick="make_appointment()" disabled="disabled">Make Appointment</button>
</div>
</div>
</form>
</div>
<div class="col offset-md-1">
<div class="row">
<div class="col">
<h3>Appointments</h3>
</div>
<div class="col form-group">
<button type="button" class="btn btn-danger btn-block" id="btn_clear_storage" onclick="clear_storage()">Clear Appointments</button>
</div>
</div>
<table class="table table-bordered table-hover table-striped table-sm" id="appointment_list">
<thead class="thead-dark">
<tr>
<th scope="col" class="text-center align-middle">Date</th>
<th scope="col" class="text-center align-middle">Description</th>
<th scope="col" class="text-center align-middle">Start time</th>
<th scope="col" class="text-center align-middle">End time</th>
<th scope="col" class="text-center align-middle">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<br><br><br>
<blockquote class="blockquote text-center">
<p class="mb-0">Made with:
<a href="https://getbootstrap.com/">Bootstrap</a>,
Javascript,
<a href="https://jquery.com/">Jquery</a>,
<a href="https://robinherbots.github.io/Inputmask/">Inputmask</a>,
<a href="http://izitoast.marcelodolce.com/">iziToast</a> and
<a href="https://fontawesome.com/">Fontawesome</a>
</p>
<footer class="blockquote-footer">
Guilherme Felix da Silva Maciel
<a href="https://github.com/guifelix/vanhack_calendar_javascript">
<i class="fab fa-github"></i>
</a>
</footer>
<footer class="blockquote-footer">Please, if you're rendering inside hackerrank, try rendering on a new tab for optimize experience</footer>
</blockquote>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script>
<script src="js/calendar.js"></script>
</body>
</html>