<aside> 💡 When the user clicks, start the countdown from 10 to 0 for the 1st pose picture

</aside>

Notes

setInterval() can be a bit funky in the global window object. So I've used 3 separate functions for each of the

Code

1. The DOM element wherein the countdown will be displayed

<h1 id='timerText'class="text-center my-5"></h1>

1. Global variable assigned to the number 10 for the 1st countdown

let count1 = 10;

function countdown1() {
document.getElementById('snap').disabled = true
var timer1 = setInterval(function() {
if (count1 < 0) {
clearInterval(timer1);
document.getElementById('timerText').innerHTML = 'Next Pose';
func()
} else {
document.getElementById('timerText').innerHTML = count1
console.log(count1);
count1--
}
}, 1000)
}

3. countdown1()

• Function countdown1() references the function for the first countdown from 10 to 0 for the first pose picture
• This function is called when we click on the start button here
• First we disable the start <button> because we don't want the countdown to be interrupted once started
  • Use a function assignment syntax to assign the setInterval() method to variable timer1 this is because we will use the clearInterval() method and pass in timer1 which references the setInterval() function as an argument
  • SetInterval():
  1. This method will execute some code at a specified interval. In our case we want to count down from 10 to 0 every second
  2. Syntax: variable = setInterval(function, milliseconds);
  3. The if conditional checks if variable count1 is less than 0. If true, then use the clearInterval() method that takes timer1 as an argument, which references the setInterval() function. We also want to let the user that the countdown is over so we add the string "Next Pose" to the innerHTML property of the DOM element with id of 'timerText'. And lastly since the countdown is over we called function picture1() which will click a picture of the current pose.
  4. If the if conditional evaluates to false i.e. count1 > 0 then insert the value of countdown1 into the DOM and then decrease the value of count1 by -1
  • Do all the above at an interval of 1 second till count1 is = 0. Then clear the interval