iamsathyaseelan · December 27, 2020 07:27
diff --git a/todos.html b/todos.html
 <!doctype html>
 <html lang="en">
 <head>
    <title>Simple todo list</title>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
            integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
            integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
          integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>
    <style>
        #sortable {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        #sortable li {
            margin: 0 3px 3px 3px;
            padding: 10px;
            font-size: 1.4em;
        }
    </style>
 </head>
 <body>
 <nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Todo List</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">My account <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Add todo</a></li>
                        <li><a href="#">Sign out</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
 </nav>
 <div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Create todo</h3>
                </div>
                <div class="panel-body">
                    <div class="input-group">
                        <input type="text" class="form-control" id="new-todo" aria-label="Enter todo"
                               placeholder="Enter todo">
                        <div class="input-group-btn">
                            <button type="button" id="save-todo" class="btn btn-default">Save</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">My todo list</h3>
                </div>
                <div class="panel-body" style="max-height: 600px;overflow-y: auto">
                    <ul id="sortable">

                    </ul>
                </div>
            </div>
        </div>
    </div>
 </div>
 <script type="application/javascript">
    $("#save-todo").on('click', function (e) {
        e.preventDefault();
        let ip = $("#new-todo");
        let todo = ip.val();
        if (todo !== "") {
            let oldTodos = getTodos();
            console.log(oldTodos)
            oldTodos.push(todo);
            let parsed = JSON.stringify(oldTodos);
            localStorage.setItem('todos', parsed);
            renderTodos();
        }
        ip.val('');
    });

    function getTodos() {
        let todos = localStorage.getItem('todos');
        let parsedTodos = [];
        if (typeof todos !== "undefined" && todos) {
            parsedTodos = JSON.parse(todos);
        }
        return parsedTodos;
    }

    function renderTodos() {
        let todos = getTodos();
        if (todos.length <= 0) {
            todos.push("No todo items found!")
        }
        let holder = $("#sortable");
        holder.html('');
        todos.map((todo) => {
            let li = '<li class="ui-state-default">' + todo + '</li>'
            holder.append(li);
        })
    }

    $(function () {
        $("#sortable").sortable({
            update: updateTodos
        });
    });

    let updateTodos = function () {
        let newTodos = [];
        $("#sortable li").map((index, li) => {
            newTodos.push(li.innerHTML)
        });
        localStorage.setItem('todos', JSON.stringify(newTodos))
    }

    $(document).ready(() => {
        renderTodos();
    })
 </script>
 </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<title>Simple todo list</title>
	<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
	<meta content="utf-8" http-equiv="encoding">
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"
	integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
	integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
	<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
	integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

	<!-- Optional theme -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
	integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

	<!-- Latest compiled and minified JavaScript -->
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
	integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
	crossorigin="anonymous"></script>
	<style>
	#sortable {
	list-style-type: none;
	margin: 0;
	padding: 0;
	}

	#sortable li {
	margin: 0 3px 3px 3px;
	padding: 10px;
	font-size: 1.4em;
	}
	</style>
	</head>
	<body>
	<nav class="navbar navbar-default">
	<div class="container-fluid">
	<!-- Brand and toggle get grouped for better mobile display -->
	<div class="navbar-header">
	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
	data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>
	<a class="navbar-brand" href="#">Todo List</a>
	</div>
	<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	<ul class="nav navbar-nav navbar-right">
	<li class="dropdown">
	<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
	aria-expanded="false">My account <span class="caret"></span></a>
	<ul class="dropdown-menu">
	<li><a href="#">Add todo</a></li>
	<li><a href="#">Sign out</a></li>
	</ul>
	</li>
	</ul>
	</div>
	</div>
	</nav>
	<div class="container-fluid">
	<div class="row">
	<div class="col-md-4">
	<div class="panel panel-default">
	<div class="panel-heading">
	<h3 class="panel-title">Create todo</h3>
	</div>
	<div class="panel-body">
	<div class="input-group">
	<input type="text" class="form-control" id="new-todo" aria-label="Enter todo"
	placeholder="Enter todo">
	<div class="input-group-btn">
	<button type="button" id="save-todo" class="btn btn-default">Save</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	<div class="col-md-8">
	<div class="panel panel-default">
	<div class="panel-heading">
	<h3 class="panel-title">My todo list</h3>
	</div>
	<div class="panel-body" style="max-height: 600px;overflow-y: auto">
	<ul id="sortable">

	</ul>
	</div>
	</div>
	</div>
	</div>
	</div>
	<script type="application/javascript">
	$("#save-todo").on('click', function (e) {
	e.preventDefault();
	let ip = $("#new-todo");
	let todo = ip.val();
	if (todo !== "") {
	let oldTodos = getTodos();
	console.log(oldTodos)
	oldTodos.push(todo);
	let parsed = JSON.stringify(oldTodos);
	localStorage.setItem('todos', parsed);
	renderTodos();
	}
	ip.val('');
	});

	function getTodos() {
	let todos = localStorage.getItem('todos');
	let parsedTodos = [];
	if (typeof todos !== "undefined" && todos) {
	parsedTodos = JSON.parse(todos);
	}
	return parsedTodos;
	}

	function renderTodos() {
	let todos = getTodos();
	if (todos.length <= 0) {
	todos.push("No todo items found!")
	}
	let holder = $("#sortable");
	holder.html('');
	todos.map((todo) => {
	let li = '<li class="ui-state-default">' + todo + '</li>'
	holder.append(li);
	})
	}

	$(function () {
	$("#sortable").sortable({
	update: updateTodos
	});
	});

	let updateTodos = function () {
	let newTodos = [];
	$("#sortable li").map((index, li) => {
	newTodos.push(li.innerHTML)
	});
	localStorage.setItem('todos', JSON.stringify(newTodos))
	}

	$(document).ready(() => {
	renderTodos();
	})
	</script>
	</body>
	</html>