JSFiddle - React, Tailwind, and code Playground

by codepo8

HTML

<h1>To Do List</h1>
<ul id="todo">
  <li>Go round Mum's</li>
  <li>Get Liz back</li>
  <li>Sort life out!</li>
</ul>
<form>
  <label for="newitem">Add item:</label>
  <input id="newitem"><input type="submit" value="do it">
</form>

CSS

ul{ margin:1em; background: #999; padding: 1em}
li{ background: #ccc; margin: 5px; }

JavaScript

var list = document.querySelector( '#todo' ),
    field = document.querySelector( '#newitem' ),
    form = document.querySelector( 'form' );

list.addEventListener( 'click', function( ev ) {
  var t = ev.target;
  if ( t.tagName === 'LI' ) {
    alert( t + ' ' + t.innerHTML ); 
    ev.preventDefault();
  }
}, false);

form.addEventListener( 'submit', function( ev ){
  list.innerHTML += '<li>' + field.value + '</li>';
  ev.preventDefault();
}, false);