JSFiddle - React, Tailwind, and code Playground

by Michael Tot Korsgaard

HTML

<div id="clock">
        <span id="hour"></span> :
        <span id="minute"></span> :
        <span id="second"></span>

        <p id="on">
            An alarm is set to
        </p>
    </div>

    <div id="timer">
        <input type="number" min="0" max="23" placeholder="hours" id="timerHours" value="0" />
        <input type="number" min="0" max="59" placeholder="minutes" id="timerMinutes" value="0" />
        <input type="number" min="0" max="59" placeholder="seconds" id="timerSeconds" value="0" />

        <br />

        <a id="setTimer">Set timer</a>
    </div>

    <div id="alarm">
        <img src="http://wondersofdisney.yolasite.com/resources/toondis/bonkers/bonkerslogo.png" />
    </div>

CSS

body {
    text-align:center;
    width: 100%;
}

#on {
    opacity:0;
}

#setTimer {
    cursor:pointer;
}

#alarm {
    width: 300px;
    opacity:0;
    position: relative;
    margin:auto;
    transition: all 200ms;
}
    #alarm img {
        width:100%;
    }

JavaScript

$(document).ready(function () {
    var hour = $('#hour'),
        minute = $('#minute'),
        second = $('#second'),
        timerHours = $('#timerHours'),
        timerMinutes = $('#timerMinutes'),
        timerSeconds = $('#timerSeconds'),
        setTimer = $('#setTimer'),
        timerIsOn = $('#on'),
        alarmBox = $('#alarm'),
        now = new Date(),
        alarm = {
            hasBeenSet: false,
            aHour: 0,
            aMinute: 0,
            aSecond: 0
        },
        timer;

    setInterval(function () {
        //  Get current time
        now = new Date();

        //  Set current time
        hour.text(now.getHours());
        minute.text(now.getMinutes());
        second.text(now.getSeconds());

        //  Check weither the alarm should fire
        if (alarmIsFired()) {
            fireAlarm();
        }
    }, 1000);

    setTimer.click(function () {
        //  Different function depending on wether the alarm has fired
        if (alarmIsFired()) {
            //  Show that timer is off
            timerIsOn.css("opacity", "0");

            //  Inform that alarm is no longer active
            alarm.hasBeenSet = false;

            console.log('alarm on/off : ', alarm.hasBeenSet);
        } else {
            //  Set alarm time
            alarm.aHour = timerHours.val();
            alarm.aMinute = timerMinutes.val();
            alarm.aSecond = timerSeconds.val();

            //  Inform that alarm has been set
            alarm.hasBeenSet = true;

            //  Show that timer is on
            timerIsOn.css("opacity", "1");
        }
    });

    function fireAlarm() {
        var isBig = false;

        console.log('alarm', alarm);
        if (alarm.hasBeenSet) {
            alarmBox.css("opacity", "1");

            setTimer.text("Shut off alarm");

            timer = setInterval(function () {
                console.log('hit');

                if (isBig) {
                    alarmBox.css("width", "900px");
   ...