test 3B

by Larry Adams

HTML

<form autocomplete="off" action="" name="hw4Form"><br>
        <fieldset name="LoginInfo">
        <legend><strong>Login Info</strong></legend>
        <br>
        <label><strong>Username:</strong></label>
        <br>
        <input size="30" placeholder="username"
            name="username" id="username" type="text"> <br>
          <br>
          <label><strong>Password:</strong></label>
          <br>
          
              <input size="30" 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>
          <strong>ConfirmPassword:</strong><br>
          
                <input size="30" required placeholder="password" name="pwd2"
            id="pwd2" type="password"> <span class="hint" id="pwd2Hint">Passwords
            don't match</span><br>
          <br>
          <div><strong>* Password should consist of 8 characters</strong></div>
        </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>----</option>
              </select>
            </div>
            <div id="select2Div"> Select Your &lt;somethingElse&gt;
              <br>
              <select name="secondSelect" id="secondSelect">
                <option>----</option>
                &nbsp;
              </select>
            </div>
          </div>
          <br>
          Contact Info<br>
          <br>
          Address<br>
          <input size="30" placeholder="Street...

CSS

body {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
	line-height: 1.428571429;
	color: #333;
}
.container {
	width: 80%;
	margin: auto;
}

h4 {
	border-top: 1px solid black;
	padding-top: 1em;
	width: 95%;
}

span {
    color: red;
}
.show {
    display: inline;
}
.hide {
    display: none;
}
.match {
    color : green;
}

.hint {
	display:none;
	color:red;
}

.button {
    text-indent:0;
    border:1px solid #eda933;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:65px;
    line-height:65px;
    padding: .5 em;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #cd8a15;
    background-color:#f6b33d;
}

JavaScript

/* hw3b.js */

// Question 1 is being completed by student and the code is based on Robert's Frenette video lecture on April 19th
var pwd1 = document.getElementById('pwd1');
var pwd2 = document.getElementById('pwd2');
var pwd1Hint = document.getElementById('pwd1Hint');
var pwd2Hint = document.getElementById('pwd2Hint');

var minLen = 8;
var maxLen = 8;

pwd1.addEventListener('blur', function() {
    var len = this.value.length;
    
    if (len < minLen || len > maxLen) {
        pwd1Hint.innerHTML = 'Value must be between 5 and 10 charcters long';
        pwd1Hint.setAttribute('class', 'show');
        
        pwd2.value = '';
        pwd2.setAttribute('disabled', 'disabled');
        pwd2Hint.innerHTML = '';
    } else {
        pwd1Hint.setAttribute('class', 'hide');
        pwd2.removeAttribute('disabled');
        pwd2.focus();
    }
});

pwd2.addEventListener('keyup', function() {
    var pwd1Val = pwd1.value;
    var pwd2Val = pwd2.value;
    
    if (pwd1Val == pwd2Val) {
        pwd2Hint.innerHTML = 'Match!';
        pwd2Hint.setAttribute('class', 'match');
    } else {
        pwd2Hint.innerHTML = 'No match';
        pwd2Hint.setAttribute('class', 'show');
    }
});    

pwd1.focus();
pwd2.setAttribute('disabled', 'disabled');