So I am trying to create a pomodoro timer. The website currently looks and functions like this: [POMODOROone](http://developertenzin.github.io/pomodoro) 

My timer is counting down correctly so far. However, when I try to add a pause and resume functionality, it breaks. I have tried multiple ways but I haven't had much success. So I removed all my attempts and I have the code for what is working so far. 
So, my question is how would I add a pause/resume functionality to my timer? Also, how would I make my timer stop when I click on any of the positive and negative spans or the inputs?

Here is the Javascript: 

```
//decreases break time by 5 mins
function decreaseBreak() {
    var time = document.getElementById("breakInput").value;
    time = parseInt(time, 10);
    var new_time = time - 5;
    if (time == 0) {
        return 0;
    }

    document.getElementById("breakInput").value = new_time;
    document.getElementById("timerParagraph").innerHTML = new_time+":00";
}
//increases break time by 5 mins
function increaseBreak() {
    var time = document.getElementById("breakInput").value;
    time = parseInt(time, 10);
    var new_time = time + 5;
    document.getElementById("breakInput").value = new_time;
    document.getElementById("timerParagraph").innerHTML = new_time+":00";
}
//decreases session time by 5 mins
function decreaseSession() {
    var time = document.getElementById("sessionInput").value;
    time = parseInt(time, 10);
    var new_time = time - 5;
    if (time == 0) {
        return 0;
    }
    document.getElementById("sessionInput").value = new_time;
    document.getElementById("timerParagraph").innerHTML = new_time+":00";
}
//increases session time by 5 mins
function increaseSession() {
    var time = document.getElementById("sessionInput").value;
    time = parseInt(time, 10);
    var new_time = time + 5;
    document.getElementById("sessionInput").value = new_time;
    document.getElementById("timerParagraph").innerHTML = new_time+":00";
}

//countdown timer 

function start() {
    var sec = 60;
    var timerParagraph = document.getElementById("timerParagraph").innerHTML;
    var min = timerParagraph.substring(0, timerParagraph.indexOf(":"));
    var time = min * 60;
    min = parseInt(min,10)-1;
    setInterval(function() {
        sec = sec - 1;

        if (sec < 0) {
            min -= 1;
            sec = 59;
        }

        if (min < 0 && sec < 0) {
            clearInterval(start());
        }
        var temp;

        if (min.toString().length == 1 && sec.toString().length == 2) {
            document.getElementById("timerParagraph").innerHTML = "0" + min + ":" + sec;
        } else if (sec.toString().length == 1 && min.toString().length == 2) {
            document.getElementById("timerParagraph").innerHTML = min + ":" + "0" + sec;
        } else if (min.toString().length == 1 && sec.toString().length ==1) {
            document.getElementById("timerParagraph").innerHTML = "0" + min + ":" + "0" + sec;
        } else {
            document.getElementById("timerParagraph").innerHTML = min + ":" + sec;
        }

    },1000);

}

```

New Updated Code: 

```
//decreases break time by 5 mins
function decreaseBreak() {
    var time = document.getElementById("breakInput").value;
    time = parseInt(time, 10);
    var new_time = time - 5;
    if (time == 0) {
        return 0;
    }
    document.getElementById("breakInput").value = new_time;
    clearInterval(timer); 
    document.getElementById("timerParagraph").innerHTML = new_time+":00";

}
//increases break time by 5 mins
function increaseBreak() {
    var time = document.getElementById("breakInput").value;
    time = parseInt(time, 10);
    var new_time = time + 5;
    document.getElementById("breakInput").value = new_time;
    document.getElementById("timerParagraph").innerHTML = new_time+":00";
    clearInterval(timer);
    timer = null;
}
//decreases session time by 5 mins
function decreaseSession() {
    var time = document.getElementById("sessionInput").value;
    time = parseInt(time, 10);
    var new_time = time - 5;
    if (time == 0) {
        return 0;
    }
    document.getElementById("sessionInput").value = new_time;
    document.getElementById("timerParagraph").innerHTML = new_time+":00";
    clearInterval(timer);
}
//increases session time by 5 mins
function increaseSession() {
    var time = document.getElementById("sessionInput").value;
    time = parseInt(time, 10);
    var new_time = time + 5;
    document.getElementById("sessionInput").value = new_time;
    document.getElementById("timerParagraph").innerHTML = new_time+":00";
    clearInterval(timer);
}

//countdown timer 

var timer = null;
var sec = 60;

function start() {
    var timerParagraph = document.getElementById("timerParagraph").innerHTML;
    var min = timerParagraph.substring(0, timerParagraph.indexOf(":"));
    min = parseInt(min,10)-1;

    function onTimer() {
        sec = sec - 1;

        if (sec < 0) {
            min -= 1;
            if (min == 0 && sec == 0) {
                // When min and second equals zero, timer stops
                clearInterval(timer);
            }
            sec = 59;
        }

        if (min.toString().length == 1 && sec.toString().length == 2) {
            document.getElementById("timerParagraph").innerHTML = "0" + min + ":" + sec;
        } else if (sec.toString().length == 1 && min.toString().length == 2) {
            document.getElementById("timerParagraph").innerHTML = min + ":" + "0" + sec;
        } else if (min.toString().length == 1 && sec.toString().length ==1) {
            document.getElementById("timerParagraph").innerHTML = "0" + min + ":" + "0" + sec;
        } else {
            document.getElementById("timerParagraph").innerHTML = min + ":" + sec;
        }
    }

    timer = setInterval(onTimer,1000);
    console.log("Start timer");

    // when the div is clicked, the timer starts and stops.
    document.getElementById("timerDiv").onclick = function() {
        if (timer) {
            clearInterval(timer);
            timer = null; 
        } else {
            timer = setInterval(onTimer,1000);
            console.log("Resume timer");
        }
    }

}

```

This updated code works for the following new actions: 
1. When the timer starts playing, and if the timerDiv is clicked, it will pause. 
2. And when clicked again, it will resume.

Now, when I click on the positive and negative signs and change the time, it changes the time like it should and clears the interval like it is called. However, when I click on the timerDiv again, instead of playing from the start, it resumes playing the time from where it left off. How would I make it so that when I click on the timerDiv again, it counts down from the new time instead of resuming previous time.