JSFiddle - React, Tailwind, and code Playground

by Derek Nash

HTML

<section>
  <form id="form" action="#" method="POST">
  <input id="description" name="description" type="text" />
  <input id="add" type="submit" value="Add" />
  <button id="clear">Clear All</button>
  </form>
  <div id="alert"></div>
  <ul id="todos"></ul>
</section>

JavaScript

$('#add').click( function() {
   var Description = $('#description').val();
   //if the to-do is empty
   if($("#description").val() == '') {
    $('#alert').html("<strong>Warning!</strong> You left the to-do empty");
    $('#alert').fadeIn().delay(1000).fadeOut();
    return false;
   }

// add the list item
   $('#todos').prepend("<li>" + Description + "</li>");
   // delete whatever is in the input
   $('#form')[0].reset();
   var todos = $('#todos').html();
   localStorage.setItem('todos', todos);
   return false;
});
    
// if we have something on local storage place <that></that>
if(localStorage.getItem('todos')) {
$('#todos').html(localStorage.getItem('todos'));
}

// clear all the local storage
$('#clear').click( function() {
window.localStorage.clear();
location.reload();
return false;
});