JSFiddle - React, Tailwind, and code Playground

by GregWebBandit

HTML

<div class="form-area">
      <form id="tasks-form">
        <label for="task">Add a task here and hit enter</label>
        <input id="task" autofocus>
      </form>
    </div>
  
    <ul id="tasks"></ul>
    
    <ul id="favs"></ul>
  </div>

JavaScript

var i = 0;
		var taskArray = [];
        var storedTasks = localStorage.getItem('Tasks');
        console.log(storedTasks);
      for( i = 0; i < localStorage.length; i++)
        $("#tasks").append("<li id='task-"+ i +"'>" + storedTasks[i] + "</li>");


		 // Add a task
		$("#tasks-form").submit(function() {
		    if ($("#task").val() != "") {
                 $("#tasks").append("<li id='task-" + i + "'>"  + '<span class="taskSpan">' + $("#task").val() + '</span>' + '</li>')
		        $("#task-" + i).css('display', 'none');
		        $("#task-" + i).fadeIn(350);
		        taskArray.push($("#task").val());
		        localStorage.setItem('Tasks', taskArray);
		        i++;

		    }

		    return false;
		});