JSFiddle - React, Tailwind, and code Playground

by Jordan Marechal

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>CSCI E-3 Unit 3 Project, Part B</title>
    <link rel="stylesheet" href="css/cscie3.css">
    <script type="text/javascript" src="js/hw3b.js"></script>
  </head>
  <body class="hw">
    <div class="container">
 <form autocomplete="off" action="" name="hw4Form"><br>
        <fieldset name="LoginInfo"><input size="30" placeholder="username"
            name="username" id="username" type="text"> <br>
          <br>
          Password:<br>
          <input size="30" required="required" placeholder="password" name="pwd1"
            id="pwd1" type="password"> <span class="hint" id="pwd1Hint">Password
            is too short (must be at least 8 characters)</span> <br>
          Repeat Password:<br>
          <input size="30" required="required" placeholder="password" name="pwd2"
            id="pwd2" type="password"> <span class="hint" id="pwd2Hint">Passwords
            don't match</span><br>
          <br>
          <legend>Login Info</legend></fieldset>
        <br>
        <br>
        <fieldset id="bioInfo"> &nbsp;&nbsp; Brief Bio<br>
          <textarea wrap="soft" rows="6" cols="40" name="bio" id="bio"></textarea>
          <div id="charLimit">Limit: 140 characters. You have <span id="charsLeft">140</span>
            left.</div>
          <div id="selects">
            <div id="select1Div" style="float:left;margin-right:15px;"> Select
              Your &lt;something&gt; <br>
              <select name="firstSelect" id="firstSelect">
                  <option value="-1">Select a Car</option>
              </select>
              <br /><br /><button id="clearBtn" class="hide">Clear</button>
            </div>
            <div id="select2Div"> Select Your &lt;somethingElse&gt;
              <br>
              <select name="secondSelect" id="secondSelect">
                 <option value="-1">Result</option>
                &nbsp;
              </select>
              <br /><br /><button id="clearBtn"...

JavaScript

'use strict';
console.clear();

var cars = [{
  "car": "Cadillac"
}, {
  "car": "Toyota"
}, {
  "car": "Honda"
}];

var selects = document.getElementById('selects');
var clearBtn = document.getElementById('clearBtn');

cars.forEach((vehicle, index) => {
	var opt = document.createElement('option');
  var txt = document.createTextNode(vehicle.name);
  opt.setAttribute('value', index);
  opt.appendChild(txt);
  
  selects.appendChild(opt);
});

selects.addEventListener('change', function(e) {
	var opt = this.options[this.selectedIndex];
  var val = opt.value;
  if (val >= 0) {
    console.log(val + ': ' + opt.text);
  	clearBtn.setAttribute('class', 'show');
  } else {
  	clearBtn.setAttribute('class', 'hide');
  }
}, false);

clearBtn.addEventListener('click', function(e) {
		var max = selects.length - 0;
    for (var i = max; i >= 1; i--) {
        selects.remove(i);
    }
    this.setAttribute('class', 'hide');
}, false);