JSFiddle - React, Tailwind, and code Playground

by Katarina Countiss

HTML

<div class="to-do">
        <div class="togglebox">
            <button class="toggle tog-needs-help">&#9888;</button> <button class=
            "toggle tog-needs-review">&#9673;</button> <button class=
            "toggle tog-done">&#10004;</button> <button class=
            "toggle tog-in-progress">&#9851;</button>
        </div><!-- togglebox -->

    <div class="wrapper">
            <textarea class="edit" cols="65" placeholder='here I am' rows="4">
</textarea>
</div><!-- wrapper -->
     
    </div><!-- end to do -->

 <div class="to-do">
        <div class="togglebox">
            <button class="toggle tog-needs-help">&#9888;</button> <button class=
            "toggle tog-needs-review">&#9673;</button> <button class=
            "toggle tog-done">&#10004;</button> <button class=
            "toggle tog-in-progress">&#9851;</button>
        </div><!-- togglebox -->

    <div class="wrapper">
            <textarea class="edit" cols="65" placeholder='here I am' rows="4">
</textarea>
</div><!-- wrapper -->
     
    </div><!-- end to do -->

CSS

/*
* Kat's Project
* 
* 
*/
/***********************************************
Reset & Basics
***********************************************/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    list-style-type: none;
    font-family: sans-serif
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,.wrapper {
    display: block;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

blockquote,q {
    quotes: none
}

blockquote:before,blockquote:after,q:before,q:after {
    content: '';
    content: none
}

html {
    overflow-y: scroll;
    overflow: -moz-scrollbars-vertical
}

/***********************************************
Layout
***********************************************/
body {
    max-width: 1650px;
    margin: 0 auto;
    background-color: grey;
    padding: 10px
}

.to-do,.toggle,.togglebox,button,.wrapper,.edit {
    display: block;
    float: left
}

.to-do {
    margin-top: 10px;
    padding-top: 10px;
    padding-left: 10px;
    margin-right: 1.818181818181818%;
    background: #ffc0cb;
    height: auto;
    width: 100%;
    position: relative;
}

.to-do:nth-child(odd) {
    margin-right: 0
}



/***********************************************
buttons
***********************************************/
button {
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
  ...

JavaScript

if (typeof(localStorage) === 'undefined') {
    alert(
        'Your browser does not support HTML5 Local Storage. Your changes will not be saved.'
    );
} else {
    $('#edit').each(function() {
        var save = $(this).attr('name');
        var content = localStorage.getItem(save);
        if (content !== null) {
            $(this).val(content);
        }
        // save value in <textarea> on "change", "keyup", "focusout", "input" and "paste" events...
        $(this).bind('change keyup focusout input paste', function() {
            localStorage[save] = $(this).val();
        });
    });
}
$('.tog-in-progress').click(function() {
    $(this).closest('div[class^=to-do]').toggleClass('in-progress');
    $(this).toggleClass('active');
});
$('.tog-needs-review').click(function() {
    $(this).closest('div[class^=to-do]').toggleClass('needs-review');
    $(this).toggleClass('active');
});
$('.tog-done').click(function() {
    $(this).closest('div[class^=to-do]').toggleClass('done');
    $(this).toggleClass('active');
});
$('.tog-needs-help').click(function() {
    var comment = prompt("What's up?", "I need help with ");
    if (comment !== null) {
        $(this).closest('div[class^=to-do]').toggleClass('needs-help');
        if (comment.length > 80) {
            alert("Keep it under 80 characters")
        } else {
            $(this).closest('div[class^=to-do]').append("<p><span>" +
                comment + "<a>&times;</a></span></p>");
        }
    }
    $('.to-do').on('click', 'span a', function() {
        $(this).closest('p').remove();
    });
});