JSFiddle - React, Tailwind, and code Playground

by bittersweetryan

HTML

<button>Mark All Done</button>
<button>Remove All</button>

<ul class="itemList">
</ul>

<input class="addItem" type="text" placeholder="Add Item"></input>

CSS

.itemList{
    list-style-type: none;
}

.itemList li{
    padding: 20px;
    border: 1px solid black;
    margin: 10px 0;
}

button.remove{
    float:right;
}

JavaScript

var app = (function(){
    var items = [
        { name: "do something", done: false },
        { name: "do something", done: false },
        { name: "do something", done: false }
    ];
    
    var input = $('.addItem');
    var list = $('.itemList');
    
    var addItem = function(){
        
    };
  
    var addItems = function(arr){
        arr.forEach( function(item, index){
            console.log(item);
            list.append('<li id='+ index + '>' + item.name + '<button class="remove">remove</button></li>');
        });
    };
    
    var removeItem = function(index){
        items.splice(index, 1);
    };
    
    var markAllDone = function(){
        items.forEach(function(item){
            item.done = true;
        });
    };
    
    var init = function(){
        addItems(items);
        $('ul.itemList').on('click', 'button.remove', function(){
            removeItem($(this).parent().attr('id'));
        });
    }();
}());