I am very new to coding, so please excuse my ignorance. I'm trying to get a countdown that displays the message "AND THE VOTES ARE IN!" when the timer reaches zero. I then want the link https://www.youtube.com/watch?v=26WpGvLpFzw to be displayed 5 seconds after the countdown is over (the message "AND THE VOTES ARE IN!" will be displayed for 5 seconds, then the link will be shown). I currently have the code for the countdown, but not for the messages to be displayed after the countdown is over. My code so far is:
<p> Voting period: <span id="countdowntimer">10 </span> Seconds</p>
<script type="text/javascript">
var timeleft = 10;
var downloadTimer = setInterval(function(){
timeleft--;
document.getElementById("countdowntimer").textContent = timeleft;
if(timeleft <= 0)
clearInterval(downloadTimer);
},1000);
</script>
You can use setTimeout, its somewhat similar to setInterval but delays and runs the code inside after a set amount of milliseconds.
<p id="foo"> Voting period: <span id="countdowntimer">10 </span> Seconds</p>
<script type="text/javascript">
var timeleft = 10;
//added this next 4 lines for the link
var a = document.createElement('a');
var link = document.createTextNode("https://www.youtube.com/watch?v=26WpGvLpFzw");
a.appendChild(link);
a.href = "https://www.youtube.com/watch?v=26WpGvLpFzw";
var downloadTimer = setInterval(function() {
timeleft--;
document.getElementById("countdowntimer").textContent = timeleft;
if (timeleft <= 0) {
clearInterval(downloadTimer);
document.getElementById("foo").innerHTML = "AND THE VOTES ARE IN!";
//added this part for the delay
setTimeout(function() {
document.getElementById("foo").innerHTML = "";
document.getElementById("foo").appendChild(a);
}, 5000);
}
}, 1000);
</script>