-
Notifications
You must be signed in to change notification settings - Fork 0
/
talking-timer.html
120 lines (108 loc) · 3.8 KB
/
talking-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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="user-scalable=yes, initial-scale=1.0, width=device-width, height=device-height" />
<title>talking-timer Custom element</title>
<link rel="stylesheet" type="text/css" href="talking-timer.css" />
</head>
<body>
<h1><code style="font-size:1.35em; padding-right: 0.5rem;"><talking-timer></code> Custom element</h1>
<div class="timer-wrap">
<talking-timer time="03:00" id="egg" end-message="Your egg is cooked" saystart>
Simple Egg timer
<span class="sub">
(i.e. says:
"<em>Thirty seconds gone.</em>",
"<em>One minute gone.</em>",
"<em>Half way.</em>",
"<em>One minute to go</em>",
"<em>Thirty seconds to go</em>",
"<em>Fifteen seconds</em>",
"<em>Ten</em>",
"<em>Nine</em>",
"<em>Eight</em>",
"<em>Seven</em>",
"<em>Six</em>",
"<em>Five</em>",
"<em>Four</em>",
"<em>Three</em>",
"<em>Two</em>",
"<em>One</em>",
"<em>Time's up</em>")
</span>
</talking-timer>
<talking-timer time="02:00" id="nopause" nopause>Timer with <em>pause</em> functionality hidden<br /><span class="sub">(i.e. can't reset, restart or close timer while in progress)</span></talking-timer>
<talking-timer time="02:00" id="autoreset" autoreset>Timer that auto-resets itself after completion</talking-timer>
<talking-timer time="02:00" id="selfdestruct" selfdestruct="5">Timer that selfdestructs five seconds after completion</talking-timer>
<talking-timer time="02:00" id="saystart" saystart>
Timer warns before starting
<span class="sub">(i.e. says "<em>Ready. Set. Go!</em>" before starting)</span>
</talking-timer>
<talking-timer time="02:00" id="silent" say="" nosayend noendchime>Silent timer (Visual timer only)
<span class="sub">(i.e. does not make any announcements — You're better off just using <a href="https://www.google.com/search?q=2+minute+timer">Google</a>)</span>
</talking-timer>
<talking-timer time="05:00" id="eveylastminute" say="everyLast1m last30 last15 allLast10">
Every minute from the end
<span class="sub">
(i.e. says:
"<em>Four minutes to go</em>",
"<em>three minutes to go</em>",
"<em>Two minutes to go</em>",
"<em>One minute to go</em>",
"<em>Thirty seconds to go</em>",
"<em>Fifteen seconds</em>",
"<em>Ten</em>",
"<em>Nine</em>",
"<em>Eight</em>",
"<em>Seven</em>",
"<em>Six</em>",
"<em>Five</em>",
"<em>Four</em>",
"<em>Three</em>",
"<em>Two</em>",
"<em>One</em>",
"<em>Time's up</em>")
</span>
</talking-timer>
<talking-timer time="0:30" id="everyLast10s" saystart say="everyLast10s allLast10">
Every 10 seconds to go
<span class="sub">(i.e. says:
"<em>Twenty seconds to go</em>",
"<em>Ten</em>",
"<em>Nine</em>",
"<em>Eight</em>",
"<em>Seven</em>",
"<em>Six</em>",
"<em>Five</em>",
"<em>Four</em>",
"<em>Three</em>",
"<em>Two</em>",
"<em>One</em>",
"<em>Time's up</em>")
</span>
</talking-timer>
<talking-timer time="0:50" id="every3first10s" say="every3first10s allLast10">
Every 10 seconds from start plus count down last 10 seconds
<span class="sub">(i.e. says:
"<em>Ten seconds gone.</em>",
"<em>Twenty seconds gone.</em>",
"<em>Thirty seconds gone.</em>",
"<em>Ten</em>",
"<em>Nine</em>",
"<em>Eight</em>",
"<em>Seven</em>",
"<em>Six</em>",
"<em>Five</em>",
"<em>Four</em>",
"<em>Three</em>",
"<em>Two</em>",
"<em>One</em>",
"<em>Time's up</em>")
</span>
</talking-timer>
</div>
<script type="text/ecmascript" src="talking-timer.js"></script>
</body>
</html>