EclipseProject/count.html at master · PhilN199/EclipseProject · GitHub

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" href="styles.css">
		<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

		<title>Fake Love</title>

		<style type="text/css">
		body {
			background: black;
			background-color: black;
		}

		.countdownContainer{
			position: absolute;;
			top: 50%;
			left: 50%;
			transform : translateX(-50%) translateY(-50%);
			text-align: center;
			background: black;
			border: 1px solid #999;
			padding: 5px;
			box-shadow: 0 0 5px 3px #ccc;
		}

		.info {
			font-size: 100px;
		}
		</style>
	</head>
	<body>


<nav role="navigation">
	<div id="menuToggle">

		<input type="checkbox" />


		<span></span>
		<span></span>
		<span></span>


		<ul id="menu">
			<a href="index.html">
				<li>Home</li>
			</a>
			<a href="info.html">
				<li>About Elipse</li>
			</a>
			<a href="index2.html" target="index2.html">
				<li>When is the next eclipse?</li>
			</a>
			<a href="map.html" target="map.html">
				<li>Map</li>
			</a>
			<a href="count.html" target="count.html">
				<li>Countdown</li>
			</a>
		</ul>
	</div>
</nav>


		<table class="countdownContainer" style="width:60%">
			<tr class="info">
				<td colspan="4">Next Eclipse In</td>
			</tr>
			<tr class="info">
				<td id="days">120</td>
				<td id="hours">4</td>
				<td id="minutes">12</td>
				<td id="seconds">22</td>
			</tr>
			<tr>
				<td>Days</td>
				<td>Hours</td>
				<td>Minutes</td>
				<td>Seconds</td>
			</tr>
		</table>
		<script type="text/javascript">

			function countdown(){
				var now = new Date();
				var eventDate = new Date(2019, 11, 11);

				var currentTiime = now.getTime();
				var eventTime = eventDate.getTime();

				var remTime = eventTime - currentTiime;

				var s = Math.floor(remTime / 1000);
				var m = Math.floor(s / 60);
				var h = Math.floor(m / 60);
				var d = Math.floor(h / 24);

				h %= 24;
				m %= 60;
				s %= 60;

				h = (h < 10) ? "0" + h : h;
				m = (m < 10) ? "0" + m : m;
				s = (s < 10) ? "0" + s : s;

				document.getElementById("days").textContent = d;
				document.getElementById("days").innerText = d;

				document.getElementById("hours").textContent = h;
				document.getElementById("minutes").textContent = m;
				document.getElementById("seconds").textContent = s;

				setTimeout(countdown, 1000);
			}

			countdown();
		</script>
	</body>
</html>