Pomodoro Timer Code

<!doctype html>
<head>
<script>
/*==========================================================================================
First we declare all our variables. We use timerOn to prevent clicking the start button from
 advancing the timer an extra time every second.
==========================================================================================*/

var secondsOnes = 0;
var secondsTens = 0;
var minutesOnes = 0;
var minutesTens = 0;
var timerOn = false;
var timerJustStarted = true;



    
    
/*==========================================================================================
The first two functions set the timer variables to the correct time (either 25 minutes or 5 
minutes), display that time intially, and then call the function that counts that time down
==========================================================================================*/
function countDown25()
    {
    if (timerOn === false) 
        {
        window.setInterval(subtractOne, 1000);
        }
    minutesTens = 2;
    minutesOnes = 5;
    secondsTens = 0;
    secondsOnes = 0;
    document.getElementById('seconds-ones').innerHTML=secondsOnes;
    document.getElementById('seconds-tens').innerHTML=secondsTens;
    document.getElementById('minutes-ones').innerHTML=minutesOnes;
    document.getElementById('minutes-tens').innerHTML=minutesTens;
        
        
    timerOn = true;
    }
    
function countDown5()
    {
    if (timerOn === false)
        {
        window.setInterval(subtractOne, 1000);
        }
    minutesTens = 0;
    minutesOnes = 5;
    secondsTens = 0;
    secondsOnes = 0;
    document.getElementById('seconds-ones').innerHTML=secondsOnes;
    document.getElementById('seconds-tens').innerHTML=secondsTens;
    document.getElementById('minutes-ones').innerHTML=minutesOnes;
    document.getElementById('minutes-tens').innerHTML=minutesTens;

        
    timerOn = true;
    }


/*==========================================================================================
This function subtracts one second from the current count and displays the current time
 remaining. If we wanted to display the timer in number of seconds, this is all we would need. 
But we want to convert from seconds to minutes, so we need the secondsToMinutes function, which 
this also calls.
==========================================================================================*/
function subtractOne()
    {
    //This displays an alert when the time is up and then resets the timer. It is not a very good solution: I shouldn't be using the alert box and (as noted below) should find a better way to reset the app than refreshing the page
    if (timerOn && minutesTens === 0 && minutesOnes === 0 && secondsTens === 0 && secondsOnes === 0)
    {
    window.alert("Time's up!");
    refresh();
    }
    //This next bit handles the issue of how to update when the timer *starts* at something:00 (and thus does not go from something:01 to something:00).
    else if (timerJustStarted && secondsTens === 0 && secondsOnes === 0 && minutesOnes === 0)
        {
        minutesOnes = 9;
        secondsTens = 5;
        secondsOnes = 9;
        minutesOnes--
        timerJustStarted = false;
        }
    else if (timerJustStarted && secondsTens === 0 && secondsOnes === 0 && minutesOnes !== 0)
        {
        secondsTens = 5;
        secondsOnes = 9;
        minutesOnes--
        timerJustStarted = false;
        }
    
    document.getElementById('seconds-ones').innerHTML=secondsOnes;
    document.getElementById('seconds-tens').innerHTML=secondsTens;
    document.getElementById('minutes-ones').innerHTML=minutesOnes;
    document.getElementById('minutes-tens').innerHTML=minutesTens;
    secondsToMinutes(); 
    secondsOnes--;
    }
    
function secondsToMinutes()
    {
    if (minutesOnes === 0 && secondsOnes === 0 && secondsTens === 0)
        {
        minutesTens--;
        minutesOnes = 10;
        }
    if (secondsTens === 0 && secondsOnes === 0)
        {
        minutesOnes--;
        secondsTens = 6;
        }
    if ( secondsOnes === 0)
        {
        secondsTens--;
        secondsOnes = 10;
        }
    }
/*==========================================================================================
This resets the app by refreshing the page. This is not an ideal solution; fixing this is 
on the to-do list
==========================================================================================*/    
function refresh()
    {
    location.reload()
    }
    
    



</script>
<style>
    h1
    {
    font-size: 70px;
    margin: 20px;
    }
    
    #timer 
    {
        color:#cc0000;
        background-color: #4a88bf;
        border-radius: 25px;
        text-align: center;
        font-size: 500%;
        max-width: 300px;
        margin-top: 10px;
        margin-bottom: 20px;
    }
    
    
    
    button
    {
        background-color: #212223; 
        border-radius: 5px;
        color: white;
        border:none;
        cursor: pointer;
        height: 30px;
        width: 150px;
        margin-bottom: 3px;
        margin-left: 3px;
        font-size: 12px;

    button:hover
    {
    box-shadow: 0px 2px 20px 1px rgba(0,0,0,0.3);
    }
</style>
</head>
<body>
<div align="center">
<h1>
    Pomodoro Timer
</h1>
<p id="timer"><span id="minutes-tens">0</span><span id="minutes-ones">0</span>:<span id="seconds-tens">0</span></span><span id="seconds-ones">0</span></p>

<button onClick='countDown25()'>Work for 25 Minutes</button>

<button onClick='countDown5()'>5 Minute Break</button>
<br/>
<button onClick='refresh()'>Reset</button>
 
</div>
</body>