diff --git a/CountDown App/Images/bg1.jpg b/CountDown App/Images/bg1.jpg new file mode 100644 index 0000000..d8466af Binary files /dev/null and b/CountDown App/Images/bg1.jpg differ diff --git a/CountDown App/index.html b/CountDown App/index.html new file mode 100644 index 0000000..344189b --- /dev/null +++ b/CountDown App/index.html @@ -0,0 +1,35 @@ + + + + + + Document + + + + +

New Years Eve

+
+ +
+

0

+ Days +
+
+

0

+ Hours +
+
+

0

+ Minutes +
+
+

0

+ Seconds +
+ + +
+ + + diff --git a/CountDown App/script.js b/CountDown App/script.js new file mode 100644 index 0000000..ec303b5 --- /dev/null +++ b/CountDown App/script.js @@ -0,0 +1,36 @@ +let daysEl = document.getElementById('days'); +let hourEl = document.getElementById('hours'); +let minEl = document.getElementById('mins'); +let secEl = document.getElementById('sec'); + + +function countdown(){ + +var currentTime= new Date().getTime(); // Curent Time +const newYear = new Date("dec 31, 2022 23:59:59").getTime(); // destination time + +var difference = newYear - currentTime; +// you have got the answere but in milliseconds + +var seconds,hours,days,minutes; +seconds = Math.floor((difference%(1000*60)/1000)); +minutes = Math.floor(difference%(1000*60*60)/(1000*60)); +hours = Math.floor((difference%(1000*60*60*24))/(1000*60*60)); +days = Math.floor(difference/(1000*60*60*24)); + +daysEl.innerHTML = days; + hourEl.innerHTML =Timeformat(hours); +minEl.innerHTML = Timeformat(minutes); +secEl.innerHTML = Timeformat(seconds); + +}; + +function Timeformat (time) { + if(time < 10) + return (`0${time}`); + else + return time; +} + +setInterval(countdown,1000) //Updtaes the function every 1 sec +// 1000ms = 1 sec diff --git a/CountDown App/style.css b/CountDown App/style.css new file mode 100644 index 0000000..2c5a7cb --- /dev/null +++ b/CountDown App/style.css @@ -0,0 +1,48 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;1,200&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@1,500&display=swap'); + + + + +*{ + box-sizing: border-box; +} + +body{ + margin: 0px; + background: url('Images/bg1.jpg') no-repeat; + background-size: cover; + /* background-position: center center; */ + min-height: 100vh; + font-family: 'Poppins', sans-serif; + display: flex; + flex-direction: column; + align-items: center; + +} +h1{ + + font-size: 4.2rem; + font-weight: 400; + margin-top: 5rem; +} + +.whole-elem{ + text-align: center; +} + +.con{ + display: flex; + /* border: 5px solid #ffffff9c; + padding: 15px 70px ; */ +} + +.big-text{ + text-align: center; + font-size: 6rem; + margin: 0px 60px; +} + +.whole-elem span{ + font-size: 1.7rem; +} \ No newline at end of file