JSFiddle - React, Tailwind, and code Playground

by jack2ky

HTML

<ul id = "tasks">

</ul>
<input type= 'text' id ='taskText'>
<input type = 'submit' id ="addTask" />
<div class = "green"> green text</div>

CSS

ul li{
	list-style: none;
}
.done{
	text-decoration: line-through;
	color: red;
}
.green{
	color:green;
}

JavaScript

$(document).ready(function(){
	$('#taskText').keydown(function(evt){
		if(evt.keyCode == 13){
			addTask(this, evt);
		}
	});
	$('#addTask').click(function(evt){
		addTask(document.getElementById('taskText'), evt);
	});
	$('#tasks li').on("click", function(evt){
		$(this).addClass('done');
	});
});
function addTask(textBox, evt){
	evt.preventDefault();
	var taskText = textBox.value;
	$("<li>").text(taskText).appendTo('#tasks');
	textBox.value = '';
};