-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
57 lines (57 loc) · 2.53 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
<!DOCTYPE HTML>
<html>
<head>
<title>Countdown Timer</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<h1><strong>Countdown Timer</strong></h1>
<div>
<p id="currentTime">Current Time: </p>
</div> <br>
<div id="dateInput">
<form id="form" >
<input id="inputName" class="Rounded input" type="text" name="inputName" autofocus required placeholder="Enter the name for the event" size="30" onchange="hideEvent()"/> <br><br>
<label for="inputDate">Choose the event date:</label>
<input id="inputDate" type="date" name="inputDate" onchange="hideEvent()" required/>
<button type="submit" id="button">Start</button>
<br><br>
</form>
</div>
<div>
<form id="radioForm">
<p>Choose the display type of the clock: </p>
<input type="radio" id="simple" name="clockType" value="simple" checked />
<label for="simple">Simple clock</label><br>
<input type="radio" id="graphic" name="clockType" value="graphic" />
<label for="graphic">Graphic bars</label>
</form>
</div>
<div id="clockContainer"> <!-- simple display -->
<div class="displayDate">
<p id="nameEvent"><b>Event name</b></p>
<p>Event date:</p>
<p id="selectedDate" class="toDisplay"></p>
</div>
<div class="displayDate">
<p>Countdown to event:</p>
<p id="countdown" class="toDisplay"></p>
</div> <br>
</div>
<div id="graphicContainer" style="display:none"> <!-- graphic display -->
<div class="displayDate">
<p id="gNameEvent"><b>Event name</b></p>
<p id="gSelectedDate" class="toDisplay"></p>
</div>
<div class="displayDate">
<p>Countdown to event:</p>
<progress class="bars" id="daysBar" max="366"></progress><br><p class="progressP" id="progressDays">days</p><br>
<progress class="bars" id="hoursBar" max="24"></progress><br><p class="progressP" id="progressHours">hours</p><br>
<progress class="bars" id="minutesBar" max="60"></progress><br><p class="progressP" id="progressMinutes">minutes</p><br>
<progress class="bars" id="secondsBar" max="60"></progress><br><p class="progressP" id="progressSeconds">seconds</p>
<br>
</div> <br>
</div>
<script src="javascript.js"></script>
</body>
</html>