Timer Prototype

by Dan Shahin

HTML

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

CSS

.warning {
    background-color:red;
    color:black;
    transition: all 5s ease 0s;
}
div.timer {
    position:absolute;
    font-size: 1000%;
    padding: 15px;
    width: 750px;
    height: 200px;
    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;
    perspective: 500px;
    margin : 25px;
}
div.config {
    position:absolute;
    font-size: 24px;
    padding: 15px;
    width: 750px;
    height: 200px;
    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;
    perspective: 500px;
    margin : 25px;
    background-color: gray;
}
div.timer.paused {
    opacity: .75;
    background-color: orange;
    /*-webkit-transform-origin: 50% 50%;
    -webkit-transform: rotatey(180deg) scale(.25);*/
}
div.timer.stashed {
    -webkit-transform-origin: 0% 0%;
    -webkit-transform: translate(0px, 100px);
}

}
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: false,
            stashed: false,
            warningSeconds: 5,
            warningColor: 'red',
            warningTextColor: 'white',
            pausedClass: 'paused',
            roundOverMsg: 'the round is over',
            roundStartingMsg: 'the round is starting',
            clockPausedMsg: 'clock is paused',
            clockStartedMsg: 'clock started'
        }, 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) {
                       ...