JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div class="container">
<section class="newnote">
<p class="steps sticker bigRad">1. Write your note</p>
<p class="inst">
Write short notes. Use commas(,) to separate and create multiple notes at once.
</p>
<textarea id="newnoteText" col="10" rows="5" class="smallRad" /></textarea>
<p id="counter" class="medRad">100</p>
<a href="#" id="submit" class="smallRad" title="Add note">Add note</a>
</section>

<section class="notes" id="notes">
<p class="steps sticker bigRad">2. Get things done!</p>
<ul class="notesList">
</ul>
</section>
</div>

CSS

*{margin:0;padding:0}
body{background:rgb(214,225,199);font-family:Helvetica,Arial,sans-serif;font-size:0.625em;}
header,footer,section,ul,ol,div{display:block;position:relative}
ul,ol{list-style:none;}
a{text-decoration:none; background: rgba(0,0,0,0.4);color:#fff;-webkit-border-radius:30px;-moz-border-radius:30px;-o-border-radius:30px;-ms-border-radius:30px;border-radius:30px;}
a:hover{background:rgba(0,0,0,0.6);}
.sticker{font-family: 'Ultra', serif;color:#fff;background: rgb(148,199,182);
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.2);
-o-box-shadow:0px 1px 2px rgba(0,0,0,0.2);
-ms-box-shadow:0px 1px 2px rgba(0,0,0,0.2);
box-shadow:0px 1px 2px rgba(0,0,0,0.2);
border:3px solid rgba(255,255,255,0.9); text-shadow: 0px -1px 1px rgba(0,0,0,0.1);}
.medRad{
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-o-border-radius: 30px;
-ms-border-radius: 30px;
border-radius: 30px;
}
.smallRad{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}

.bigRad{
-webkit-border-radius:300px;
-moz-border-radius:300px;
-o-border-radius:300px;
-ms-border-radius:300px;
border-radius:300px;
}

header{padding: 1em 2em 2em 2em; background: rgb(148,199,182);}
header h1{font-family: adelle;font-size:2.4em; color: #fff; text-shadow: 0px 1px 2px rgba(0,0,0,0.1)}
header h1>b{background: rgb(211,100,59); border: 3px solid rgba(255,255,255,0.9);padding: 0 0.3em;margin-right:0.2em;}
header h2{font-size:1.6em; color: #fff; text-shadow: 0px 1px 2px rgba(0,0,0,0.1); margin-top: 0.5em;}
.newnote{margin:2em 0;}
.newnote, .notes{padding: 0em 2em;}
.steps{font-family: adelle;margin-bottom:0.5em;padding:0.2em 0.5em;font-size: 1.6em}
#counter {display: inline; font-weight: bold; background: rgba(255,255,255,0.4); padding: 0.5em 0.8em; margin-top: 1em;}
.inst {font-size: 1.2em;; margin-bottom: 0.5em; color: rgba(0,0,0,0.5)}
textarea{font-size:1.8em;border: none;width:100%;margin-bottom:...

JavaScript

$(document).ready(function() {
    if (localStorage.getItem("notes")) {
        var a = localStorage.getItem("notes").toString().split(",");
        $.each(a,
        function(a, b) {
            var c = "<li class='smallRad'><p>" + b + "</p><div class='noteOptions'><a href='#' class='done'>Done!</a></div></li>";
            $(".notesList").prepend(c)
        })
    } else {
        var a = []
    }
    var b = $("#newnoteText");
    var c = $("#submit");
    b.keyup(function(a) {
        $("#submit").html("Add note");
        var b = $(this).val();
        var d = 100 - b.length;
        if (b.length <= 100) {
            $("#counter").html(d)
        }
        if (b.length == 101) {
            $("#counter").html("Sorry to bother, but you are beyond 100 characters.")
        }
        if (a.which == 13) {
            c.trigger("click")
        }
    });
    c.click(function(c) {
        if (b.val().length == 0) {
            $(this).html("Write a note first");
            b.focus()
        } else if (b.val().length > 100) {
            $(this).html("Your note is too long");
            b.focus()
        } else {
            var d = b.val();
            var foo=d.split(",");
            a.push(foo.join());
            $.each(foo,function(index,element){
                var e = "<li class='smallRad'><p>" + element + "</p><div class='noteOptions'><a href='#' class='done'>Done!</a></div></li>";
                $(".notesList").prepend(e);
            });
            localStorage.setItem("notes", a)
        }
        c.preventDefault()
    });
    $(".done").live("click",
    function(b) {
        $(this).parents("li").remove();
        var c = $(this).parents("li").find("p").text();
        a.pop(c);
        localStorage.setItem("notes", a);
        b.preventDefault()
    })
})