JSFiddle - React, Tailwind, and code Playground

by Karl Boyle

HTML

<title>The HTML5 Herald</title>
<body>
<h1>ToDo</h1>
<form>
    <label>Create new to do:</label>
    <input type="text" />
</form>
<ul>
</ul>
</body>

CSS

a {
    margin-left: 20px;
    color: maroon;
    text-decoration: none;
    font-weight: bold;
}

JavaScript

$('form').submit(function(){
	if($('input').val() !== ""){
  	$("<li></li>").append($('input').val()).appendTo("ul");
	}
	$('form')[0].reset();
	return false;
});

$('ul').child().on("hover", function(){
  $(this).next().toggle(200); 
  return false; 
});