JSFiddle - React, Tailwind, and code Playground

by Muddasar Ashfaq

HTML

<body onload="inputUserInfo()">
    <!-- Ranking Table -->
    <table id="rankTable">
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Top Score</th>
        </tr>
        <tr>
            <td id="_firstName"></td>
            <td id="_lastName"></td>
            <td></td>
        </tr>
    </table>

    <!-- Registration form -->
    <form id="userForm" onsubmit="return false">
        <!-- Image in the form -->
        <img class="regIcon" src="img/Icon-Register.png">
        <br>
        <br>
        <br>
        <br>
        <br>
        <!-- text input elements -->
        First Name: <span class='error'> *</span>
        <input type="text" id="firstNameInput" name="fname" required>
        <br>
        <br> Last Name: <span class='error'> *</span>
        <input type="text" id="lastNameInput" name="lname" required>
        <br>
        <br> Username: <span class='error'> *</span>
        <input type="text" id="userNameInput" name="username" required>
        <br>
        <br> Password: <span class='error'> *</span>
        <input type="password" id="passWordInput" name="password" required>
        <br>
        <br>
        <!-- Register button -->
        <input type="submit" id="regSubmit" name="register" value="REGISTER" onclick="storeUserDetail()">
        <br>
        <br>
        <!-- Success message -->
        <div id="regMessage"></div>
    </form>

    <!-- Login form -->
    <div id="loggedIn">
        <!-- <input type="button" id="logOut" name="logout" value="LOGOUT" onclick="logoutUser()"> -->
        <form id="userForm" onsubmit="return false">
            <!-- Image in the form -->
            <img class="logIcon" src="img/cas-padlock-icon.png">
            <br>
            <br>
            <br>
            <br>
            <br>
            <!-- text input elements -->
            <span id="inputText">Username:</span>
            <input type="text" id="userNameInput" name="username" required>
        ...

JavaScript

/*-------------------------------------------------------------------------------------------------------
  
                                             REGISTER
  
-------------------------------------------------------------------------------------------------------*/

function storeUserDetail() {
    var fNameInput = document.getElementById("firstNameInput").value;
    var lNameInput = document.getElementById("lastNameInput").value;
    var uNameInput = document.getElementById("userNameInput").value;
    var pWordInput = document.getElementById("passWordInput").value;
    if (fNameInput === "") {
        document.getElementById("regMessage").innerHTML = "<span class='error'>Please enter your First Name.</span>";
    } else if (lNameInput === "") {
        document.getElementById("regMessage").innerHTML = "<span class='error'>Please enter your Last Name.</span>";
    } else if (uNameInput === "") {
        document.getElementById("regMessage").innerHTML = "<span class='error'>Please enter your Username.</span>";
    } else if (pWordInput === "") {
        document.getElementById("regMessage").innerHTML = "<span class='error'>Please enter your Password.</span>";
    } else {
        var storeDetails = {};
        storeDetails.firstName = document.getElementById("firstNameInput").value;
        storeDetails.lastName = document.getElementById("lastNameInput").value;
        storeDetails.username = document.getElementById("userNameInput").value;
        storeDetails.password = document.getElementById("passWordInput").value;
        localStorage[storeDetails.username] = JSON.stringify(storeDetails);
        window.location.replace("http://localhost/login.php");
    }
}

/*-------------------------------------------------------------------------------------------------------
  
                                            LOG IN
  
-------------------------------------------------------------------------------------------------------*/

function loginUser() {
    var...