JSFiddle - React, Tailwind, and code Playground

by Joe Pigott

HTML

<h1>Commentia!!!</h1>

<div id='com'>Your comment comes first, name comes in -these-</div>
    <textarea id='type'></textarea>
    <br />
    <input type='text' id='input'>
    <br />
    <br />
    <button id='b' onclick='comment()'>Submit</button>
<div id='box'>Type your comment
    <br />(please use spaces)</div>
<div id='button'>Click to submit</div>
<div id='inp'>Type your name</div>

<h3>Comments</h3>

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

CSS

#ul {
    color: #96f226;
    background: #4a4a4a;
    border-radius: 0px;
    width: 157px;
    height: auto;
}
#ul li {
    border: 2px solid #252525;
    border-left: 0px;
}
#box, #button, #inp {
    color: #96f226;
}
body {
    background: #252525;
    color: #96f226;
}
h1, h3 {
    color: #96f226;
    width: 195px;
}
#type, input {
    border-radius: 0px;
    background: #4a4a4a;
    border: 1px solid #454545;
    color: #96f226
}
#b {
    background: #4a4a4a;
    border-radius: 0px;
    border: 1px solid #454545;
    color: #96f226;
    cursor: pointer;
}
#b:active {
    box-shadow: 0 0 30px #96f226;
}
#type:hover, #b:hover, #input:hover {
    background: #656565;
}
#type:focus, #input:focus, #b:focus {
    box-shadow: 0 0 30px #96f226
}

JavaScript

//This is a basic comment system where you type your comment and your name and it prepends it to the ul
$(document).ready(function () {
    //Hiding the tooltip div's
    $('#button').hide();
    $('#inp').hide();
    $('#box').hide();
    $('#com').hide();
    //Submit button click func
    $('#b').click(function () {
        //vars for comment and name
        var v = $('#type').val();
        var u = $('#input').val();
        //prepending the comment
        $("ul").prepend("<li>" + v + "<br /> - " + u + " - </li>");
    });
    //trying to store comments using localStorage
    var l = $('#ul').html();
    localStorage.setItem('comments', l);
    document.getElementById('ul').innerHTML = localStorage.getItem('comments');
    //tooltip div mouseenter/mouseleave
    $('textarea').mouseenter(function () {
        $('#box').show();
    });
    $('textarea').mouseleave(function () {
        $('#box').hide();
    });
    $('input').mouseenter(function () {
        $('#inp').show();
    });
    $('input').mouseleave(function () {
        $('#inp').hide();
    });
    $('button').mouseenter(function () {
        $('#button').show();
    });
    $('button').mouseleave(function () {
        $('#button').hide();
    });
    $('h1').mouseenter(function () {
        $('#com').show();
    });
    $('h1').mouseleave(function () {
        $('#com').hide();
    });
});