JSFiddle - React, Tailwind, and code Playground

by Chris Hughes

HTML

<h1></h1>
<form>

  <h2>DSCR - Q2 - Zone: PA </h2>

  Date Completed:
  <input type="completion_date" id="completion_date" style="width:150px;" required pattern="^\S+@(([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6})$" />

  <button type="button" id="today_button" style="margin-left:50px;">Today</button>


  <br>

  <br>
  <b>Basic Maintenance</b>
  <br><br>

  <div class="checkbox">
    <label>
      <input type="checkbox" id="clean_radiation_sensor" class="basic_maintenance" />
      <i class="input-helper"></i>
    </label>
  </div>
  Clean & Level Radiation Sensor
  <br>

  <div class="checkbox">
    <label>
      <input type="checkbox" id="replace_bubble_level" class="basic_maintenance" />
      <i class="input-helper"></i>
    </label>
  </div>
  Replace Bubble Level (if needed)
  <br>

  <div class="checkbox">
    <label>
      <input type="checkbox" id="clean_gill_sheild" class="basic_maintenance" />
      <i class="input-helper"></i>
    </label>
  </div>
  Inspect & Clean Gill Shield
  <br>

  <div class="checkbox">
    <label>
      <input type="checkbox" id="clean_solar_panel" class="basic_maintenance" />
      <i class="input-helper"></i>
    </label>
  </div>
  Clean Solar Panel
  <br>

  <div class="checkbox">
    <label>
      <input type="checkbox" id="check_solar_output" class="basic_maintenance" />
      <i class="input-helper"></i>
    </label>
  </div>
   Check Solar Panel Output &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
 
 <input type="num" id="solar_output"  /> vDC @

<input type="time" id="solar_output_time" required pattern="^\S+@(([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6})$" />
  <br>

  <div class="checkbox">
    <label>
      <input type="checkbox" id="check_battery_voltage" class="basic_maintenance" />
      <i class="input-helper"></i>
    </label>
  </div>
  Check Battery Voltage &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
  
  <input type="num" id="battery_voltage" /> vDC 
  &nbsp&nbsp&nbsp
   Sky...

CSS

label,
input[type=submit] {
  cursor: pointer;
}

html {
  height: 100%;
  background: #eeeeee;
  background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));
  background: -webkit-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
  background: -o-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
  background: -ms-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
  background: linear-gradient(top, #eeeeee 0%, #cccccc 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc', GradientType=0);
  background-attachment: fixed;
}

body {
  font: 16px Arial;
  text-align: center;
}

h1,
h2 {
  margin-top: 0;
  color: #444;
  text-shadow: 0 1px 2px #fff;
}

h1 {
  font-size: 48px;
  text-shadow: 0 1px 2px #fff, 0 1px 2px #fff;
}

form {
  display: inline-block;
  padding: 32px 64px 38px;
  margin: 40px auto 40px;
  text-align: left;
  border-radius: 36px;
  box-shadow: inset 0 2px 12px #000;
  width: 800px;
}

h2 {
  font: bold 22px Verdana;
}

label {
  display: block;
  margin: 14px 0 3px;
}

label:first-child {
  margin-top: 0;
}

input {
  outline: 0;
}

input:not([type=submit]) {
  // display: block;
  width: 140px;
  border: 1px solid #888;
  padding: 11px;
  margin: 0;
  border-radius: 6px;
  box-shadow: inset 0 2px 4px #ccc;
  box-sizing: border-box;
}

input:focus:not([type=submit]) {
  box-shadow: 0 0 24px #eff, inset 0 2px 4px -1px #444;
}

input:focus:valid:not([type=submit]) {
  border-color: #080;
  background: #e6ffe6 url(http://webdesigntutsplus.s3.amazonaws.com/tuts/214_html5_form_validation/demo/images/valid.png) no-repeat 97% center;
}

input:required:not([type=submit]) {
  border-color: #9999ff;
}

input:required:disabled:not([type=submit]) {
  border-color: grey;
}

input:focus:invalid:not([type=submit]) {
  border-color: #800;
  background: #ffe6e6...

JavaScript

$('#today_button').click(function() {
  var now = new Date();
  var day = ("0" + now.getDate()).slice(-2);
  var month = ("0" + (now.getMonth() + 1)).slice(-2);
  var today = now.getFullYear() + "-" + (month) + "-" + (day);
  $('#completion_date').val(today);
});

$('#CH100').click(function() {
  $('#component_side_3').prop("disabled", true);
  document.getElementById("component_side_3").value = '';
  document.getElementById("component_side_3").placeholder = "N/A";
  
  $('#battery_side_2').prop("disabled", false);
  document.getElementById("battery_side_2").value = '';
  document.getElementById("battery_side_2").placeholder = '';
});

$('#CH150').click(function() {
  $('#battery_side_2').prop("disabled", true);
  document.getElementById("battery_side_2").value = '';
  document.getElementById("battery_side_2").placeholder = "N/A";
  
  $('#component_side_3').prop("disabled", false);
  document.getElementById("component_side_3").value = '';
  document.getElementById("component_side_3").placeholder = '';
});

$('#SunSaver').click(function() {
 alert('under development');
});