Simple To Do List Using jQuery and CSS

Plugin Preview

Share this:

How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins

To Do List Plugin Overview

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

Demo Download

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>

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.