JSFiddle - React, Tailwind, and code Playground

by Professor Tom DeDonno

HTML

<form action="https://cim.saddleback.edu/~jstudent0/formData.php">


<fieldset id="deliveryDate" class="checks">
            <legend>Delivery Date</legend>
            <div class="inline" id="delivDate">
               <select id="delivMo" name="DelivMonth" required="required">
                  <option value="1">January</option>
                  <option value="2">February</option>
                  <option value="3">March</option>
                  <option value="4">April</option>
                  <option value="5">May</option>
                  <option value="6">June</option>
                  <option value="7">July</option>
                  <option value="8">August</option>
                  <option value="9">September</option>
                  <option value="10">October</option>
                  <option value="11">November</option>
                  <option value="12">December</option>
               </select>
               <select id="delivDy" name="DelivDay" required="required">
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="7">7</option>
                  <option value="8">8</option>
                  <option value="9">9</option>
                  <option value="10">10</option>
                  <option value="11">11</option>
                  <option value="12">12</option>
                  <option value="13">13</option>
                  <option value="14">14</option>
                  <option value="15">15</option>
                  <option value="16">16</option>
                  <option value="17">17</option>
                  <option value="18">18</option>
                  <option value="19">19</option>
                  <option value="20">20</option>
                  <option...

JavaScript

// JavaScript Document

/* global variables */
var twentyNine = document.createDocumentFragment();
var thirty = document.createDocumentFragment();
var thirtyOne = document.createDocumentFragment();

/* set up node building blocks for selection list of days */

function setupDays() {

  var dates = document.getElementById("delivDy").getElementsByTagName("option");

  //default is 1..28, index 0..27
  twentyNine.appendChild(dates[28].cloneNode(true)); // add 29th

  thirty.appendChild(dates[28].cloneNode(true));
  thirty.appendChild(dates[29].cloneNode(true)); // add 29th & 30th

  thirtyOne.appendChild(dates[28].cloneNode(true));
  thirtyOne.appendChild(dates[29].cloneNode(true));
  thirtyOne.appendChild(dates[30].cloneNode(true)); // add 29th, 30th
}

function updateDays() {
  var deliveryDay = document.getElementById("delivDy");
  var dates = deliveryDay.getElementsByTagName("option");
  var deliveryMonth = document.getElementById("delivMo");
  var deliveryYear = document.getElementById("delivYr");
 var selectedMonth = deliveryMonth.options[deliveryMonth.selectedIndex].value;

  alert( "window month selected " + selectedMonth );
  console.log("selectedMonth:" + selectedMonth);
  while (dates[28]) {
    // remove child with index of 28 until this index is empty
    deliveryDay.removeChild(dates[28]);
  }

  if (deliveryYear.selectedIndex === -1) {
    //if no year is selected, choose the first year
    deliveryYear.selectedIndex = 0;
  }

  if (selectedMonth === "2" &&
    deliveryYear.options[deliveryYear.selectedIndex].value === "2020") {
    // if leap year, Feb has 29 days
    deliveryDay.appendChild(twentyNine.cloneNode(true));

  } //Thirty days have November, April, June, and September
  // 4 6, 9 and 11
  else if (selectedMonth === "4" || selectedMonth === "6" || selectedMonth === "9" || selectedMonth === "11") {
    // these months have 30 days
    deliveryDay.appendChild(thirty.cloneNode(true));
  } else if (selectedMonth === "1" || selectedMonth ===...