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 -->
    <button class="remove-classes clear">Remove classes</button>
    <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 -->
    <button class="remove-classes clear">Remove classes</button>
    <div class="wrapper">
        <textarea class="edit" cols="65" placeholder='here I am' rows="4"></textarea>
    </div>
    <!-- wrapper -->
</div>
<!-- end to do -->
<div id="output">
   <h2>Things I did today:</h2>
<div id="things-i-did">

</div>
   <h2>Things I need help with:</h2>
<div id="things-i-need-help-with">
 
</div>
   <h2>Things I did today:</h2>
<div id="things-that-need-inspection">
    
</div>
   <h2>Things in Progress:</h2>
<div id="things-in-progress">
    
</div>
   <h2>Things I still need to do:</h2>
<div id="things-to-do-still">
 
</div>
</div>

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;
}
/***********************************************
buttons
***********************************************/
 button {
    -moz-transition: all .5s ease;
    -ms-transition: all...

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();
    });
});
$('.remove-classes').click(function () {
    $(this).closest('div[class^=to-do]').removeClass().addClass('to-do');
});