JSFiddle - React, Tailwind, and code Playground

by Joe Pigott

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<br />
<textarea id='type'></textarea>
<br />
<br />
<input id='input'>
<br />
<br />
<button id='b'><span class='fa fa-plus-square-o fa-2x'></span>

</button>
<ul id='ul'></ul>

CSS

#type, #input {
    border-radius: 10px;
    background: #dadae3;
    color: #59ACFF;
    border: 1px solid #dadae3;
    
}
#type {
    border-bottom-right-radius: 0;
}
#type:hover, #input:hover {
    background: #c4c4cc;
    color: #488CCF;
    border: 1px solid #c4c4cc;
}
#type:hover::-webkit-input-placeholder {
    color: #59ACFF
}
#input:hover::-webkit-input-placeholder {
    color: #59ACFF
}
#type:focus, #input:focus {
    border: 1px solid #59ACFF;
    outline: 0;
}
button {
    height: 30px;
    background: #dadae3;
    border-radius: 10px;
    border: 1px solid #dadae3;
    color: #59ACFF;
    cursor: pointer;
}
button:hover {
    background: #c4c4cc;
    color: #488CCF;
    border: 1px solid #c4c4cc;
}
button:focus {
    outline: 0;
}

JavaScript

// Update the posts every 10 seconds
setInterval(function () {
    console.log('Updating posts...');
    $('ul .time').each(function (id, span) {
        time = Math.round((new Date() - $(span).data('timestamp')) / 60000);
        $(span).text(time);
    });
}, 10000);

$('#b').click(function () {
    var v = $('#type').val();
    var u = $('#input').val();
    $('#type, #input').css('border', '');

    if (v !== "" && u !== "") {
        // Generate a timestamp for every post
        var timestamp = Date.now();

        $("ul").prepend('<li>' +
            '<span class="body">' + v + '</span><br />' +
            'Posted by ' +
            '<span class="author">' + u + '</span> ' +
            '<span class="time" data-timestamp="' + timestamp + '">0</span>' +
            ' minutes ago  </li>');

    } else {
        if (v == "") {
            $('#type').css('border', '1px solid red');
        }
        if (u == "") {
            $('#input').css('border', '1px solid red');
        }
    }
});