JSFiddle - React, Tailwind, and code Playground

by mowglisanu

HTML

<form name="myForm" action="" method="post">
    <br />
    <table class="auto-style1">
        <tr>
            <td class="auto-style4">Value 1 to 1000</td>
            <td class="auto-style5"><input name="Value" type="text" onblur="valueNumeric()" /></td>
            <td class="auto-style3">
            <p id="vl">Please enter calue between 1 and 1000</p>
            </td>
        </tr>
        <tr>
            <td class="auto-style4">Date YY-MM-DD</td>
            <td class="auto-style5"><input name="Date" type="text" /></td>
            <td class="auto-style3">
            <p>Please enter a date.</p>
            </td>
        </tr>
        <tr>
            <td class="auto-style4">Time HH-MM-SS</td>
            <td class="auto-style5"><input name="Timme" type="text" /></td>
            <td class="auto-style3">
            <p>Please enter your time.</p>
            </td>
        </tr>
        <tr>
            <td class="auto-style4">Grade % i.e. 74.56</td>
            <td class="auto-style5"><input name="Grade" type="text" /></td>
            <td class="auto-style3">
            <p style="width: 394px">Pease enter your grade as a % with 2 decimal 
            places</p>
            </td>
        </tr>
        <tr>
            <td class="auto-style4">Personal Best</td>
            <td class="auto-style5"><select name="personalbest" onchange="personalBest('selection')">
            <option selected="selected">Please Choose</option>
            <option value="1">Yes</option>
            <option value="0">No</option>
            </select></td>
            <td class="auto-style3">
            <p id="pb">Please choose a value.</p>
            </td>
        </tr>
    </table>
</form>

CSS

.auto-style1 {
    width: 84%;
    height: 156px;
}
.auto-style3 {
    width: 286px;
}
.auto-style4 {
    width: 151px;
}
.auto-style5 {
    width: 123px;
}

JavaScript

function valueNumeric(){
var valueResult
var valuetaId=document.forms["myForm"]["Value"].value;
    var numericExpression = /^[0-9]+$/;
    if(valuetaId.match(numericExpression))
        {
        valuetaId = parseFloat(valuetaId)
        if((valuetaId >= 1 ) &&(valuetaId <= 1000 ))
            {
            valueResult = ("Valid");
            document.getElementById("vl").innerHTML=valueResult;            }
        else
            {
            valueResult = ("Please enter calue between 1 and 1000");
            document.getElementById("vl").innerHTML=valueResult;
            }
    }else{
        valueResult = ("Please enter calue between 1 and 1000");
        document.getElementById("vl").innerHTML=valueResult;
    }
}
function personalBest(selection)
{
var rundataResult;
var rundataId=document.forms["myForm"]["personalbest"].value;
    if(rundataId == "Please Choose")
    {
    rundataResult = ("Please choose a value.");
    document.getElementById("pb").innerHTML=rundataResult;
    }
else{
    rundataResult = ("valid");
    document.getElementById("pb").innerHTML=rundataResult;
    }
}