Simple To Do List Using jQuery and CSS

Here is a simple, easy to use and clean design “TO Do List” using jQuery and CSS that allows to add & remove text items in list.

To Do List Plugin Overview

Plugin: jquery-simple-to-do-list
Author: Parvathi Pai
Licence: MIT Licence
Published: March 23, 2019
Repository: Fork on GitHub
Dependencies: jQuery 2.1.4 or Latest version
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 32 KB

How to Use It:

1. Load the jQuery and Font Awesome CSS files into HTML document.

<!-- jQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

2. Also include the “To Do List” CSS and Javascript files.

<!-- To Do List CSS -->
<link rel="stylesheet" type="text/css" href="assets/css/todos.css">

<!-- To Do List JS -->
<script type="text/javascript" src="assets/js/todos.js"></script>

3. Create HTML structure for “To Do List” like below and done.

<div id="container">
	<h1> To Do List <i class= "fa fa-plus"></i> </h1>
	<input type="text" placeholder="Add New Todo">
	<ul>
		<li> <span><i class="fa fa-trash"></i></span> List 1</li>
		<li><span><i class="fa fa-trash"></i></span> List 2<li>
	</ul>
</div>