JSFiddle - React, Tailwind, and code Playground

by jazahn

HTML

<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 <input type="checkbox" id="showCheck"/><br>
              
          <div id="contact" class="hide">
          <br>
          Address<br>
          <input size="30" placeholder="Street Address" name="address" id="address"
            type="text"><br>
          <br>
          City&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;...

CSS

.container {
	width: 100%;
	margin: auto;
}

h4 {
	border-top: 1px solid black;
	padding-top: 1em;
	width: 95%;
}

.hint {
	display:none;
	color:red;
}



.hide {
    display: none;
}

.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

// 1.
// passwords must be 8 chars
// two fields must match
// immediate feedback (onblur or onkeyup)
var $pwd1 = $("#pwd1");
var $pwd1h = $("#pwd1Hint");
var $pwd2 = $("#pwd2");
var $pwd2h = $("#pwd2Hint");

$pwd1.on("blur", function(e){
    if($pwd1.val().length < 8){
        $pwd1h.show();
    } else {
        $pwd1h.hide();
    }
});

var mylistener = function(e){
    if($pwd1.val() != $pwd2.val()){
        $pwd2h.show();
    } else {
        $pwd2h.hide();
    }
}

$pwd2.on("keyup", mylistener);
$pwd1.on("keyup", mylistener);

// 2.
// textarea 140 limit
// stop typing or show how far over
var $bio = $("#bio");
var $charsLeft = $("#charsLeft");

$bio.on("change", function(e){
    console.log(e);
    
    var left = 140 - $bio.val().length;
    $charsLeft.html(left);
    
    if($bio.val().length > 10){
        $bio.val($bio.val().substr(0, $bio.val().length-2));
    }
});


// 3.
// select to another select
var $first = $("#firstSelect");
var $second = $("#secondSelect");

var obj = {
    "one": ['1', '2', '3', '4', '5', '6', '7'],
    "two": ["one", "two", "three", "four"]  
};

for(index in obj){
    var $option = $(document.createElement("option"));
    $option.val(index);
    $option[0].appendChild(document.createTextNode(index));
    $first[0].appendChild($option[0]);
}

$first.on("change", function(e){
    obj[$first.val()].forEach(function(item){
        var $option = $(document.createElement("option"));
        $option.val(item);
        $option[0].appendChild(document.createTextNode(item));
        $second[0].appendChild($option[0]);
    });
    
});




// 4.
// have a subsection appear if a checkbox is checked

$("#showCheck").on("click", function(e){
    $("#contact").toggle();    
});




// 5.
// phone number reformat
// turn a number into (xxx)xxx-xxxx




// 6.
// check to make sure both aren't blank
// provide a message
$("[name='hw4Form']").on("submit", function(e){
    if(!$("#phone").val() && !$("#email").val()){
       ...