JSFiddle - React, Tailwind, and code Playground

by cgack

HTML

<h1>Workout Diary</h1>	
<!-- User is Not logged in -->
<div id="signInForm" class="notSignedIn">
    <label for="username">Username:</label>
    <input type="text" id="username">
    <label for="password">Password:</label>
    <input type="text" id="password">
    <button id="signIn">Sign In</button>
</div>
<br>
<!-- User Is Logged In -->
<div class="signedIn">
    <button id="logout">Logout</button>
    <ul id="navMenu">
        <li><a href="#defineWorkout">Define Workouts</a>
        </li>
        <li><a href="#storeWorkout">Log Workout</a>
        </li>
        <li><a href="#viewHistory">View History</a>
        </li>
    </ul>
    <div id="defineWorkouts">
        <label for="defineName">Define Name</label>
        <input type="text" id="defineName">
        <label for="defineType">Define Type</label>
        <input id="defineType" type="text">
        <label for="defineDesc">Description</label>
        <textarea id="defineDesc"></textarea>
        <button id="saveDefinition">Save Definition</button>
    </div>
    <div id="logWorkout">
        <label for="chooseWorkout">Workout:</label>
        <select name="" id="chooseWorkout">
            <!-- populated via script -->
        </select>
        <label for="workoutResult">Result:</label>
        <!-- input based on the type of the workout chosen -->
        <label for="notes">Notes:</label>
        <textarea id="notes"></textarea>
    </div>
    <div id="viewHistory"></div>
</div>

CSS

#defineWorkouts {
		    display: none;
		}
		#logWorkout {
		    display: none;
		}
		#viewHistory {
		    display: none;
		}

JavaScript

var doLogout = function () {
    $(".notSignedIn").show();
    $(".signedIn").hide();
};
doLogout();


$("#signIn").on("click", function () {
    // do authentication
    $(".notSignedIn").hide();
    $(".signedIn").show();
});

$("#logout").on("click", doLogout);

$("#navMenu > li > a").on("click", function () {
    alert($(this));
});