-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathypwmj.html
135 lines (114 loc) · 4 KB
/
ypwmj.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
135
<!DOCTYPE html>
<html>
<head>
<title>Tweede 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: #b94fe0;
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 tweede 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://hips.hearstapps.com/digitalspyuk.cdnds.net/16/13/1459529985-friends-mm-noodle-soup.gif?resize=768:*" width="450" alt="">
<h1>“alles loopt in de”-soep</h1>
<p>Soms heb je van die dagen. Verslapen, dus snel je koffers pakken want je gaat een weekje weg met de familie. Ohja, ik moest ook nog een gerechtje maken. Ik ga lekker soep maken. Dat is altijd goed, en lekker warm! Ideaal gerecht voor Mariken. Maar er zijn geen tomaten in huis. Je hebt nog wat room voor een lekkere aspergesoep, maarja mijn schoonbroer ineens lactose intolerant. Dan maar naar de supermarkt…. Arggg… portemonnee vergeten. Nou dan is er maar één oplossing. Ik maak “alles loopt in de soep”-soep.
Dit is natuurlijk een grapje! Ik maak voor jullie een heerlijke ambachtelijke verrassingssoep. Kunnen jullie proeven wat het is? Het ziet er in ieder geval heerlijk uit! Eet smakelijk!</p>
<p><i>Liefs, Mariken</i></p>
</div>
</body>
<script>
var dateString = 'Jul 19, 2020 17:15: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>