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

function Todo() {

}

Todo.prototype = {
    add: 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;
    },
    clearAll: function () {
        window.localStorage.clear();
        $('#todos').html('')
        return false;
    },
    featchTodo: function () {
        if (localStorage.getItem('todos')) {
            $('#todos').html(localStorage.getItem('todos'));
        }
    }
}
var obj = new Todo()
$(document).ready(function () {
    obj.featchTodo()
    $("#add").click(function () {
        obj.add()
    })
    $("#clear").click(function () {
        obj.clearAll()
    })
})