JSFiddle - React, Tailwind, and code Playground

by Cioc Andrei

HTML

<h1>This is the list of the class XII B</h1>
<div id="myList"></div>

CSS

table {
    border-collapse: collapse;
    width: 80%;
}

table, th, td, img {
    border: 1px solid black;
    text-align: center;
}

td:first-child {
    margin-bottom: 0;
    background: #DBDBDB;
    font-weight: bold;
}
img {
    margin: 4px auto 0 auto;
}

th {
    background-color: green;
    color: white;
}

a {
    font-weight: bold;
   color: #000;
   text-decoration: none; 
    padding: 0 auto 0 auto;
}

a:hover {
    padding: 0 auto 0 auto;
    text-decoration: underline;
    
}
a:visited {
    color: #00FF00;
}

h1 {
    color: #2B3038;
}

JavaScript

function Student(className, listOfStudents, renderToId) {
    this.className = className;
    this.listOfStudents = listOfStudents;
    this.renderToId = renderToId;
    this.numStudents = listOfStudents.length;
    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++;
    this.listOfStudents[this.numStudents - 1].averageGrade = (this.listOfStudents[this.numStudents - 1].mathGrade + this.listOfStudents[this.numStudents - 1].romGrade) / 2;
};

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.calculateAverage = 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.print = function () {

    var list = '<table> <tr><th>Nr Crt</th><th>Poza</th><th>Nume</th><th>Mate</th><th>Romana</th><th>Media</th></tr>';

    for (var i = 0; i < this.numStudents; i++) {

        list += '<tr><td>' + i + '</td><td><img src="' + this.listOfStudents[i].image + '" alt="poza"></td><td><a href="elev' + i + '.html">' + this.listOfStudents[i].firstName + ' ' + this.listOfStudents[i].lastName + '</a></td><td>' + this.listOfStudents[i].mathGrade + '</td><td>' + this.listOfStudents[i].romGrade + '</td><td>' + this.listOfStudents[i].averageGrade + '</td></tr>';
    }
    list += '</table>';
    var tableElement =...