JSFiddle - React, Tailwind, and code Playground

by ermakovnikolay

HTML

<form>
    <section>
      <table cellspacing="0px">
        <tr>
          <th colspan="2" class="noborder">
            <h1>Food Safety Checklist</h1>
          </th>
        </tr>
        <tr>
          <th colspan="2" class="noborder"><span class="required">*</span>=Required feilds</th>
        </tr>
        <!-- Identification Information section -->
        <tr>
          <td class="left"><span class="required">*</span>Store Number:</td>
          <td>
            <select id="storenumber" name="storenumber" required title="Please select your store ID number">
              <option value="">Select Store Number</option>
              <option value="010576">010576</option>
              <option value="011169">011169</option>
              <option value="008181">008181</option>
              <option value="010324">010324</option>
              <option value="008615">008615</option>
              <option value="009150">009150</option>
              <option value="014640">014640</option>
              <option value="010684">010684</option>
              <option value="011168">011168</option>
              <option value="014215">014215</option>
              <option value="008179">008179</option>
              <option value="008339">008339</option>
              <option value="008668">008668</option>
              <option value="031574">031574</option>
            </select>
          </td>
        </tr>
        <tr>
          <td class="left"><span class="required">*</span>Day:</td>
          <td>
            <input type="text" size="10" name="day" id="day" title="Enter current Day" required>
          </td>
        </tr>
        <tr>
          <td class="left"><span class="required">*</span>Date:</td>
          <td>
            <input type="text" size="9" name="date" id="date" required title="Please enter current date">
          </td>
        </tr>
        <tr>
          <td class="left"><span class="required">*</span>Time:</td>
          <td>
            <input...

CSS

/* CSS Document */

header {
  text-align: center;
}
td {
  border: solid thin #000000;
  background-color: #FF0000;
}
th {
  border: solid thin #000000;
  width: 300px;
  background-color: #FF0000;
}
.required {
  color: #FFF500;
}
.left {
  text-align: right;
  width: 480px;
}
.noborder {
  border: none;
  background-color: #061BFF;
  color: #FFFFFF;
}
body {
  background-color: #061BFF;
}
.nobordererror {
  border: none;
  background-color: #061BFF;
  color: #FFFFFF;
}
.hide {
  display: none;
}

JavaScript

// JavaScript Document
"use strict";
var myVar = setInterval(myTimer, 1000);

function myTimer() {
    var d = new Date();
    var dd = d.getDay();
    var day1;
    var day2;
    var d_d = d.getMonth();
    switch (d_d) {
        case 0:
            day2 = "January";
            break;
        case 1:
            day2 = "February";
            break;
        case 2:
            day2 = "March";
            break;
        case 3:
            day2 = "April";
            break;
        case 4:
            day2 = "May";
            break;
        case 5:
            day2 = "June";
            break;
        case 6:
            day2 = "July";
            break;
        case 7:
            day2 = "August";
            break;
        case 8:
            day2 = "September";
            break;
        case 9:
            day2 = "October";
            break;
        case 10:
            day2 = "Novmber";
            break;
        case 11:
            day2 = "December";
            break;
    }
    switch (dd) {
        case 0:
            day1 = "Sunday";
            break;
        case 1:
            day1 = "Monday";
            break;
        case 2:
            day1 = "Tuesday";
            break;
        case 3:
            day1 = "Wednesday";
            break;
        case 4:
            day1 = "Thursday";
            break;
        case 5:
            day1 = "Friday";
            break;
        case 6:
            day1 = "Saterday";
            break;
    }
    document.getElementById("day").value = day1;
    document.getElementById("time").value = d.toLocaleTimeString();
    document.getElementById("date").value = day2 + " " + d.getDate();
}

function coldValidate(elem) {
    var x, text;
    x = +elem.value;
    if (isNaN(x) || x < 33 || x > 40) {
        text = "Temp Out of Tolerance";
    } else {
        text = " ";
    }
    elem.parentNode.nextElementSibling.innerHTML = text;
}

function freezValidate(elem) {
    var x, text;
    x = +elem.value;
    if...