I am currently a novice working on developing a pomodoro timer. At the moment, when you click the button to start the timer, it switches to displaying the remaining time once activated.
One of the features I want to implement is the ability for users to hover over the displayed time to hide it and show the word "Pause" instead, all without disrupting the running timer in the background.
https://i.sstatic.net/6kZvz.jpg
My understanding is that I will need to achieve this using JavaScript (possibly jquery .hover()). However, my challenge lies in making this interaction only possible while the timer is active, as it constantly updates every second. I have tried defining the hover functions within the setInterval callback function, but this resulted in unexpected outcomes that were not intended.
Another approach I thought of was to show a hidden div with absolute positioning above the timer whenever the user hovers over it. But I am unsure of how to execute this idea.
If someone could assist me in bringing this concept to life, I would greatly appreciate it.
code pen: http://codepen.io/meek/pen/zradga
function activateTimer() {
if(inProgress === false) {
inProgress = true;
updateTimer(session);
interval = setInterval(function() {
if(session > 0) {
focusSession();
session -= 1;
updateTimer(session);
}
else {
if(breakTime > 1) {
focusBreak();
breakTime -= 1;
updateTimer(breakTime);
}
else if (breakTime == 1){
breakTime -= 1;
updateTimer(breakTime);
session = sessionLength * 60;
breakTime = breakLength * 60;
}
}
}, 1000);
$('#timer').removeClass('hovergreen');
$('#timer').addClass('hoverred');
}
else {
inProgress = false;
clearInterval(interval);
$('#timer').removeClass('hoverred');
$('#timer').addClass('hovergreen');
}
}
This function contains most of the key functionalities of the timer and requires some tweaking to add the desired hover effect.