JSFiddle - React, Tailwind, and code Playground

by Jordan Marechal

HTML

<!DOCTYPE html>
<html>
  <head>
    <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">
 <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="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="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"...

JavaScript

'use strict';
console.clear();


function() {
var bioInfo = document.getElementById("bioInfo");// identifiers
var charLimit = document.getElementById("charLimit");


bioInfo.addEventListener ("keyup", function() {   //using keyup method

var charLeft = bio.value.split(' ');// using the string split
charLimit.innerHTML = charLeft.length;

 if(charLeft.length <= 140);
 }
 	document.getElementById('charLimit').style.color = "blue";
  }
  if(charLeft.length > 140) {
  
  document.getElementById('charLimit').style.color = "red";
  }

console.log(characters); // output written to console.
});


//console.log(wordCount);