~mjorgensen/jrgnsn.net

ref: ddad15559f5336068111ba932a626d9bf4418634 jrgnsn.net/countdown.html -rw-r--r-- 2.4 KiB
ddad1555Matthew Jorgensen Updating version to bf07326 7 months 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
122
123
124
125
126
127
128
129
---
title: Countdown
permalink: /countdown/
enableMenu: false
---

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com ) -->
<html>

<head>
	<meta charset="UTF-8">
	<title>Countdown</title>
	<style>
		/** code by webdevtrick ( https://webdevtrick.com ) **/
		html {
			display: grid;
			min-height: 100%;
		}

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

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

		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;
		}

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

		.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">
		<h1>Matthew moves in</h1>

		<div id="countdown"></div>
	</div> 

	<script>
		/** code by webdevtrick ( https://webdevtrick.com ) **/
		const year = new Date().getFullYear();
		const choosenDate = new Date(year, 3, 30).getTime();

		let countdown = setInterval(function() {

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

			const diff = choosenDate - today;

			let days = Math.floor(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("countdown").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>