~mjorgensen/jrgnsn.net

ref: e05f55ccbec061c7dfd400fb41330d5221506aea jrgnsn.net/countup.html -rw-r--r-- 2.1 KiB
e05f55ccMatthew Jorgensen Updating version to e5134a9 a month ago
                                                                                
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
---
title: Countup
permalink: /countup/
enableMenu: false
---

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Countup</title>
	<style>
		html {
			display: grid;
			min-height: 100%;
		}

		body {
			display: grid;
			background: #333;
		}

		.main {
			position: relative;
			margin: auto;
			overflow: hidden;
			width: 850px;
		}

		h1 {
			font-family: "Montserrat", sans-serif;
			text-align: center;
			margin-top: 2em;
			font-size: 2em;
			text-transform: uppercase;
			letter-spacing: 3px;
			color: #F6F4F3;
		}
		h1 sup {
			text-transform: lowercase;
			color: #FF3E41;
		}

		#countup {
			color: #F6F4F3;
			text-align: center;
			text-transform: uppercase;
			font-family: "Lato", sans-serif;
			font-size: 1em;
			letter-spacing: 5px;
		}

		.days, .hours, .minutes, .seconds, .left {
			display: inline-block;
			padding: 20px;
			width: 120px;
			border-radius: 10px;
		}

		.days {
			background: #D87200;
		}

		.hours {
			background:  #FF3E41;
		}

		.minutes {
			background: #FFB20C;
		}

		.seconds {
			background:  #2186FF;
		}

		.left {
			background: #E10A0A;
		}
		.c-number {
			font-family: "Montserrat", sans-serif;
			color: #333;
			font-size: 5em;
		}
	</style>
</head>
<body>
	<div class="main">
		<div id="countup"></div>
	</div> 

	<script>
		const choosenDate = new Date(2021, 2, 17).getTime();

		let countup = setInterval(function() {

			const today = new Date().getTime();

			const diff = today - choosenDate;

			let days = Math.ceil(diff / (1000 * 60 * 60 * 24));
			let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
			let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
			let seconds = Math.floor((diff % (1000 * 60)) / 1000);

			document.getElementById("countup").innerHTML =
			"<div class=\"days\"> \
			<div class=\"c-number\">" + days + "</div>days</div> \
			<div class=\"hours\"> \
			<div class=\"c-number\">" + hours + "</div>hours</div> \
			<div class=\"minutes\"> \
			<div class=\"c-number\">" + minutes + "</div>minutes</div> \
			<div class=\"seconds\"> \
			<div class=\"c-number\">" + seconds + "</div>seconds</div> \
			</div>";

		}, 1000);
	</script>

</body>
</html>