JSFiddle - React, Tailwind, and code Playground

by donniec

HTML

<table id="grades">
    <thead>
        <th>Student</th>
        <th>Algebra</th>
        <th>Biology</th>
        <th>Civics</th>
        <th>Driving</th>
        <th>Economics</th>
        <th>Average</th>
    </thead>
    <tbody></tbody>
    <tfoot><td colspan="7"><button onClick="calculate();">Calculate</button></td></tfoot>
</table>

SCSS

button {
    width: 100%;
    text-transform: uppercase;
}
#grades {
    border: 1px solid black;
    th, td {
        border: 1px solid black;
        padding: 5px;
    }
    tr:nth-child(even) td{
        background-color: #ccc;
    }
    tfoot td {
        background-color: lightblue;    
    }
    tr.chrome {
        background-color: goldenrod;   
    }
}

JavaScript

var $ajaxRequest = (function () {
    function call(url) {
        var request = new XMLHttpRequest();
        request.open("post", url, true);
        request.responseType = "json";
        //request.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); //needed for gist, if using the gist
        request.send();
        return request;
    }
    return {
        call: call
    };
})();

var StudentsService = (function () {
    var url = "http://beta.json-generator.com/api/json/get/E4Q7Eup"; //"/gh/gist/response.json/36340ca6160e681a884e/",
        students = null;

    function get(callback) {
        //cache
        if (students) {
            if (callback) {
                callback(students);
            }
            return;
        }

        var request = $ajaxRequest.call(url);
        request.onload = function (data) {
            students = data.target.response;
            if (callback) {
                callback(students);
            }
        };

        return request;
    }

    return {
        get: get
    };
})();

function calculate() {
    table = document.querySelector("#grades tbody");
    StudentsService.get(function (students) {
        var grades = students.map(function (student) {
            return [student.name,
                    student.grades.algebra,
                    student.grades.biology,
                    student.grades.civics,
                    student.grades.driving,
                    student.grades.economics];
        });
        grades.sort();
        
        addStudents(grades);
    });
}

var table;
//adds students and grades to the table and calculates the average
function addStudents(grades) {
    grades.forEach(function (grade) {
        var row = table.insertRow(),
            total = 0,
            rowSize = grade.length;
        
        for(var i=0; i < rowSize; i++){
            if(i > 0){
                total += grade[i];
            }
           ...