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

JavaScript

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 password1 = document.getElementById("firstWord").value;
    var password2 = 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 (password1 === password2) {
        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;
}