Javascript clock with integrated countdown timer

Question

I need to code a JavaScript clock with a countdown timer that starts counting down for 5min when a specific time is reached. So I have my clock and its working and all but I have no idea where to go from here, I'm really really beginner when it comes to JavaScript and I'm still learning the ropes (a little slowly) Can you please give me some guidance on how to integrate my clock with my countdown timer(that I don't know how to code) so that when a certain time is reached, the countdown timer will start counting down for 5min.

Heres my code:

$(document).ready(function() {

  function displayTime() {
    var currentTime = new Date ();
    var hours = currentTime.getHours();
    var minutes = currentTime.getMinutes();
    var seconds = currentTime.getSeconds();

    if (minutes < 10) {
      minutes = "0" + minutes;
    }

    if (seconds < 10) {
      seconds = "0" + seconds;
    }

    var clockDiv = document.getElementById('clock')

    clockDiv.innerText = hours + ":" + minutes + ":" + seconds;


  }

  displayTime();
  setInterval(displayTime, 1000);

  function countDown() {
    var currentTime = new Date();
    var hours = currentTime.getHours();
    var minutes = currentTime.getMinutes();
    var seconds = currentTime.getSeconds();

    if (minutes < 10) {
      minutes = "0" + minutes;
    }

    if (seconds < 10) {
      seconds = "0" + seconds;
    }

  if 


  }

});

Answer 1

So the integration part can be done as a few simple If statements. Let's say you want the countdown to start at 9:00 AM

1) Create a boolean variable to see if we should be displaying current time or the countdown. This will come in really handy and save us from checking a RANGE. Note that we can not simply check for the current time since that will only display the countdown for a single second.

2) Add a simple if statement. Saying if it is time, switch to countdown by setting the variable to true (9:00:00) in this case

3) Add a second if statement to switch back to display current time when the countdown is over. This is optional you can delete it if you want the count down even when it is over. NOTE: For future use, it is much wiser to delegate this functionality over and instead of having a static countdown of 5 minutes. You should have a variable saying var totalcountdown= ... and say if( ... minutes = 0 + totalcountdown. However you DO NEED to have the wrap around logic here.

4) Add the final statement for displaying countdown or current time

5) Add the countdown code. For this part see the post below. I can not explain it any better than that.

The simplest possible JavaScript countdown timer?

**Important Note: ** This WILL NOT work right away when you copy and paste the code from the other post. You need to tweak afew things in the final if statement. I ll leave that as an exercise for you. If you need help just post a comment or open a new question

$(document).ready(function() {

   function displayTime() {
      var displayCountdownp = false;
      var currentTime = new Date ();
      var hours = currentTime.getHours();
      var minutes = currentTime.getMinutes();
      var seconds = currentTime.getSeconds();

      if (minutes < 10) {
         minutes = "0" + minutes;
      }

      if (seconds < 10) {
        seconds = "0" + seconds;
      }

      var clockDiv = document.getElementById('clock')

      if( hours==9 && minutes==0 && seconds==0){
          displayCountdownp = true;
      }

      if( hours==9 && minutes== 6 && seconds==0){
          displayCountdownp = false;
      }

      if(displayCountdownp){

        var displayValue = countDown();
        clockDiv.innerText = displayValue;

      }else{
        clockDiv.innerText = hours + ":" + minutes + ":" + seconds;
      }


     displayTime();
     setInterval(displayTime, 1000);

    function countDown() {
         //code goes here
    }
});