JSFiddle - React, Tailwind, and code Playground

by Jonathon Mascorella

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<div class="container">
  <div class="row space-top">
    <div class="col-xl-1">
      <!-- Open the jumbotron -->
      <div class="jumbotron">
        <h1 class="display-4">Hello there!</h1>
        <p class="lead">We'd like to know who you are and say hello!</p>
        <hr class="my-4">

        <form id="signupForm">
          <div class="form-group">
            <label>Enter your first name:</label>
            <input class="form-control" type="text" id="firstName" />
          </div>
          <div class="form-group">
            <label>Enter your last name:</label>
            <input class="form-control" type="text" id="lastName" />
          </div>

          <div class="form-group">
            <label for="userEmail">Email address</label>
            <input type="email" class="form-control" id="userEmail" placeholder="[email protected]">
          </div>

          <a class="btn btn-success" href="#" id="sayHello">Sign me up!</a>
        </form>

        <br />
        <span id="sayHelloBack"></span>
        <span id="alert"></span>
      </div>
    </div>
    <!-- Close the jumbotron -->
  </div>
</div>

CSS

.space-top {
  margin-top: 10px;
}

/* Class = . (period) */
/* ID = # (hash tag) */
/* elements */
/* 
div {
  
}

p.thisClass { 
  
}

.className { 

}

#idName {
  
  
}
*/

JavaScript

/* jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
}); */

newUser = [];

/* var form = $( "#signupForm" );
form.validate(); */

$("#sayHello").click(function() {
	
  //Create a temp object to save data to
	tempUser = {};

	if (newUser.length == 0){
  	tempUser.firstName = $("#firstName").val();
    tempUser.lastName = $("#lastName").val();
    tempUser.email = $("#userEmail").val();
    
    // Put the tempUser object into the newUser
    newUser.push(tempUser);
    
    $("#sayHelloBack").text("Welcome, " + newUser[0].firstName + "! It is nice to meet you.");
		
    
  } else if (newUser.length > 0){
  
  	$("#alert").text("You have already tried to sign up!");
    $("#firstName").val(newUser[0].firstName);
  }
  
  //alert( "Valid: " + form.valid() );
  });