Unit 3B select options 1 (as posted in piazza)

by Carlos Ng

HTML

<form autocomplete="off" action="" name="hw4Form"><br>

        <fieldset name="LoginInfo">
          <div>
              <label for="username">Username</label>
              <input size="30" placeholder="username" name="username" id="username" type="text">
          </div>
           
          <div>
              <label for="password">Password</label>
              <input size="30" required="required" placeholder="password" name="pwd1" id="pwd1" type="password"> 
              <br>
                 <span class="hint" id="pwd1Hint">Password is too short (must be at least 8 characters)</span>
          </div>
          <div>
              <label for="password">Repeat Password</label>
              <input size="30" required="required" placeholder="password" name="pwd2" id="pwd2" type="password"> 
              <br>
                 <span class="hint" id="pwd2Hint">Passwords don't match</span>
          </div>
                  
          <legend>Login Info</legend>
        </fieldset>

        <br>

        <fieldset id="bioInfo">
            <label for="bio">Brief Bio</label>
            <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><br>

          <div id="selects">
            <div id="select1Div" style="float:left;margin-right:15px;"> Select
              Your &lt;Chain&gt; <br>
              
              <select name="firstSelect" id="firstSelect">
                <option>----</option>
              </select>
            </div>

            <div id="select2Div"> Select Your &lt;Chain Length&gt;
              <br>
              <select name="secondSelect" id="secondSelect">
                <option>----</option>
                &nbsp;
              </select>
            </div>
            <span id="feedback"></span>
           </div>

          <br>
          Contact Info<br>
              <fieldset name="Postal...

CSS

label {
    float: left;
    width: 110px;
}
form div {
    padding-bottom: 5px;
}

JavaScript

/* hw4b.js */



	/*-------------------------------------------------------------------------------------------------
	PASSWORD
	-------------------------------------------------------------------------------------------------*/

function validatePassword(){
    var password = document.getElementById('pwd1').value;
    console.log(password);
    var confirmPassword = document.getElementById('pwd2').value;
    var msg1 = document.getElementById('pwd1Hint');
    var msg2 = document.getElementById('pwd2Hint');
    
    if (password.length < 8) {
        //msg1.push("Your password must be at least 8 characters");
        msg1.innerHTML = "Your password must be at least 8 characters";

    }
    if (password.value !== confirmPassword.value){
        //the passwords don't match
        msg2.push("Your passwords don't match"); 
    } else {
        //the passwords match
        msg.push("Your passwords match");
    }
   return true;
}
    
    msg.addEventListener("keyup", "pwd1Hint");
    
    // compare teh values in the password fields
    if(password.value == confirmPassword.value){
        //The passwords match
        msg.innerHTML = "Passwords Match!"
    } else {
        //The passwords do not match
        msg.innerHTML = "Boo No Match"
    
}*/
 

	/*-------------------------------------------------------------------------------------------------
	Counting Bio Characters: enter max of 140 and stop
	-------------------------------------------------------------------------------------------------*/
    
	var maxChars = 140;
    var bioInput = document.getElementById("bio");
    var c = document.getElementById("charsLeft");
    c.innerHTML = maxChars;

	// All we need is events, the length property, and writing
	// to the DOM to make a counter

	bioInput.addEventListener("keydown", charsLeft);

    function charsLeft(e) {
        var len = bioInput.value.length;
        //console.log(len);
        if (len >= maxChars) {
        console.log(maxChars);
           ...