Hello everyone!! hope you all fine and healthy. Today is my elder brother's birthday so I have build a simple but lovely countdown timer for his birthday using html, css and of course javascript. The above picture is the countdown timer, I think being a programmer or learning programming is the best decision of my life as it gives you power to create your imagination into reality.

I used basic html, css and javascript to build this countdown timer, there is nothing to explain about the html and css part as I have used the basic stuffs such as flex-box to style the webpage. I will breakdown the javascript part for you all, may be it might help someone reading this.

javascript concepts used in this project

1.functions 2.eventlistener 3.setInterval function 4.Document Object Model 5.audio object to play the audio with the click of the button 6.new date object - most important one, as on the basis of this function only we will get the current date

PROBLEMS FACED WHILE BUILDING THIS COUNTDOWN TIMER -

1.logic behind the countdown - new Date().get function returns time in milliseconds so it is our responsibility to change it according to our needs such as days, hours, minutes, and seconds. 2.Adding audio files - nowadays browsers do not load audio files automatically, it can only load it in the presence of some human interactions such as button click, scroll etc. So honestly I would like to share that I was unable to play the music automatically at the page load, instead I created a button which appears when the timer stops that is when 12:00 of the birthday strikes and if you click the button than the birthday song starts. This is the most confusing part for me and I am still looking for the solutions.

MAIN LOGIC ABOUT THE PROGRAM(javascript) -

first of all store the current time and target time using the new Date().getTime() function. Now store the gap between the current time and the target time using simple substraction. Remember that getTime() function returns time in milliseconds, so we have to change it according to our needs and store it creating various variables such as days, hours, minutes, and seconds. After that display the time using document object model. All this stuffs should be written inside a function and this function should be called every seconds using setInterval function and write a condition when the days==0 and hours==0 and minutes==0 and seconds==0 , stop the setInterval function using clearInterval() and display whatever you want to show. That's it, congratulations you have successfully created a countdown timer!!

code example -

function updateCounter(){


  const targetTime = new Date('january 21,2023 00:00:00').getTime();

const currentTime = new Date().getTime();

const seconds = 1000;
const minutes = seconds * 60;
const hours = minutes * 60;
const days = hours * 24;


  const gap = targetTime - currentTime;
let day = document.getElementById("days");
let hour = document.getElementById("hours");
let minute = document.getElementById("minutes");
let second = document.getElementById("seconds");
const first = document.getElementById("first");


const displayDays = Math.floor(gap/days);
const displayHours = Math.floor((gap%days) / hours);
const displayMinutes = Math.floor((gap%hours)/minutes);
const displaySeconds = Math.floor((gap%minutes)/seconds);

if(displayDays<10){
  day.innerHTML = '0'+displayDays;
}
else{
  day.innerHTML = displayDays;
}

if(displayHours<10){
  hour.innerHTML = '0'+displayHours;
}
else{
  hour.innerHTML = displayHours;
}
if(displayMinutes<10){
  minute.innerHTML = '0'+displayMinutes;
}
else{
  minute.innerHTML = displayMinutes;
}
if(displaySeconds<10){
  second.innerHTML = '0'+displaySeconds;
}
else{
  second.innerHTML = displaySeconds;
}
  second.style.color = "#e525fa";

  if(displayDays<=0&&displayHours<=0&&displayMinutes<=0&&displaySeconds<=0){

    main.style.display='none';
    textMessage.style.display="block";
    heading.innerHTML = "HAPPY 26th BIRTHDAY DA!!";
    heading.style.color = '#f7cd23';


  }

}

strMusic.addEventListener("click",function(){
  if(strMusic.innerHTML=="PLAY"){
    strMusic.innerHTML = "STOP";
    music.play();
  }
  else{
    strMusic.innerHTML = "PLAY";
    music.pause();
  }
})
updateCounter();
const countDown = setInterval(updateCounter,1000);

I hope you all gain something from this blog. Don't forget to check the timer here elegant-northcutt-d3e715.netlify.app