This repository has been archived by the owner on Dec 19, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcount_down_timer.html
71 lines (71 loc) · 2.67 KB
/
count_down_timer.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
<!--
/**
* file: count_down_timer.html
* type: Hyper-Text-Markup-Language
* author: Karlina Ray Beringer
* date: 14_AUGUST_2022
* license: PUBLIC_DOMAIN
*/
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>COUNT_DOWN_TIMER</title>
<link rel="stylesheet" href="karbytes_aesthetic.css">
<script src="count_down_timer.js"></script>
<style>
/**
* Make div borders 1 pixel thick and CYAN.
* Give div content 10 pixels of padding on each one of a div element's four sides.
* Give div elements 10 pixels of padding on the bottom side of a div element.
*/
div {
border-color: #00ffff;
border-width: 2px;
border-style: solid;
padding: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body onload="initialize_application()">
<!-- Display instructions for how to use the application. -->
<div>
<h1>COUNT_DOWN_TIMER</h1>
<p><em>“Time is what makes the observation of change possible.”</em></p>
<p><em>“Time is what prevents all phenomena from being perceived as occurring simultaneously.”</em></p>
<p>Instantiate a time interval which is N seconds in length.</p>
</div>
<!-- Display an expandable select menu of timer interval lengths. -->
<div>
<p>STEP_0: Select a natural number of seconds, N, from the menu.</p>
<p>N =
<select id="nonnegative_integer_interval_selector">
<option value="30" selected>30 seconds</option>
<option value="60">60 seconds (i.e. 1 minute)</option>
<option value="120">120 seconds (i.e. 2 minutes)</option>
<option value="240">240 seconds (i.e. 4 minutes)</option>
<option value="480">480 seconds (i.e. 8 minutes)</option>
<option value="960">960 seconds (i.e. 16 minutes)</option>
</select>
</p>
<p>(Click the menu to view hidden options).</p>
</div>
<!-- Display a button which starts the timer session of N seconds. -->
<div>
<p>STEP_1: Click the button to start counting down from N to 0 seconds.</p>
<p>
<input id="timer_start_button" type="button" value="start()" onclick="start()">
</p>
</div>
<!-- Display the integer number of seconds remaining for the "in progress" timer session. -->
<div class="console" id="seconds_elapsed_display">
<p>???</p>
</div>
<!-- Display time-stamped messages which record specific occurrences of program events. -->
<div class="console" id="program_status_messages_display">
<p>???</p>
</div>
</body>
</html>