JSFiddle - React, Tailwind, and code Playground

by Chris Hughes

HTML

<h1></h1>
<form>
  <h2>DSCR - Q2</h2>
  <label for="name">Date Completed</label>
  <input type="text" id="name" required/>

  <label for="date">Collection Date:</label>
  <input type="date" id="date" required pattern="^\S+@(([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6})$" />
  <label for="date">Time of Day:</label>
  <input type="time" id="time" required pattern="^\S+@(([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6})$" />

  <label for="site">Site Name:</label>
  <input type="text" id="site" required/>

  <label for="site_number">Number:</label>
  <input type="tel" id="site_number" name="site_number" placeholder="xx-xx" required pattern="(\d{2}([\-]\d{2})?)" />

  <label for="total_time">Total time taken (minutes):</label>
  <input type="num" id="total_time" name="total_time" />

  <br>
  <br> Check box if futher analyses needed:

  <div class="box">
    <div class="checkbox">
      <label>
        <input type="checkbox" />
        <i class="input-helper"></i>
        <span>HAB</span>
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" />
        <i class="input-helper"></i>
        <span>Nutrient</span>
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" />
        <i class="input-helper"></i>
        <span>Bacteria</span>
      </label>
    </div>
  </div>


  <label for="air_temp">Air Temperature (°C):</label>
  <input type="number" step=0.1 id="air_temp" placeholder=" " />

  <label for="water_temp">Water Temperature in Bucket (°C):</label>
  <input type="number" step=0.1 id="water_temp" required />

  <br>
  <br> Check if Secchi Depth on Bottom:


  <div class="checkbox">
    <label>
      <input type="checkbox" id="secchi_bottom" />
      <i class="input-helper"></i>

    </label>
  </div>



  <label for="secchi_depth">Secchi Depth (m):</label>
  <input type="number" step=0.01 id="secchi_depth" required />

  <label...

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: 600px;
}

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: 275px;
  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

$('#secchi_bottom').click(function() {
  if (this.checked) {
    $('#secchi_depth').prop("disabled", true);
    document.getElementById("secchi_depth").value = '';
    document.getElementById("secchi_depth").placeholder = "Not applicable";
  } else {
    $('#secchi_depth').prop("disabled", false);
    document.getElementById("secchi_depth").placeholder = "";
  }
})

$('#test4_yes').click(function() {
  $('#algae_green').prop("disabled", false);
  document.getElementById("algae_green").placeholder = "";
  $('#algae_red').prop("disabled", false);
  document.getElementById("algae_red").placeholder = "";
})

$('#test4_no').click(function() {
  $('#algae_green').prop("disabled", true);
  document.getElementById("algae_green").value = '';
  document.getElementById("algae_green").placeholder = "Not applicable";
  $('#algae_red').prop("disabled", true);
  document.getElementById("algae_red").value = '';
  document.getElementById("algae_red").placeholder = "Not applicable";
})


$('#fresh_water').click(function() {
  if (this.checked) {
    $('#jar_temp').prop("disabled", false);
    document.getElementById("jar_temp").placeholder = "";
    $('#hydrometer').prop("disabled", false);
    document.getElementById("hydrometer").placeholder = "";
    $('#salinity').prop("disabled", false);
    document.getElementById("salinity").placeholder = "";
  } else {
    $('#jar_temp').prop("disabled", true);
    document.getElementById("jar_temp").value = '';
    document.getElementById("jar_temp").placeholder = "Not applicable";
    $('#hydrometer').prop("disabled", true);
    document.getElementById("hydrometer").value = '';
    document.getElementById("hydrometer").placeholder = "Not applicable";
    $('#salinity').prop("disabled", true);
    document.getElementById("salinity").value = '';
    document.getElementById("salinity").placeholder = "Not applicable";
  }
})

$('#prev_rain').click(function() {
  if (this.checked) {
    $('#last_rain_date').prop("disabled", false);
   ...