Timer Prototype (responsive)

by Dan Shahin

HTML

<div>
    <button id="reset">reset</button>
    <button id="pause">pause</button>
    <button id="add">add a minute</button>
    <button id="say" class="active">say</button>
    <input id="quote" placeholder="insert quote here" />
    <button id="mute">mute</button>
    <div class="timer" id="foo">PAUSED</div>
</div>

CSS

div.timer {
    height:400px;
    font-size: 30vw;
}
@media screen and (min-width:761px) {
    body {
        background-color:white;
    }
    h1 {
        color:red;
    }
    div.timer {
        height:400px;
        
    }
}
@media screen and (max-width:760px) {
    body {
        background-color: #333;
    }
    h1 {
        color:red;
    }
    p {
        color: white;
    }
    div.timer {
        height:400px;
        
    }
}
@media screen and (max-width:480px) {
    body {
        background-color: #807f83;
    }
    h1 {
        color:white;
    }
    p {
        color: white;
    }
}
@media screen and (max-width:360px) {
    body {
        background-color: #0096d6;
    }
    h1 {
        color:white;
        font-size:25px;
    }
    p {
        color: white;
    }
}
.warning {
    background-color:red;
    color:black;
    transition: all 5s ease 0s;
}
div.timer {
    
    padding: 15px;
    width: 100%;
    height: 100%;
    text-align: center;
    border-radius: 20px;
    text-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-transform-style: preserve-3d;
    transition: all .75s ease 0s;

}
div.timer.paused {
    opacity: .35;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: rotatey(180deg) scale(.25);
}
div.timer.stashed {
}
}
div.timer.done {
    opacity: 0;
    -webkit-transform: rotatey(-180deg) rotatex(-180deg) scale(.001);
}
input {
    font-size:1em;
}
button {
    font-size:1em;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    background: rgb(180, 184, 220);
}
button.active {
    background-color: lightgreen;
}

}

JavaScript

(function ($) {

    $.fn.Timer = function (options) {

        // This is the easiest way to have default options.
        var settings = $.extend({
            // These are the defaults.
            color: "blue",
            backgroundColor: "white",
            totalSeconds: 100,
            elapsedSeconds: 0,
            interval: 1000,
            originalTime: 90,
            timeLeft: 10,
            clockIsRunning: true,
            warn: false,
            speak: true,
            warningSeconds: 5,
            warningColor: 'red',
            warningTextColor: 'white',
            roundOverMsg: 'the round is over',
            roundStartingMsg: 'the round is starting'
        }, options);

        this.display = function (message) {
            var $timer = $(this);
            $timer.html(message);
            return this;
        }

        this.say = function (message) {
            if (settings.speak) {
                if ('speechSynthesis' in window) {
                    window.speechSynthesis.speak(new SpeechSynthesisUtterance(message));
                } else {
                    alert(message);
                }
            }
            return this;
        }

        this.start = function () {

            if (settings.timeLeft == 0) {
                $timer.html('Time is up!');
                settings.clockIsRunning = false;
            }
            var $timer = this;

            settings.clockIsRunning = true;
            $timer.data('clockIsRunning', true);
            var interval = setInterval(function () {
                if ($timer.data('clockIsRunning')) {
                    settings.elapsedSeconds++;
                    settings.timeLeft = settings.totalSeconds - settings.elapsedSeconds;

                    if (settings.timeLeft > -1) {
                        $timer.html(DisplayTime());
                    } else {
                        //clearInterval(interval);
                        $timer.data('clockIsRunning',...