Minimal To-do List And Task Manager App Using jQuery And Local Storage
File Size: | 4.23 KB |
---|---|
Views Total: | 10416 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A minimal, lightweight, jQuery based to-do list and task manager web application that allows to store data locally within the user's browser using HTML5 local storage.
How to use it:
1. Create an empty html list for the to-do list and task manager.
<ul id="list-items"></ul>
2. Create a form to add new entries.
<form class="add-items"> <input type="text" class="form-control" id="todo-list-item" placeholder="What do you need to do today?"> <button class="add" type="submit">Add to List</button> </form>
3. Load the necessary jQuery library in the html document.
<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script>
4. The core JavaScript (jQuery script)
$(document).ready(function () { $('#list-items').html(localStorage.getItem('listItems')); $('.add-items').submit(function(event) { event.preventDefault(); var item = $('#todo-list-item').val(); if(item) { $('#list-items').append("<li><input class='checkbox' type='checkbox'/>" + item + "<a class='remove'>x</a><hr></li>"); localStorage.setItem('listItems', $('#list-items').html()); $('#todo-list-item').val(""); } }); $(document).on('change', '.checkbox', function() { if($(this).attr('checked')) { $(this).removeAttr('checked'); } else { $(this).attr('checked', 'checked'); } $(this).parent().toggleClass('completed'); localStorage.setItem('listItems', $('#list-items').html()); }); $(document).on('click', '.remove', function() { $(this).parent().remove(); localStorage.setItem('listItems', $('#list-items').html()); }); });
5. Style the to-do list and task manager in the CSS whatever you like.
form { outline: 0; height: 36px; margin-top: 5%; border: 3px solid #3b3b3b; } input[type="text"] { outline: 0; width: 55%; height: 32px; border: none; font-size: 18px; font-weight: normal; padding-left: 10px; } .add { outline: 0; float: right; width: 34%; height: 36px; color: #fff; font-size: 18px; border: none; cursor: pointer; background-color: #3b3b3b; } ul { padding: 0; text-align: left; list-style: none; } hr { border-bottom: 0; margin: 15px 0; } input[type="checkbox"] { width: 30px; } .remove { float: right; cursor: pointer; } .completed { text-decoration: line-through; }
This awesome jQuery plugin is developed by daniyalaamir. For more Advanced Usages, please check the demo page or visit the official website.