JSFiddle - React, Tailwind, and code Playground

by letsGoHawks

HTML

<body>
	<h2>To do list:</h2>
	<div id="list"> 
	</div>
	<form>
	 <input id="addition" type="text"/>
	 <input id="addButton" type="button" value="Add"/>
	 <input id="removeAll" type="button" value="Remove All"/>
	</form>
  </body>

CSS

#list {
   // border: 1px solid grey;
    width: 50%;
}

.item {
    border: 1px solid grey;
	border-radius:4px;
	padding: 4px 10px;
	width: 50%;
	background-color:#C1F3FF;
}

img {
	cursor: pointer;
	margin-left: 5px;
	float:right;
}

.txt {
    display: inline;
}

.done {
	text-decoration: line-through;
}

JavaScript

$(document).ready(function(){
    $('form').submit(function(event) {
    	addTo(event);
    });
	
	$('#addButton').on('click', function(event) {
		addTo(event);
	});
	
	$('#removeAll').on('click', function(event) {
		event.preventDefault();
		var reply = confirm("Are you sure you want to delete ALL todo items?");
		if(reply === true) {
			$('.item').remove();
		} 
    });
});

var onDeleteButtonClicked = function(event) {
    event.preventDefault();
	var reply = confirm("Are you sure you want to delete this todo item?");
	if(reply === true) {
		$(this).closest('.item').remove();
	} 
};

var onEditButtonClicked = function(event) {
    event.preventDefault();
	var reply = prompt("Enter new text: ");
	if(reply) {
		$(this).closest('.item').find('.txt').text(reply);
	}
};

var onCheckButtonClicked = function(event) {
	 event.preventDefault();
	 $(this).closest('.item').toggleClass('done');
};

function addTo(event) {
	event.preventDefault();
        var toAdd = $('#addition').val();
		if(toAdd.length > 0) {
			var outter = $('<div class="outter"></div>').append('<div class="txt">' + toAdd + '</div>');
			var listItem = $('<div class="item"></div>');
			var img = $('<img class="delete" src="https://cdn1.iconfinder.com/data/icons/uidesignicons/delete.png">').click(onDeleteButtonClicked);
var img1 = $('<img class="edit" src="https://cdn1.iconfinder.com/data/icons/freeapplication/png/24x24/Modify.png">').click(onEditButtonClicked);
var img2 = $('<img class="check" src="https://cdn1.iconfinder.com/data/icons/diagona/icon/16/102.png ">').click(onCheckButtonClicked);
 
			outter.append(img2);
			outter.append(img1);
			outter.append(img);
			listItem.append(outter);
			$('#list').append(listItem);
			$('#addition').val("");
		} else {
			alert("Cannot add empty list item!");
		}
}