JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<div id="header">
    <div id="randomizeNotContDiv">
        <div id="randomizingNotification">randomizing...</div>
    </div>

    <div id="page_title"><h1>Welcome to Classtech Shift Scheduler!</h1></div>

    <div id="helper_functions_div">
        <div id="enter_names_div">
            <a href="" id="enter_names">Enter Names</a>
        </div>
   </div>
</div>
    
    <div id="main_content">
    <div id="name_tracker">

      

        <textarea name="upcoming_pick" cols="10" rows="1" class="picker_names" id="upcoming_pick"></textarea>
        <textarea name="current_pick" cols="10" rows="1" class="picker_names" id="current_pick"></textarea>
        <textarea name="previous_pick" cols="10" rows="1" class="picker_names" id="previous_pick"></textarea>



    </div>

JavaScript

var nameArray;

window.onload = pageLoad;

function pageLoad() {
    $("#randomizingNotification").hide();
    $("#enter_names").click(orderNames);    
}

function orderNames(event) {
    // Prevent the link's default action
    event.preventDefault();
    
    nameArray = getNames();
    // console.log('nameArray', nameArray);
    randomizeNames();
}

function getNames() {
    var initialsString = prompt("Please enter initials, separated by a comma (e.g LK,AS,NM)");
    console.log('initialsString', initialsString);
    nameArray = initialsString.split(",");
    //console.log('nameArray', nameArray);
    return nameArray;
}

function randomizeNames() {
    //console.log('randomize names');
    $("#randomizingNotification").show();
    var timer = setTimeout(function (){
        randomize(nameArray);
        $("#randomizingNotification").hide();
        displayNames();
    }, 1000);
    // $("#randomizingNotification").hide();
    // clearTimeout(timer);
}

function randomize(array) {
    // console.log('array', array);
    for (var i = 0; i < array.length; i++ ) {
        var randNum = Math.floor(array.length * Math.random()) //random number between 0 and length of array (rounded down
        var temp = array[i];
        array[i] = array[randNum];
        array[randNum] = temp;
    }
    //console.log('randomized array', array);
}

function displayNames() {
    var curr, up, prev, current, upcoming, previous;
    curr = 0;
    up = 1;
    prev = null

    //console.log('nameArray', nameArray, 'current', current, 'upcoming', upcoming);
    current = nameArray[curr];
    upcoming = nameArray[up];

    $("#upcoming_pick").val(upcoming);
    $("#current_pick").val(current);
}