JSFiddle - React, Tailwind, and code Playground

by Spencer Smith

HTML

<div id="title" contentEditable="true">List Title</div>
<ul></ul>
<div id="new-button">+</div><input type="text-area"id="new-text"></input>

CSS

*{padding:0px;margin:0px;}

body{
    font-family:Helvetica;
    font-weight:200;
}

li{
    margin:20px;
    margin-bottom:0px;
    list-style-type:none;
}

li p{
    display:inline-block;
    background-color:whitesmoke;
    padding:10px;
    border-left:38px solid lightgray;
    transition:all .1s;
    cursor:default;
}

.done{
    border-left:38px solid limegreen;
}

#title{
    display:inline-block;
    margin:20px;
    margin-bottom:0px;
    font-size:25px;
    border:none;
    padding:10px;
    box-sizing:border-box;
    border:1px solid transparent;
    font-family:Helvetica;
}
#title:hover{
    border:1px solid lightgray;
}
#title:focus{
    border:1px solid dodgerblue;
    outline:none;
}
#new-button{
    margin-top:20px;
    height: 38px;
    width: 38px;
    background-color: lightgrey;
    margin-left: 20px;
    font-size: 30px;
    color: darkgray;
    text-align: center;
    cursor: pointer;
    float:left;
}
#new-text{
    margin-top:20px;
    box-sizing:border-box;
    font-family:Helvetica;
    font-size:inherit;
    font-weight:200;
    height:38px;
    width:300px;
    padding:10px;
}
#new-text:focus{
    border:1px solid dodgerblue;
    outline:none;
}

JavaScript

// Checklist app idea
function clickUpdate(){
    $('p').unbind('click');
    $('p').click(function(){
        $(this).toggleClass('done');
    });
}

clickUpdate();

$('#new-text').toggle();

$('#new-button').click(function(){
    if($('#new-text').val() == ''){
        $('#new-text').animate({width:'toggle'});
        $('#new-text').focus();
    }else{
        addNew();
    }
});


function addNew(){
    $('ul').append('<li><p>' + $('#new-text').val() + '</p></li>');
    $('#new-text').val('');
    $('#new-text').toggle();
    clickUpdate();
}


$(document).keypress(function(e) {
  if(e.which == 13) {
      $('#new-button').click();
  }
});

//addNew();