Unit 3B

by Lucille Kenney

HTML

<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><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>
          <br>
          Address<br>
          
          <input size="30" placeholder="Street Address" name="address" id="address"
            type="text"><br>
          <br>
          City&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
         ...

JavaScript

/* hw3b.js */



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

	/*-------------------------------------------------------------------------------------------------
	Counting Bio Characters max of 140
	-------------------------------------------------------------------------------------------------*/
    
	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("keyup", charsLeft);

    function charsLeft(e) {
        var len = bioInput.value.substring(0, 139).length;
        //console.log(len);
        if (len >= maxChars) {
        console.log(maxChars);
            e.preventDefault();
           
        } else {
            c.innerHTML = maxChars - len-1;
        }
    }

	/*-------------------------------------------------------------------------------------------------
	SELECT LIST
	-------------------------------------------------------------------------------------------------*/

 /*  First, populate the select.  
     For each element in the "selectList.fruits" array,
      we will create an <option> element, give it a
      text node that contains its label, set the 
      'value' attribute on our new <option> element, and 
      finally, add it to the <select> element. 
 */

 var sel1 = document.getElementById("firstSelect");
 var sel2 = document.getElementById("secondSelect");


 var selectList = {
     "chains": ["rice", "snake", "omega", "neoprene"]
 }
 
 //var riceLength = 
 
 
 

 for (var i = 0; i < selectList.chains.length; i++) {
     //create <option>
     var s = document.createElement("option");
     //create text node
     var t =...