Google Slides countdown

countdown.js

// ==UserScript==
// @name         Slides Countdown
// @namespace    http://tampermonkey.net/
// @version      0.1
// @author       Appsilon
// @match        *://docs.google.com/presentation/*
// @grant        none
// ==/UserScript==
(function() {
    'use strict';
    console.log("onload");
    function updateDeadline(timestamp) {
        if (timestamp === undefined) {
            localStorage.removeItem("slides_deadline");
        } else {
            localStorage.setItem("slides_deadline", Number(timestamp));
        }
    }
    function getDeadline() {
        return new Date(Number(localStorage.getItem("slides_deadline")));
    }
    function getTimeRemaining(deadline) {
        var diff = Date.parse(deadline) - Date.parse(new Date());
        var seconds = Math.floor((diff / 1000) % 60);
        var minutes = Math.floor((diff / 1000 / 60) % 60);
        return {
            'total': diff,
            'minutes': minutes,
            'seconds': seconds
        };
    }
    var box = document.createElement("div");
    box.style = "position:fixed; width: 200px; background: #191e32; color: #FF364A; z-index: 100000; bottom: 0; font-family: 'Maven Pro';";
    document.body.insertBefore(box, document.body.firstChild);
    function stopTimer() {
        updateDeadline();
        initializeDeadlineForm();
    }
    function showBanner(text) {
        var banner = document.createElement("div");
        banner.style = "position:absolute; color: #FF364A; z-index: 100000; top:40%; left:40%; font-size:200px; font-family: 'Maven Pro'; font-weight: 900;";
        banner.innerHTML = text;
        document.body.insertBefore(banner, document.body.firstChild);
        setTimeout(function() {
            banner.outerHTML = "";
        }, 900);
    }
    function initializeClock(deadline) {
        box.innerHTML = '<div id="clockdiv"><h3><center><span class="minutes"></span>:<span class="seconds"></span> till end</center></h3><input type="button" id="stop_timer" value="clear"/></div>';
        document.getElementById("stop_timer").addEventListener("click", stopTimer, false);
        var clock = document.getElementById('clockdiv');
        var minutesSpan = clock.querySelector('.minutes');
        var secondsSpan = clock.querySelector('.seconds');
        function updateClock() {
            var t = getTimeRemaining(deadline);
            minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
            secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
            if (t.total <= 0) {
                clearInterval(timeinterval);
                stopTimer();
            }
            if (([0,1].includes(t.seconds) && ([1,2,3].includes(t.minutes) || (t.minutes % 5 < 1))) ||
                ([57,58,59].includes(t.seconds) && ([0,1,2].includes(t.minutes) || (t.minutes % 5 == 4)))) {
                showBanner(t.minutes + ":" + ('0' + t.seconds).slice(-2));
            }
        }
        updateClock();
        var timeinterval = setInterval(updateClock, 1000);
    }
    function startTimer() {
        var min_count = document.getElementById("length").value;
        var deadline = new Date((new Date()).getTime() + min_count * 60000);
        updateDeadline(deadline);
        initializeClock(deadline);
    }
    function initializeDeadlineForm() {
        box.innerHTML = '<input type="number" id="length" value="15"/><input type="button" id="start_timer" value="Go!"/>'
        document.getElementById("start_timer").addEventListener("click", startTimer, false);
    }
    var deadline = getDeadline();
    if (deadline) {
        initializeClock(deadline);
    } else {
        initializeDeadlineForm();
    }
})();