├── README.md
├── app.js
├── index.html
└── styles.css
/README.md:
--------------------------------------------------------------------------------
1 | # birthday-countdown
2 | A Birtday countdown in JavaScript
3 |
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | const timeLeft = document.getElementById('time-left')
2 |
3 | //month day year
4 | const birthday = new Date('05/06/2021')
5 |
6 | const second = 1000
7 | const minute = second * 60
8 | const hour = minute * 60
9 | const day = hour * 24
10 | let timerId
11 |
12 | function countDown() {
13 | const today = new Date()
14 | const timeSpan = birthday - today
15 | //milliseconds
16 | console.log(timeSpan)
17 |
18 | if (timeSpan <= -day) {
19 | timeLeft.innerHTML = 'Hope you had a nice Birthday!!'
20 | clearInterval(timerId)
21 | return
22 | }
23 |
24 | if (timeSpan <= 0) {
25 | timeLeft.innerHTML = 'Happy Birthday!!'
26 | clearInterval(timerId)
27 | return
28 | }
29 |
30 |
31 | const days = Math.floor(timeSpan / day)
32 | const hours = Math.floor((timeSpan % day) / hour)
33 | const minutes = Math.floor((timeSpan % hour) / minute)
34 | const seconds = Math.floor((timeSpan % minute) / second)
35 |
36 | timeLeft.innerHTML =
37 | days + 'days ' + hours + 'hrs ' + minutes + 'mins ' + seconds + 'secs'
38 | }
39 |
40 | timerId = setInterval(countDown, second)
41 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Birthday Countdown
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: coral;
3 | color: white;
4 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
5 | }
--------------------------------------------------------------------------------