JSFiddle - React, Tailwind, and code Playground

by kristenconnal

JavaScript

/* hw5.js */
/* Kristen Connal 2018 */

window.onload = function() { //Begin self-invoking function

  // Task 1 - Matching passwords of at least 8 characters with live feedback
  // Define variables
  var pwd1 = document.getElementById("pwd1");
  var pwd2 = document.getElementById("pwd2");
  var pwd1Hint = document.getElementById("pwd1Hint");
  var pwd2Hint = document.getElementById("pwd2Hint");

  // Add event listeners to password boxes for keyup
  pwd1.addEventListener("keyup", passLength);
  pwd2.addEventListener("keyup", passMatch);

  function passLength() {
    // If password 1 is less than 8 characters, display password one hint
    if (this.value.length < 8) {
      pwd1Hint.style.display = "block";
      // If password 1 is at least 8 characters, hide password one hint
    } else {
      pwd1Hint.style.display = "none";
    };
  };

  function passMatch() {
    // If password 2 does not match password one, display password two hint
    if (this.value != pwd1.value) {
      pwd2Hint.style.display = "block";
      // If password 2 does match password one, hide password two hint
    } else {
      pwd2Hint.style.display = "none";
    };
  };

  // Task 2 - Brief bio limited to 140 characters with backwards countdown
  // Define variables
  var bioText = document.getElementById("bio");
  var charsLeft = document.getElementById("charsLeft");

  // Add event listener to bio box for keyup
  bio.addEventListener("keyup", bioCount);

  // Create counting function
  function bioCount() {
    // If value in box is less than 141, aka 140 characters or less, count how many are left
    if (this.value.length < 141) {
      charsLeft.innerHTML = 140 - this.value.length;
      // If value in box is greater than 140, make negative count of how many characters are over
    } else if (this.value.length > 140) {
      charsLeft.innerHTML = 0 - this.value.length + 140;
    };
  };

  // Task 3 - Selection from pull-down menu populates another pull-down menu
  // Define...