JSFiddle - React, Tailwind, and code Playground

by deepak sisodiya

HTML

<input id="description" type="text" />
<input id="add" type="submit" value="Add" />
<button id="clear">Clear All</button>
<div id="alert"></div>
<ul id="todos"></ul>

JavaScript

// to-do list

$("#add").click(function () {
    var inputValue = $("#description").val()
    if (inputValue === '') {
        $("#alert").html("<strong>Warning!</strong> You left the to-do empty")
        $('#alert').fadeIn().delay(1000).fadeOut();
        return false
    }
    $('#todos').prepend("<li>" + inputValue + "</li>")
    $("#description").val('')
    var toDO = $('#todos').html()
    localStorage.setItem('todos', toDO);
    return false;
})

if (localStorage.getItem('todos')) {
    $('#todos').html(localStorage.getItem('todos'));
}

$('#clear').click(function () {
    window.localStorage.clear();
    location.reload();
    return false;
});