Project 3B

by Larry Adams

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 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 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>----</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 Address" name="address" id="address"
            type="text"><br>
          <br>
          City&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
       ...

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%;
}

.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 */


/*
function displayForm() {
    console.log("Displaying form.");
    
    // Display the form
    document.getElementById("formDiv").style.display = "block";
}
*/

function wordMatch() {
    console.log("Matching words.");
    
    // Grab the necessary elements
    var word1 = document.getElementById("firstWord").value;
    var word2 = document.getElementById("secondWord").value;
    var output=document.getElementById("answer1");
    
    // Check to see if words match. If yes,
    // print "Yes!" in output element; otherwise
    // print "No!"
    // (Print to span with id of "answer1")
    if (word1 === word2) {
        output.innerHTML = "Yes!";
    } else {
        output.innerHTML = "No!";
    }
}

/*
function reformat() {
    console.log("Reformatting digits.");
    
    //Grab the necessary elements and/or values
    var theDigits = document.getElementById("nineDigits").value;    
    var output=document.getElementById("answer2");

    // If we have nine digits, print out
    // digit in xxx-xx-xxxx format; otherwise
    // print out "Need 9 digits (in a row)" 
    // (Print to span with id of "answer2")
    if (theDigits.match(/^(\d{3})(\d{3})(\d{3})$/)) {
        output.innerHTML = theDigits.replace(/(\d{3})(\d{3})(\d{3})/, '$1-$2-$3');
    } else {
        output.innerHTML =  "Need 9 digits (in a row)";
    }
    
}

function countCharacters() {
    console.log("Counting characters.");
    
    // Grab the necessary elements and/or values
    var input = document.getElementById("countBox").value;
    var output = document.getElementById("answer3");
    
    // Count characters and output them to span with
    // id of "answer3"
    output.innerHTML = input.length;
}
*/

// Add event handlers
//document.getElementById("showForm").onclick = displayForm;
document.getElementById("firstWord").onchange = wordMatch;
document.getElementById("secondWord").onchange = wordMatch;

//document.getElementById("nineDigits").onkeyup =...