Skip to content

Instantly share code, notes, and snippets.

@iamsathyaseelan

iamsathyaseelan/todos.html

Created December 27, 2020 07:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save iamsathyaseelan/64bc0f9d026a3347665a94a9f13bd36b to your computer and use it in GitHub Desktop.
Save iamsathyaseelan/64bc0f9d026a3347665a94a9f13bd36b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment