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="output"></div>
          <div id="selects">
            <div id="select1Div" style="float:left;margin-right:15px;"> Select
              Your Car; <br>
              <select name="firstSelect" id="firstSelect">
                  <option value="-1">Select a Car</option>
              </select>
              <br /><br /><button id="clearBtn" class="hide">Clear</button>
            </div>
            <div id="select2Div"> Select Your Result;
              <br>
              <select name="secondSelect" id="secondSelect">
                 <option value="-1">Result</option>
                &nbsp;
              </select>
              <br /><br /><button id="clearBtn"...

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

'use strict';
console.clear();

function validateForm (){

var email = document.form["Email address"] ["email"].value;
var phone = document.form["Phone Number"] ["phone"].value;

if (email==null||email==""||phone==null||phone==""){
	alert(" a phone or email must be entered");
  return false;
}
}