JSFiddle - React, Tailwind, and code Playground

by bowheart

HTML

<form id="form">Enter time (in seconds): </form>
<h2 id="time">0.00</h2>

CSS

body {
    margin:auto;
    width:500px;
}
h2 {
    font-size: 40px;
    font-family: Arial;
}

JavaScript

var intervalHandle;

window.onload = function () {
    //creating the inputminutes text Box
    var inputMin = document.createElement("input");
    inputMin.setAttribute('id', 'inputMin');
    inputMin.setAttribute('type', 'text');
    //creating the submit button
    var btn = document.createElement('input');
    btn.setAttribute('type', 'submit');
    btn.setAttribute('id', 'submit');
    btn.setAttribute('value', 'Start');
    var btn2 = document.createElement('input');
    btn2.setAttribute('type', 'button');
    btn2.setAttribute('id', 'stopper');
    btn2.setAttribute('value', 'Stop');
    var btn3 = document.createElement('input');
    btn3.setAttribute('type', 'button');
    btn3.setAttribute('id', 'reset');
    btn3.setAttribute('value', 'Reset');

    document.getElementById('form').appendChild(inputMin);
    document.getElementById('form').appendChild(btn);
    document.getElementById('form').appendChild(btn2);
    document.getElementById('form').appendChild(btn3);
    
    var continuing = false;

    document.getElementById('form').onsubmit = function (e) {
        e.preventDefault();
        var seconds = 0;
        
        if (continuing)
        {
            seconds = parseFloat(document.getElementById('time').innerHTML);
        }
        else
        {
            seconds = parseFloat(document.getElementById('inputMin').value);
        }
        countDown(seconds);
        continuing = false;
    }
    
    document.getElementById('stopper').onclick = function(e) {
        clearInterval(intervalHandle);
        intervalHandle = 0;
        continuing = true;
    }
    
    document.getElementById('reset').onclick = function(e) {
        clearInterval(intervalHandle);
        intervalHandle = 0;
        var resetVal = parseFloat(document.getElementById('inputMin').value).toFixed(2);
        document.getElementById('time').innerHTML = resetVal;
    }
}

function countDown(seconds) {
    if (isNaN(seconds)) {
        alert("Please Enter a...