My Codepen
So after I hit the End Session button, I want there to be some text that shows up at the center of the page saying “Have a great day!” but its not showing up. I’ve used this same logic throughout this project, by making my buttons disappear. I would put the HTML as style = “display: none” and then display = “block” whenever I clicked a button. But for some reason its not working for this message
<div id ="message" style ="display: none">
<h1>Have a great day!</h1>
// Gets rid of the pausePlay class and displays the middlebuttons
const options = () => {
const $pausePlay = document.getElementsByClassName("pausePlay");
const $middleButtons = document.getElementsByClassName("middleButtons");
for (var i = 0; i < $pausePlay.length; i++) {
$pausePlay[i].style.display = "none";
}
for(var i = 0; i < $middleButtons.length; i++){
$middleButtons[i].style.display = "block";
}
const fiveMinButton = document.getElementById('fiveMin');
fiveMinButton.addEventListener('click', fiveMinBreak);
const restartButton = document.getElementById('redo');
redo.addEventListener('click', restartTimer);
const endSession = document.getElementById('endSess');
endSession.addEventListener('click', endSess);
}
// Pause button
const handleClickPauseButton = () => {
const $pauseButton = document.getElementById("pause");
clearInterval();
};
// Play button
const handleClickPlayButton = () => {
alert("Play button was clicked");
const $playButton = document.getElementById("play");
};
// Five minute break
const fiveMinBreak = () => {
countDown({
minutes: 5,
seconds: 01
});
}
//Restart button
const restartTimer = () => {
initApp();
}
//End session
const endSess = () => {
const $middleButtons = document.getElementsByClassName("middleButtons");
const $message = document.getElementById('message');
for(var i = 0; i < $middleButtons.length; i++){
$middleButtons[i].style.display = "none";
counter.style.display = "none";
$message.style.display = "block";
}
}
startTimer();