JSFiddle - React, Tailwind, and code Playground

by bittersweetryan

HTML

<h1 class="page-title"> Todos </h1>
<button id = "all-done"> Mark All Done </button> 
<button id = "remove-all"> Remove All </button>
<div>
    <ul id = "item-list">

    </ul>
    <input type="text" placeholder ="Add new item.." />
</div>

CSS

.page-title {
    
}

button {
   width: 100px;
   border-width: 2px;
   border-style: solid;
   padding: 5px 5px 5px 5px;
   background-color: #66CCFF;
   border-radius: 5px;
   border-color: #0099FF;
}

.item {
    list-style: none;
    width: 300px;
    line-height: 50px;
}

.item-name { 
    font-weight: bold;    
}

.remove-item {
    margin-left: 20px;
    margin-top: 10px;
    float: right;
}

}

JavaScript

var todos_list = [
    {   
        name: "Item 1",
        id: "item_1",
    },
    {
        name: "Item 2",
        id: "item_2",
    }    
]
var item_list = "";
for (i = 0; i < todos_list.length; i++)
{
    $("#item-list").append('<li class = "item" id ="'+todos_list[i].id+'"> <span class = "item-name">' 
      + todos_list[i].name +
     '</span><button class = "remove-item"> Remove </button></li>'); 
}

$(".remove-item").on("click", function(event) {
    debugger;    
});