JSFiddle - React, Tailwind, and code Playground

by Adrian-Stefan Mihai

HTML

<ul id="test">   
</ul>

JavaScript

function Student (className, listOfStudents, renderToId) {
    this.className = className;
    this.listOfStudents = listOfStudents;
    this.renderToId = renderToId;
    this.numStudents = listOfStudents.length;
    this.averageGrade();
    }

StudentsList.prototype.averageGrade = function() {
    for(var i = 0; i<this.numStudents; i++) {
        this.listOfStudents[i].averageGrade = (this.listOfStudents[i].mathGrade + this.listOfStudents[i].romGrade)/2;         
    }
};

Student.prototype.addStudent = function(student) {
    this.listOfStudents.push(student);
    this.numStudents++;
    }

Student.prototype.totalAverage = function() {
    var sum = 0;
    for (var i = 0; i<this.numStudents; i++) {
        sum += this.listOfStudents[i].averageGrade;
    }
    this.totalAverage = sum / this.numStudents;
    return this.totalAverage;
};
  
Student.prototype.removeStudent = function(firstName, lastName) {
    for (var i = 0; i<this.numStudents; i++) {
        if (this.listOfStudents[i].firstName === firstName && this.listOfStudents[i].lastName === lastName) {
            this.listOfStudents.splice(i,1);
            this.numStudents--;
            return true;
        }
    }
    return false;
};

Student.prototype.print = function () {
    for (var i = 0; i<this.numStudents; i++) {
        document.getElementById(this.renderToId).innerHTML += this.listOfStudents[i].firstName + " " + this.listOfStudents[i].lastName + " " + this.listOfStudents[i].mathGrade + " " + this.listOfStudents[i].romGrade + " " + this.listOfStudents[i].averageGrade + "\n";
    }
    document.getElementById(this.renderToId).innerHTML += "The general average grade of the students is " + this.totalAverage();
};

var listOfStudents = [
    {firstName:"Ion", lastName:"Popescu", mathGrade:8, romGrade:9},
    {firstName:"Andrei", lastName:"Ionescu", mathGrade:7, romGrade:6},
    {firstName:"George", lastName:"Vasilescu", mathGrade:8, romGrade:8},
    {firstName:"Andrada", lastName:"Voicescu",...