Fixed calculation of hours/minutes display
[countdown-timer] / index.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Countdown Timer</title>
6 <link href="timer.css" rel="stylesheet" type="text/css" />
7 <script type="application/javascript" src="jquery-1.9.1.min.js"></script>
8 <script type="application/javascript" src="timer.js"></script>
9 </head>
10
11 <body>
12
13 <div id="content">
14
15 <div id="alarm">
16 <div id="alarm-text">Time is up!</div>
17 <audio>
18 <source src="alarm.wav" />
19 </audio>
20 <button id="alarm-stop" class="action">Stop</button>
21 </div>
22
23 <div id="display">
24 <span>0</span>
25 <span>0</span>
26 <span>:</span>
27 <span>0</span>
28 <span>0</span>
29 <span>:</span>
30 <span>0</span>
31 <span>0</span>
32 </div>
33
34 <div id="configure-controls"><form action="">
35 <div id="number-buttons">
36 <button>1</button>
37 <button>2</button>
38 <button>3</button>
39 <br />
40 <button>4</button>
41 <button>5</button>
42 <button>6</button>
43 <br />
44 <button>7</button>
45 <button>8</button>
46 <button>9</button>
47 <br />
48 <button>0</button>
49 </div>
50
51 <div id="controls">
52 <button id="configure-set" class="action">Set</button>
53 <button id="configure-reset">Reset</button>
54 </div>
55 </div>
56
57 <div id="countdown-controls"><form action="">
58 <button id="countdown-start" class="action">Start</button>
59 <button id="countdown-pause" class="action">Pause</button>
60 <button id="countdown-reset">Stop</button>
61 <button id="countdown-reconfigure">Back</button>
62 </form></div>
63
64 </div>
65
66 </body>
67 </html>
68