JSFiddle - React, Tailwind, and code Playground

by Adrian-Stefan Mihai

HTML

<h2 id="titlu">
</h2>

<table id="tabel" border="1" style="width:100%">
    <th>Nr.crt</th>
    <th>Poza</th>
    <th>Nume si prenume</th>
    <th>Nota mate</th>
    <th>Nota romana</th>
    <th>Media</th>
</table>

<h3 id="medietotala">
</h3>

CSS

th {
    font-size: 20px;
    font-family:"Arial";
    color: darkblue;
    padding: 10px 10px 10px 10px;
    text-align: center;
}
h2 {
    color: red;
}
h3 {
    color: indigo;
}
a {
    text-decoration: none;
    color: black;
    font-size: 18px;
}
a:hover {
    text-decoration: underline;
    color: green;
}

td {
    padding: 7px 7px 7px 7px;
    }

td:first-child {
    color:red;
    text-align: right;
}
td:nth-child(4), td:nth-child(5) {
    text-align: center;
    color:red;
    font-size: 18px;
}
td:nth-child(6) {
    text-align: center;
    background-color: red;
    color: white;
    font-size: 20px;
}

img {
    width: 40%;
}

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.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.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 () {

    document.getElementById("titlu").innerHTML = "This is the list from the " + this.className + " class.";

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

        document.getElementById(this.renderToId).innerHTML += "<tr><td>" + (i + 1) + "</td><td><img src="+this.listOfStudents[i].image + " alt=\"poza\"></td><td><a href=#>" + 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> ";
    }
    document.getElementById("medietotala").innerHTML += "Media...