commit c5b3151b8aa86dc527d2610e3d438a2f84f07691
Author: King-Mide-1 <81376427+King-Mide-1@users.noreply.github.com>
Date: Mon Jan 31 15:11:11 2022 +0100
Add files via upload
diff --git a/Index.html b/Index.html
new file mode 100644
index 0000000..dd69cbe
--- /dev/null
+++ b/Index.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+ Countdown Timer
+
+
+ countdown Timer
+
+
+
+
\ No newline at end of file
diff --git a/image.jpg b/image.jpg
new file mode 100644
index 0000000..026f288
Binary files /dev/null and b/image.jpg differ
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..f9b1a42
--- /dev/null
+++ b/script.js
@@ -0,0 +1,31 @@
+const daysEl =document.getElementById ('days');
+const hoursEl =document.getElementById ('hours');
+const minutesEl =document.getElementById ('minutes');
+const secondsEl =document.getElementById ('seconds');
+
+const newYears = '1 Jan 2023';
+
+function countdown() {
+ const newYearsDate = new Date(newYears);
+ const currentDate = new Date();
+
+
+ const totalSeconds = new Date(newYearsDate - currentDate) / 1000;
+
+ const days = Math.floor(totalSeconds / 3600 / 24);
+ const hours = Math.floor(totalSeconds / 3600) % 24;
+ const minutes = Math.floor(totalSeconds / 60) % 60;
+ const seconds =Math.floor(totalSeconds) % 60;
+
+ daysEl.innerHTML = days;
+ hoursEl.innerHTML = hours;
+ minutesEl.innerHTML = minutes;
+ secondsEl.innerHTML = seconds;
+}
+
+//Initial call
+countdown();
+
+setInterval(countdown, 1000);
+
+
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..a452105
--- /dev/null
+++ b/style.css
@@ -0,0 +1,48 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');
+*{
+ box-sizing: border-box;
+}
+body{
+ background-image: url(image.jpg);
+ background-size: cover;
+ background-position: center;
+ min-height: 100vh;
+ font-family: 'Poppins', sans-serif;
+ margin: 0;
+ padding: 0;
+ display: flex;
+
+ flex-direction: column;
+ align-items: center;
+ margin: 0;
+}
+
+h1{
+ font-size: 3rem;
+ margin-top: -10rem;
+ text-transform: uppercase;
+ font-weight: normal;
+ margin-top: 5rem;
+ font-family: 'Poppins', sans-serif;
+}
+.countdown-container{
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.big-text{
+ font-weight: bold;
+ font-size: 6rem;
+ line-height: 1;
+ margin: 0 2rem;
+ color: #fff;
+}
+.countdown-el {
+ text-align: center;
+ color: #fff;
+}
+.countdown-el span{
+ font-size: 1.5rem;
+}