JSFiddle - React, Tailwind, and code Playground

by Koding Kamp

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="mainContainer">
	<h3 id="screenTitle"></h3>
	<section id="content"></section>
	<section id="foot"></section>
</main>

JavaScript

// Global Variables
var login = [["Kamp", "Duong", 0],	// "Username", "Password", Index for team[]
			 ["Luis", "Mendez", 1],
			 ["Nicolas", "Caceda", 2],
			 ["Trevor", "Evans", 0],
			 ["Brandon", "Schultz", 1]];

// Array to hold the different team names and their wins and losses
var team = [["Fragile Fingertips", 4, 2],
			["Busted Back Bones", 3, 3],
			["Utter Uppercuts", 2, 4]];

var accounts = login.length;	// Holds integer corresponding to the next index for account creation
var activeAccount = 0;	// Variable used to hold index of active account

// Run are load
$(document).ready(function(){
	createMainMenu();	//creates main menu
});

// Function for creating the main menu
function createMainMenu(){
	$("#screenTitle").html("Basket Ball Z Kai");
	$("#content").html('User: <br><input id="userNameInput" type="text"><br>\
		Pass: <br><input id="passWordInput" type="password"><p />\
		<input type="button" value="Login" onclick="checkLogin()">\
		<input type="button" value="Create New Account" onclick="createCreateMenu()">');
    $("#foot").html('');
}

// Compare Input Fields to Values in Login Array
function checkLogin(){
	var tempName = $("#userNameInput").val();
	var tempPass = $("#passWordInput").val();

	// Error Checking: Ask user to enter values into input fields
	if(tempName == "" && tempPass == ""){
		alert("Please enter a Username and Password.")
		return;
	} else if (tempName == ""){
		alert("Please enter a Username.");
		return;
	} else if (tempPass == ""){
		alert("Please enter a Password.");
		return;
	}

	// Loop for comparing each index of login[] with input fields
	for(var i = 0; i < accounts; i++){
		if(tempName == login[i][0] && tempPass == login[i][1]){
			activeAccount = i;
			createProfileScreen();
			break;
		} else if (i == accounts - 1){
			alert("Username or Password incorrect.");
		}
	}
}

// Create Create Account Menu
function createCreateMenu(){
	$("#screenTitle").html('Create New Account');
	$("#content").html('User: <br><input...