-
Notifications
You must be signed in to change notification settings - Fork 0
/
4f8me.html
134 lines (113 loc) · 3.99 KB
/
4f8me.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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html>
<head>
<title>Eerste gerecht</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
h1 {
font-weight: normal;
}
li {
display: inline-block;
font-size: 1.5em;
list-style-type: none;
padding: 1em;
text-transform: uppercase;
}
li span {
display: block;
font-size: 4.5rem;
}
/* general styling */
html, body {
height: 100%;
margin: 0;
}
body {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #3ed0ae;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
"Helvetica Neue",
sans-serif;
}
.container {
color: #333;
margin: 0 auto;
padding: 0.5rem;
text-align: center;
}
#course{
max-width: 600px;
}
#course img{
border-radius: 80px;
margin-bottom: 40px;
}
#course h1{
margin-bottom: 30px;
}
#course p{
margin-bottom: 10px;
line-height: 25px;
}
</style>
</head>
<body>
<div id="timer" class="container">
<h1>Countdown tot het eerste gerecht:</h1>
<ul>
<li><span id="days"></span>Dagen</li>
<li><span id="hours"></span>Uur</li>
<li><span id="minutes"></span>Minuten</li>
<li><span id="seconds"></span>Seconde</li>
</ul>
</div>
<div id="course" class="container">
<img src="https://media1.giphy.com/media/fW5qirp4Nm9bC2qAHy/giphy.gif?cid=ecf05e47254ba43d9940db261b47080038b97dd2a118c261&rid=giphy.gif" alt="">
<h1>Gevulde mini-paprika</h1>
<p>Als je kookt voor Henk Derks is het toch een uitdaging om iets origineels op tafel te zetten. Hij brengt zó veel tijd in de keuken door, dat vrijwel ieder gerecht zijn handen (& maag) al heeft gepasseerd. Als kleinste van de drie, wilde ik ook het kleinste gerechtje maken. Dan hebben we nog vegetarisch, zwanger én lactose vrij. Maar van restricties wordt men creatief! Gewoon lekkere producten bij elkaar zoeken, dan komt het vanzelf goed. Ik heb geen recept gebruikt en geen tijd genomen om het te proef bakken. Ik heb wel plaatjes bekeken en in gedachte voorgeproefd. Dat smaakte goed! Durf jij het aan om de 3d-versie te proeven? En als het niet lekker is, is het gelukkig maar het kleinste gerechtje!</p>
<p><i>Liefs, Anke</i></p>
</div>
</body>
<script>
var dateString = 'Jul 19, 2020 16:30:00';
if(!!window.location.search || new Date() > new Date(dateString)){
document.querySelector('#timer').style.display = 'none';
}else{
document.querySelector('#course').style.display = 'none';
}
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
let countDown = new Date(dateString).getTime(),
x = setInterval(function() {
let now = new Date().getTime(),
distance = countDown - now;
document.getElementById('days').innerText = Math.floor(distance / (day)),
document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour)),
document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute)),
document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);
//do something later when date is reached
//if (distance < 0) {
// clearInterval(x);
// 'IT'S MY BIRTHDAY!;
//}
}, second)
</script>
</html>