JSFiddle - React, Tailwind, and code Playground

by Ramya Ranganathan

HTML

<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">
      <h1>CSCI E-3 Unit 3 Project, Part B</h1>
      <p class="whatlearn">Unit 3b Homework will exercise the DOM, browser
        Events and form handling. This assignment is worth half of the total point value for the Unit 3 project. 
The other half was Unit 3 Project: Part B, previously distributed as a ZIP file.
 You should complete Part A before working on Part B.</p>
      <h4>Add behavior and additional functionality to an HTML <em>FORM</em></h4>
      You'll be adding behavior to the form below, including adding some new
      form fields and sections. You will be adding some of the following
      behaviors and features to the form.&nbsp; Specifically, you must do four
      of the six (your choice) items below. Doing more
      than the minimum counts as extra credit. <br>
      <br>
      You may change the HTML if you like, to make a form that better fits your
      interests, make it look better, or provide a better user
      experience. You must make it clear to your grader which of the
      six behaviors you've implemented&mdash;this will be especially important if
      you change the form. <br>
      <ol>
        <li>There are two password fields on the form. You will write code that
          ensures that:</li>
        <ol>
          <li>Users must enter passwords of at least 8 characters.</li>
          <li>The two fields must match.</li>
          <li>Users receive feedback immediately if the passwords don't match,
            rather than only when the form is submitted.<br>
            <br>
          </li>
        </ol>
        <li>There is a textarea on the form labeled <em>Brief Bio</em>. This is going to be <em>really</em> brief. Your code will
          provide a countdown near the <em>140 character limit</em> caption
      ...

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

function displayForm() {
	console.log("Displaying form.");
	
	var theDIv = document.getElementById("formDiv");
	theDiv.style.display = "block";
	function wordMatch() {
		console.log("Matching Words.");
	
	//Grab the necessary elements and their values
	
	var word1 = document.getElementById("firstWord").value;
	var word2 = document.getElementById("secondWord").value;
	var output =document.getElementById("answer1");
	
	if(word1.match(word2))  { //check to see if words match
	output.innerHTML ="yes!";   //If yes,print "yes! " in output element;
	} else {                    // otherwise
	output.innerHTML ="no!";    //print "No! "
	}                           //print to span with id of "anserw1"
	}
	
	function reformat() {
		console.log("reformatting digits.");     //Grab the necessary elements and/or values.
		var the Digits = 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")
		
		document.getElementById("nineDigits").value = theDigits.replace(/^\d]/, '');
		
		if(theDigits.match(/\d{9}/) {
			output.innerHTML = theDigits.replace( /^(\d{3})(\d{2})(\d{4})$/, ' $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.innetHTML = input.length;
	}