JSFiddle - React, Tailwind, and code Playground

by Brock Callahan

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<div class="container">
    <!-- Bootstrap container -->
    	<h1 class="text-primary text-center">Pomodoro Timer</h1>
    <!-- Heading -->
    <div class="settings">
        <!-- Settings Section -->
        <!-- Pomodoro Length Setting -->Pomodoro length: <span id="setPomodoro">25</span> minutes
        <button class="btn btn-default btn-small pull-right" id="pomodoroDecrease"><i class="fa fa-minus"></i>
        </button>
        <button class="btn btn-default btn-small pull-right" id="pomodoroIncrease"><i class="fa fa-plus"></i>
        </button>
        <!--Pomodoro Break length (sets automatically) -->
        <br>Short Break: <span id="setShortBreak"></span> minutes
        <br>Long Break: <span id="setLongBreak"></span> minutes
        <!-- Estimate pomodoros setting -->
        <br>Estimated Pomodoros: <span id="estimate"></span>
        <button class="btn btn-default btn-small pull-right" id="estimateDecrease"><i class="fa fa-minus-circle"></i>
        </button>
        <button class="btn btn-default btn-small pull-right" id="estimateIncrease"><i class="fa fa-plus-circle text-center"></i>
        </button>
    </div>
    <!-- Close settings div -->
    <div id="pomodoro">
        <div class="clock text-center">
        <!-- The Pomodoro Timer -->	<span id="minute" class="text-center"></span><span>:</span><span id="belowTen">0</span><span id="second" class="text-center"></span>
        </div>
    </div>
    <div id="onBreak">
        <div class="clock text-center">
        <!-- The Break Timer -->	<span id="breakMin"></span>:<span id="breakBelowTen"></span><span id="breakSec"></span>
        </div>
    </div>
            
    <div id="breakStatus"></div>
            
    <!-- Displays a message about whether the user is on a break or not -->
   ...

CSS

.container {
    background: linear-gradient(to bottom right, red, white);
    color: #fff;
    height: 500px;
    width: 100%;
    -webkit-box-shadow: 2px 2px 2px 2px #999;
    box-shadow: 2px 2px 2px 2px #999;
}
h1 {
    text-shadow: 1px 1px 1px #333;
}
i {
    cursor: pointer;
    padding: 1px;
}
* {
    font-size: 24px;
}
#pomodoro, #pomodoro > span, #onBreak, #onBreak > span, .clock > span {
    font-size: 2em;
}

#pomodoro .clock > span {
    color: #333;
    text-shadow: 1px 1px 1px #fff;
}

#pomodoro,
#onBreak {
    margin: 20px;
}

#onBreak, #onBreak > span {
    /* background: #fff; */
    /* color: #333; */
}

/* #pomodoro .clock {
    background: #333;
}

#onBreak .clock {
    background: #fff;
} */

.clock {
    margin: auto;
    width: 50%;
}

JavaScript

// Variables
var theMin = 25 - 1;
var setPomodoro = theMin + 1;
var setShortBreak = Math.round(setPomodoro / 5);
var setLongBreak = Math.floor(setPomodoro / 1.5) - 1;
var estimate = 1;
var theSec = 59;
var countdownSec;
var running = false;
var reset = false;
var counter = 0;
var breakCount = 1;
var complete = false;
var startSound = new Audio("http://www.blog.brockcallahan.com/wp-content/uploads/2015/10/koto-hit.mp3");
var shortBreakSound = new Audio("http://www.blog.brockcallahan.com/wp-content/uploads/2015/10/bronzebell1.wav");
var longBreakSound = new Audio("http://www.blog.brockcallahan.com/wp-content/uploads/2015/10/bright-tibetan-bell-ding-b-note.wav");
var finishEarlySound = new Audio("http://www.blog.brockcallahan.com/wp-content/uploads/2015/10/win-spacey.wav");

// Prepare
writeIt("minute", "0");
writeIt("second", "00");
writeIt("setShortBreak", setShortBreak);
writeIt("setLongBreak", setLongBreak);
writeIt("estimate", estimate);

// Hide the timers initially
$("#pomodoro").hide();
$("#onBreak").hide();
$("#belowTen").hide(); // Hide the extra zero

// Increase the Pomodoro length
$("#pomodoroIncrease").click(function () {
    theMin++;
    setPomodoro++;
    setShortBreak = Math.round(setPomodoro / 5);
    setLongBreak = Math.floor(setPomodoro / 1.5) - 1;
    writeIt("setPomodoro", setPomodoro);
    writeIt("setShortBreak", setShortBreak);
    writeIt("setLongBreak", setLongBreak);
});

// Decrease the Pomodoro length
$("#pomodoroDecrease").click(function () {
    theMin--;
    setPomodoro--;
    setShortBreak = Math.round(setPomodoro / 5);
    setLongBreak = Math.floor(setPomodoro / 1.5) - 1;
    writeIt("setPomodoro", setPomodoro);
    writeIt("setShortBreak", setShortBreak);
    writeIt("setLongBreak", setLongBreak);
});

// Increase the estimated pomodori
$("#estimateIncrease").click(function () {
    estimate++;
    writeIt("estimate", estimate);
});

// Decrease the estimated pomodori
$("#estimateDecrease").click(function () {
    estimate--;
   ...