Assignment #4 JS

var $ = function (id) {
    return document.getElementById(id);
};
/*var Namestorage=localStorage.getItem("studentName") || "";
var ScoreStorage=localStorage.getItem("scoresArray") || "";
var scoresArray = ScoreStorage.split(',');
var studentName=Namestorage.split(',');*/

/**
 * --On Form Load--
 * Look for local storage info
 * retrive the Joinedstring form local storage
 * split each string into the glocal arrays
 *
 * --On Button CLick--
 * 0. You have 3 global arrays that hold: first name, last names, scores.
 * 1. The information from the 3 textboxes gets pushed to the 3 arrays
 * 2. each arrays gets joined into a string(joinedString)
 * 3. each joinedString gets into local storage
 * 3.1each array[i] gets dispayed in textarea + score averege
 */
var scoresArray = [];
var fNameArray = [];
var lNameArray = [];
var textarea = "";
var textareaLines = [];


var addScore = function () {
    var fName = $("first_name").value;
    var lName = $("last_name").value;
    //var fullName = fName + "," + lName;
    var score = parseInt($("score").value);

    if (fName == "" || lName == "") {
        alert("First and Last Names are Mandatory fields");
    } else if (score == null) {
        alert("Score is a mandatory field");
    } else if (isNaN(score) || score < 0 || score > 100) {
        alert("scores should be a number in a range between 1 to 100");
    } else {
        fNameArray.push(fName);
        lNameArray.push(lName);
        scoresArray.push(score);
        localStorage.fNames = fNameArray.join("|");
        localStorage.lNames = lNameArray.join("|");
        localStorage.scores = scoresArray.join("|");
        //

        // get the add form ready for next entry
        $("first_name").value = "";
        $("last_name").value = "";
        $("score").value = "";
        $("first_name").focus();
        //
        displayscore();


    }



};
var displayscore = function () {


    if (fNameArray.length == 0) {
        console.log("lenght of fNameArray is zero before localStorage");
        var firstNames = localStorage.getItem("fNames");
        if (firstNames != null) {

            fNameArray = firstNames.split('|');
            console.log(firstNames);
            var lasttNames = localStorage.getItem("lNames");
            lNameArray = lasttNames.split('|');
            var scoRes = localStorage.getItem("scores");
            scoresArray = scoRes.split('|');
        }
    }
    // clear texarea
    textarea = "";
    for (var i = 0; i < fNameArray.length; i++) {
        // this will display lastName , firstNAme : score
        // so that the sorting by last name works for this setup
        textarea += lNameArray[i] + ", " + fNameArray[i] + " : " + scoresArray[i] + "\n";
    }

    $("scores").value = textarea;
    //Avrage
    //1. Take scores from local storage
    //2. do avrage
    //3. display avrage
    var scoresString = localStorage.getItem("scores");
    if (scoresString != null) {

        scoresArray = scoresString.split('|');
        var sum = 0;
        for (var i = 0; i < scoresArray.length; i++) {
            sum += parseFloat(scoresArray[i]);
        }
        var avrage = sum / scoresArray.length;
        $("average_score").value = avrage.toFixed(2);
    }

    //


    /*
    var fName = $("first_name").value;
    var lName = $("last_name").value;
    var fullName = fName + "," + lName;

    console.log("hello");







    var nameString = "";
    for (var i = 0; i < studentName.length; i++) {
        nameString += studentName[i] + ":" + scoresArray[i] + "\n";
    }
    console.log("scoresArray");
    $("scores").value = nameString;

    if (studentName === 0) {
        var Namestorage = localStorage.getItem("studentName") || "";

        if (studentName > 0) {
            var studentName = Namestorage.split(',');
        }
    }

    */
};



var clearscore = function () {


    // remove the score data from the web page
    $("average_score").value = "";
    $("score").value = "";
    $("scores").value = "";
    $("first_name").focus();
    //$("scores").length = 0;
};

var sortscore = function () {

    $("scores").value = "";
    textareaLines = textarea.split("\n");
    console.log(textareaLines);
    textareaLines.sort();
    for (var i = 0; i < textareaLines.length; i++) {
        if (textareaLines.length != 0) {
            if (textareaLines[i] == "") {
                continue;
            }
            $("scores").value += textareaLines[i] + "\n";
            console.log(textareaLines[i]);
        }
    }
};

window.onload = function () {

    $("add_button").onclick = addScore;
    $("clear_button").onclick = clearscore;
    $("sort_button").onclick = sortscore;
    $("first_name").focus();
    displayscore();

};