Simple pomodoro timer (written in vanilla JS)

pomodoro.html

<div>
    <div id="history">
        <ul id="completed_tasks">
        </ul>
    </div>
    <div id="working">
        Working on <span id="current_task">current task</span>, <span id="task_countdown">25:00</span> left.
    </div>
    <div id="break">
        Completed <span id="finished_task">a task</span>. On break, <span id="break_countdown">5:00</span> left.
    </div>
    <div id="task">
        <input type="text" placeholder="What would you like to focus on for the next 25 minutes?" id="todo" size="50">
        <input type="button" value="Start" id="start">
    </div>
</div>

<style type="text/css">
li {
    display: inline-block;
    margin: 1em;
}
#working, #break, #task {
    font: 3em sans-serif;
    margin: 1em;
}
input {
    font: 0.5em sans-serif;
}
body {
    font: 1em sans-serif;
}
</style>

<script type="text/javascript">
    let current_task;
    let history = JSON.parse(localStorage.getItem('history'));
    let intervalId;
    let pause = false;
    let ul = document.getElementById('completed_tasks');

    document.getElementById('working').style.display = "none";
    document.getElementById('break').style.display = "none";

    if (history) {
        for (let task of history) {
            let li = document.createElement('li');
            li.appendChild(document.createTextNode(task));
            ul.appendChild(li);
        }
    } else {
        localStorage.setItem('history', JSON.stringify([]));
    }

    function countdown(timer, element, callback) {
        intervalId = setInterval(function () {
            let minutes = parseInt(timer/60, 10),
                seconds = parseInt(timer%60, 10);
            if (!pause) {
                minutes = minutes < 10 ? "0"+minutes : minutes;
                seconds = seconds < 10 ? "0"+seconds : seconds;
                element.innerText = minutes+':'+seconds;
                if (timer) {
                    timer--;
                } else {
                    clearInterval(intervalId);
                    callback();
                }
            }
        }, 1000);
    }

    document.getElementById('todo').onchange = function(e) {
        current_task = e.target.value;
    };

    document.getElementById('todo').addEventListener('keyup', function(e) {
        e.preventDefault();
        if (e.keyCode == 13) {
            document.getElementById('start').click();
        }
    });

    document.getElementById('start').onclick = function() {
        document.getElementById('current_task').innerText = current_task;
        document.getElementById('task').style.display = "none";
        document.getElementById('working').style.display = "block";
        countdown(25*60-1, document.getElementById('task_countdown'), function() {
            let history = JSON.parse(localStorage.getItem('history'));
            history.push(current_task);
            localStorage.setItem('history', JSON.stringify(history));
            document.getElementById('finished_task').innerText = current_task;
            document.getElementById('working').style.display = "none";
            document.getElementById('break').style.display = "block";
            countdown(5*60-1, document.getElementById('break_countdown'), function() {
                window.location.reload();
            });
            alert("Time's up, ready to take a break?");
        });
    };
</script>