-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcountdown timer
More file actions
76 lines (74 loc) · 3.84 KB
/
countdown timer
File metadata and controls
76 lines (74 loc) · 3.84 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Sascha Jullmann">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure Javascript Counter</title>
<link rel="stylesheet" href="tachyons.min.css">
</head>
<body class="bg-dark-pink">
<article class="dt w-100 pa1 ph5-ns bg-dark-pink">
<div class="dtc i v-mid w-50">
<h2 id="counter_header" class="f7 f2-m f1-l fw6">Easy Countdown</h2>
</div>
<div class="dtc v-mid w-50 tr">
<a class="link dim black dib br-100 h2 w2 mr3 " href="https://github.com/saschajullmann/easy_countdown" title="Easy Countdown Github Repo">
<svg data-icon="github" viewBox="0 0 32 32" style="fill:currentcolor">
<title>github icon</title>
<path d="M0 18 C0 12 3 10 3 9 C2.5 7 2.5 4 3 3 C6 3 9 5 10 6 C12 5 14 5 16 5 C18 5 20 5 22 6 C23 5 26 3 29 3 C29.5 4 29.5 7 29 9 C29 10 32 12 32 18 C32 25 30 30 16 30 C2 30 0 25 0 18 M3 20 C3 24 4 28 16 28 C28 28 29 24 29 20 C29 16 28 14 16 14 C4 14 3 16 3 20 M8 21 A1.5 2.5 0 0 0 13 21 A1.5 2.5 0 0 0 8 21 M24 21 A1.5 2.5 0 0 0 19 21 A1.5 2.5 0 0 0 24 21 z"></path>
</svg>
</a>
<a class="link dim black dib h2 w2 br-100 mr3 " href="https://twitter.com/kidman01" title="Twitter Account">
<svg data-icon="twitter" viewBox="0 0 32 32" style="fill:currentcolor">
<title>twitter icon</title>
<path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"></path>
</svg>
</a>
</div>
</article>
<article class="vh-25 dt w-100 bg-dark-pink">
<div class="w-25 dtc v-mid tc black ph3 ph4-l">
<h2 class="f6 f3-m f2-l fw6">Days</h2>
<h1 id="days" class="f6 f2-m f-subheadline-l fw6 tc"><span>--</span></h1>
</div>
<div class="w-25 dtc v-mid tc black ph3 ph4-l">
<h2 class="f6 f3-m f2-l fw6">Hours</h2>
<h1 id="hours" class="f6 f2-m f-subheadline-l fw6 tc"><span>--</span></h1>
</div>
<div class="w-25 dtc v-mid tc black ph3 ph4-l">
<h2 class="f6 f3-m f2-l fw6">Minutes</h2>
<h1 id="minutes" class="f6 f2-m f-subheadline-l fw6 tc"><span>--</span></h1>
</div>
<div class="w-25 dtc v-mid tc black ph3 ph4-l">
<h2 class="f6 f3-m f2-l fw6">Seconds</h2>
<h1 id="seconds" class="f6 f2-m f-subheadline-l fw6 tc"><span>--</span></h1>
</div>
</article>
<article class="pt4 vh-50 dt w-100 bg-dark-pink">
<div class="mb3 v-mid">
<form name="myForm" class="mw7 center pa4 br2-ns ba-l b--black-90">
<fieldset class="bn ma0 pa0">
<legend id="current_date" class="pa0 f5 f4-ns mb3 black fw6">Enter your date</legend>
<div class="mt3 mb5">
<label class="db fw6 lh-copy f6" for="email-address">Counter-Name</label>
<input class="f6 f5-l input-reset bn fl black-80 bg-white pa3 lh-solid w-100 br2-ns" placeholder="Name" type="text" id="counter_name">
</div>
<div class="mt3 mb5">
<label class="db fw6 lh-copy f6" for="email-address">Date (Year-Month-Day)</label>
<input class="f6 f5-l input-reset bn fl black-80 bg-white pa3 lh-solid w-100 br2-ns" placeholder="Year-Month-Day" type="text" id="counter_date">
</div>
<div class="mt3 mb5">
<label class="db fw6 lh-copy f6" for="email-address">Time (Hour:Minute)</label>
<input class="f6 f5-l input-reset bn fl black-80 bg-white pa3 lh-solid w-100 br2-ns" placeholder="Hour:Minute" type="text" id="counter_time">
</div>
<div class="mt3">
<button class="f6 f5-l button-reset fl pv3 tc bn bg-animate bg-black-70 hover-bg-black white pointer w-100 br2-ns" id="btn">Start</button>
</div>
</fieldset>
</form>
</div>
</article>
<script src="script.js"></script>
</body>
</html>