count-down

fazil rahman · fazil rahman · commit 1f7f5abc3b55 · 2022-05-09T01:02:33.000+05:30
diff --git a/app.js b/app.js
@@ -0,0 +1,34 @@
+const days=document.getElementById('days');
+const hours=document.getElementById('hours');
+const minutes=document.getElementById('minutes');
+const seconds=document.getElementById('seconds');
+
+
+
+const karmaDateTime=new Date('May 21 2022 00:00:00');
+
+
+function updateCountdowntime(){
+    const currentTime=new Date();
+    const diff=karmaDateTime -currentTime;
+    const d=Math.floor(diff/1000/60/60/24);
+    const h=Math.floor(diff/1000/60/60)%24;
+    const m=Math.floor(diff/1000/60)%60;
+    const s=Math.floor(diff/1000)%60;
+    if(currentTime===karmaDateTime){
+        clearInterval();
+        days.innerHTML=00;
+        hours.innerHTML=00;
+        minutes.innerHTML=00;
+        seconds.innerHTML=00;
+        
+    }
+    days.innerHTML=d;
+    hours.innerHTML=h<10 ? '0' +h:h;
+    minutes.innerHTML=m<10 ? '0' +m:m;
+    seconds.innerHTML=s<10 ? '0' +s:s;
+    
+}
+
+setInterval(updateCountdowntime,1000);
+updateCountdowntime();
diff --git a/index.html b/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title> CountDown</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="box">
+    <div class="countdown" id="countdown">
+        <div class="time">
+        <h2 id="days"></h2>
+        <small>Days</small>
+    </div>
+    <div class="time">
+        <h2 id="hours"></h2>
+        <small>Hours</small>
+    </div>
+    <div class="time">
+        <h2 id="minutes"></h2>
+        <small>Minutes</small>
+    </div>
+    <div class="time">
+        <h2 id="seconds"></h2>
+        <small>Seconds</small>
+    </div>
+    </div>
+</div>
+</body>
+<script src="/app.js"></script>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,40 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');
+ 
+*{
+    box-sizing: border-box;
+}
+body{
+    align-items: center;
+    justify-content: center;
+    font-family: "Poppins",sans-serif;
+    display: flex;
+    text-align: center;
+    margin:25em;
+    overflow: hidden;
+
+    width: auto;
+    border: 5px solid;
+    height: 20em;
+    border-radius:1em
+ 
+}
+
+
+.countdown{
+    display: flex;
+    transform:scale(2);
+}
+.time{
+    display:flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    margin: 15px;
+}
+.time h2{
+    font-weight: bold;
+    font-size: 36px;
+    line-height: 1;
+    margin: 0 0 5px;
+}
