JSFiddle - React, Tailwind, and code Playground

by Adrian-Stefan Mihai

HTML

<body background="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSo81dIykYesjFKrQoPuJbSNVyy4uKUmy3Oy2VrMzHBWlFFt3y_">
    <header class="mainHeader">
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTpiN_Xcpzds1xpSy4EkZ9nNMZax6WgCYqiM6zJ1UhQGpCQL2ar" alt="logo facultate">
    </header>
    <nav class="navigationBar">
        <ul>
            <li>
                <button class="btn">Admitere</button>
            </li>
            <li>
                <button class="btn">Despre noi</button>
            </li>
            <li>
                <button class="btn">Invatamant</button>
            </li>
            <li>
                <button class="btn">Cercetare</button>
            </li>
        </ul>
    </nav>
    <aside>
        <section>
            <header>
                <img src="http://www.unitbv.ro/portals/31/Imagini/Admitere%20doctorat.jpg" alt="admitere">
            </header>
            <article class="calendar">Calendar Admitere 2015
                <ul>
                    <li>5-14 iulie depunerea dosarelor</li>
                    <li>15-17 iulie concurs de dosare</li>
                    <li>18 iulie afisarea rezultatelor</li>
                    <li>19-20 iulie depunerea contestatiilor</li>
                    <li>21 iulie afisarea rezultatelor finale</li>
                </ul>
            </article>
        </section>
        <section class="formular">
            <header>
                <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSs0igwx9_hW17uuv7_rVFqbgjeSxOEZsuxEK_Fmb47dhltmQYDNQ" alt="inscriere">
            </header>
            <form method="POST" class="form">Nume:
                <br>
                <input type="text" id="nume" name="nume" autofocus required />
                <br>Prenume:
                <br>
                <input type="text" id="prenume" name="prenume" required />
                <br>Nota mate:
                <br>
                <input type="number" id="notamate"...

CSS

.mainHeader img {
    width: 95%;
    display: block;
    margin: 0 auto 40px auto;
}
.navigationBar {
    margin-bottom: 40px;
}
.navigationBar li {
    display: inline;
    margin-left: 12px;
    margin-right: 10px;
}
.btn {
    background: #3498db;
    background-image: linear-gradient(to bottom, #993D3D, #1919FF);
    border-radius: 28px;
    font-family: Arial;
    color: #ffffff;
    font-size: 16px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
}
.btn:hover {
    background: #3cb0fd;
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
    text-decoration: none;
}
main {
    margin-left:25px;
    width: 65%;
}
.imgOfStudents img {
    width: 100%;
    height: 100px;
}
.imgOfStudents {
    border: 1px solid #0000ff;
    width: 120px;
    float:left;
    margin-right: 30px;
    margin-bottom: 40px;
}
.infoOfStudents {
    font-size:14px;
    padding-left:2px;
}
aside {
    float: right;
    width: 30%;
}
aside img {
    padding-top: 50px;
    width: 200px;
    display: block;
    float: left;
    margin: 0 auto 0 auto;
}
article.calendar {
    padding-top: 20px;
    float: left;
}
.formular img {
    margin-bottom: 25px;
}
.formular input {
    padding-bottom: 2px;
    margin-bottom: 10px;
}
footer.clear {
    padding-top: 50px;
    clear:both;
}
.copyright1 {
    float:left;
    padding-left: 20px;
}
.copyright2 {
    float:right;
    padding-right: 20px;
}
.infoOfStudents p {
    margin: 5px 0 5px 2px;
}

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;
    }
    this.init();
}

Student.prototype.print = function () {

    var button1 = "<button type=\"button\" class=\"arata\">Arata notele</button>";
    for (var i = 0; i < this.numStudents; i++) {
        var aux = "<div class=\"imgOfStudents\">";
        aux += "<img src= \"" + this.listOfStudents[i].image + "\" class=\"imagini\" alt=\"poza\">" + button1 + "<div class=\"infoOfStudents\"><p>Nume:" + this.listOfStudents[i].firstName + " " + this.listOfStudents[i].lastName + "</p><p>Mate:" + this.listOfStudents[i].mathGrade + "</p><p>Romana:" + this.listOfStudents[i].romGrade + "</p><p>Media:" + this.listOfStudents[i].averageGrade + "</p></div></div>";
        if (this.listOfStudents[i].gender === "male") {

            $("#boys").append(aux);
        } else {

            $("#girls").append(aux);
        }

    }
    $(".infoOfStudents").hide();
};

Student.prototype.init = function() {
    //console.log(this);
    //console.log(this.onGradesButton);
    $("section").on("click", "button", $.proxy(this.onGradesButton, this));
    $("form").on("submit", $.proxy(this.submitForm, this));
    this.print();
}

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.submitForm = function(event) {
    event.preventDefault();
    var nume = $("#nume").val();
    var prenume = $("#prenume").val();
    var notaMate = parseInt($("#notamate").val());
 ...