jQuery Simple Todo List Plugin

1. Introduction

query-simple-to-do-list is a simple and easy to use a plugin to create TO-DO list on your website. The plugin uses jQuery and simple CSS that can be easily changed to your needs.

2. Plugin Overview

Demo

3. How to install and use query-simple-to-do-list jQuery plugin

Follow the below steps to install query-simple-to-do-list jQuery plugin on your website.

1. Include jQuery library and query-simple-to-do-list asset files (JS and CSS), you can additionally add Font Awesome icons:

<!-- 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">

<!-- 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>

2. Create HTML structure for TO-DO list:

<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>

4. Conclusion

In this article, we presented query-simple-to-do-list jQuery plugin that can be a great extension for your website. The plugin is simple and can be easily customized to fit any website look.