JSFiddle - React, Tailwind, and code Playground

by docluv

HTML

<div class="countdown-timer"></div>
<div class="countdown-activity"></div>
<div class="countdown-activity-time"></div>
<div class="activity-time-pause">Pause</div>
<div class="next-activity"></div>

CSS

.countdown-timer,
.next-activity {
    font-size:4em;
    font-weight:800;
    margin: .7em;
}
.activity-time-pause {
    font-size:2em;
    border: solid #000 2px padding:2em;
}

JavaScript

var exercisePlan = [{
    "Name": "Stretch",
        "Time": 150000
}, {
    "Name": "Jacks",
        "Time": 60000
}, {
    "Name": "Jog",
        "Time": 90000
}, {
    "Name": "side to side",
        "Time": 20000
}, {
    "Name": "Stretch",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 20000
}, {
    "Name": "Pushups",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 20000
}, {
    "Name": "Crunches",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 20000
}, {
    "Name": "Squats",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 20000
}, {
    "Name": "Lunges",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 20000
}, {
    "Name": "Pump Kicks",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 20000
}, {
    "Name": "T-Ups",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 20000
}, {
    "Name": "Cross Punch Sit Ups",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 20000
}, {
    "Name": "jab - cross - freestyle",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 20000
}, {
    "Name": "Jump Squats",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 20000
}, {
    "Name": "Close Grip Push ups",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 20000
}, {
    "Name": "bikes",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 20000
}, {
    "Name": "Burpees",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 20000
}, {
    "Name": "Wheel & Roudhouse progression",
        "Time": 60000
}, {
    "Name": "Cool Down",
        "Time": 180000

}];


var cdt = document.querySelector(".countdown-timer"),
    countdownActivity = document.querySelector(".countdown-activity"),
    countdownActivityTime = document.querySelector(".countdown-activity-time"),
    nextActivity,
    index = 0,
    name, value,
    counter,
    isPaused = false;

function getFormattedTime(currentTime)...