JSFiddle - React, Tailwind, and code Playground

by Cioc Andrei

HTML

<body>
    <header>
        <img src="http://ace.ucv.ro/images/header/logo_ace.png" alt="logo" />
        <nav>
            <ul>
                <li class="active"><a href="#">Home</a>

                </li>
                <li><a href="#">About</a>

                </li>
                <li><a href="#">Portfolio</a>

                </li>
                <li><a href="#">Contact</a>

                </li>
            </ul>
        </nav>
    </header>
    <div class="mainHeader">
        <div class="main">
            <section>
                 <h2><a href="#" title="Boys">Boys</a></h2>

                <div id="boys"></div>
            </section>
            <section>
                 <h2><a href="#" title="Girls">Girls</a></h2>

                <div id="girls"></div>
            </section>
        </div>
    </div>
    <aside>
        <form class="form" id="form1">
            <p class="firstName">
                <input name="firstName" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Nume" id="firstNname" />
            </p>
            <p class="name">
                <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
            </p>
            <p class="name">
                <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
            </p>
            <p class="email">
                <input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
            </p>
            <p class="text">
                <textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
            </p>
            <div class="submit">
                <input type="submit" value="SEND" id="button-blue" />
                <div...

CSS

body {
    background-image: url('http://i.imgur.com/4RCKgDW.jpg');
    color: #000905;
    font-size: 87.5%;
    font-family: Arial, 'Lucida Sans Unicode';
    line-height: 1.5;
    text-align: left;
    margin: 0 auto;
    width: 70%;
    clear: both;
}
a {
    text-decoration: none;
}
a:link, a:visited {
    color: #0000FF;
}
a:hover, a:active {
    background: rgb(179, 220, 237);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(179, 220, 237, 1) 0%, rgba(41, 184, 229, 1) 50%, rgba(188, 224, 238, 1) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(179, 220, 237, 1)), color-stop(50%, rgba(41, 184, 229, 1)), color-stop(100%, rgba(188, 224, 238, 1)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(179, 220, 237, 1) 0%, rgba(41, 184, 229, 1) 50%, rgba(188, 224, 238, 1) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(179, 220, 237, 1) 0%, rgba(41, 184, 229, 1) 50%, rgba(188, 224, 238, 1) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(179, 220, 237, 1) 0%, rgba(41, 184, 229, 1) 50%, rgba(188, 224, 238, 1) 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, rgba(179, 220, 237, 1) 0%, rgba(41, 184, 229, 1) 50%, rgba(188, 224, 238, 1) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3dced', endColorstr='#bce0ee', GradientType=0);
    /* IE6-9 */
}
header img {
    width: 50%;
    height: auto;
    margin: 2% 0;
}
header nav {
    background: #1e5799;
    /* Old browsers */
    background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e5799), color-stop(50%, #2989d8), color-stop(51%, #207cca), color-stop(100%, #7db9e8));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #1e5799 0%, #2989d8 50%,...

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.init = function () {
    $('.main').on('click', 'button', $.proxy(this.onShowDetails, this));
    this.print();
};

Student.prototype.onShowDetails = function (event) {
    $(event.currentTarget).closest('article').find('.details').toggleClass('hide');
}
Student.prototype.print = function () {
    console.log(this.numStudents);
    for (var i = 0; i < this.numStudents; i++) {
        var button = '<button class="myButton">arata</button>';
        var list = '<article>';
        list += '<img src="' + this.listOfStudents[i].image + '" alt="poza"></br>' + button + '</br><div class="details">' + this.listOfStudents[i].firstName + ' ' + this.listOfStudents[i].lastName + '</br>Mate: ' + this.listOfStudents[i].mathGrade + '</br>Romana: ' + this.listOfStudents[i].romGrade + '</br>Media: ' + this.listOfStudents[i].averageGrade + '</br></div>';
        list += '</article>';
        if (this.listOfStudents[i].gender === "male") {

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

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



    }
    $('.details').addClass('hide');
};
$(document).ready(function () {


    var listOfStudents = [{
        firstName: 'Ion',
        lastName: 'Popescu',
        mathGrade: 8,
        romGrade: 5,
        gender: 'male',
        image: 'http://goo.gl/MJ0zsk'
    },

    {
        firstName: 'Cristi',
        lastName: 'Teleor',
        mathGrade: 5,
        romGrade: 6,
        gender: 'male',
        image: 'http://goo.gl/MJ0zsk'
    },

    {
        firstName: 'Ion',
        lastName: 'Creanga',
       ...