We have included a blank HTML, CSS and JS file for you to get started with a basic project structure. In your index.html file include Bootstrap's CSS and add a script tag to include your todo.js file. Review the items we covered in the lecture. There are a few ways to do this project but some of the methods you might think about using include: Your To Do List app can look and function however you'd like. However, we'd like to see the below features supported. You can view our example version at //rcacademy.github.io/todolist. You can check these out if you want to see examples and potential solutions. Please try to do these yourself before you see how we have built them. //www.youtube.com/watch?v=gC3_jolCphM //www.youtube.com/watch?v=ihD5SEVz6es ⚠️ The audio at the end of this one got messed up. Will upload a new version ASAP. //www.youtube.com/watch?v=N2KzqB7I8o0
Getting Started
Features
Day 1
Day 2
Looking Forward
Potential Solutions
Videos
1 of 3: Adding items, completing items and deleting items
2 of 3: Adding support for adding new items when you press "enter"
3 of 3: Adding support for editing items
Page 2
We have included a blank HTML, CSS and JS file for you to get started with a basic project structure. In your index.html file include Bootstrap's CSS and add a script tag to include your todo.js file. Review the items we covered in the lecture. There are a few ways to do this project but some of the methods you might think about using include: Your To Do List app can look and function however you'd like. However, we'd like to see the below features supported. You can view our example version at //rcacademy.github.io/todolist. You can check these out if you want to see examples and potential solutions. Please try to do these yourself before you see how we have built them. //www.youtube.com/watch?v=gC3_jolCphM //www.youtube.com/watch?v=ihD5SEVz6es ⚠️ The audio at the end of this one got messed up. Will upload a new version ASAP.
Getting Started
Features
Day 1
Day 2
Looking Forward
Potential Solutions
Videos
1 of 3: Adding items, completing items and deleting items
2 of 3: Adding support for adding new items when you press "enter"
3 of 3: Adding support for editing items
//www.youtube.com/watch?v=N2KzqB7I8o0
-
Comment on it
In this blog, I am going to explain how to make a simple to-do list with the help of jQuery. The to-do list which we are going to create will contain an input box and an add button, so when we put our task to the input box and click the add button then that task will get added to our to-do list. we can add many tasks to our to-do list in a similar manner.
when our task gets completed after then we can remove that task from our list by simply clicking two times on it.
we can also arrange our task on a priority basis by simply drag and drop it .
Below is theHTMLl code for to-do list :-
Simple To Do List
Add
Below is the jQuery code :-
$[document].ready[ function[]{ $['#btn'].click[ function[]{ var add = $['input[name=AddItem]'].val[]; // on add button click the task which we put in the input box naming AddItem get appeneded to ol list $['ol'].append[' - ' + add + ' ']; }]; $["input[name=AddItem]"].keyup[function[event]{ if[event.keyCode == 13]{ $["#btn"].click[]; // when we click on enter button whose keyCode is 13 then our add button get automatically click and its function get call } }]; $[document].on['dblclick','li', function[]{ $[this].toggleClass['cross_line'].fadeOut['slow']; // when we double click the list item .cross_line class get call and then li get faded out. }]; $['input'].focus[function[] { $[this].val['']; }]; $['ol'].sortable[]; } ];
Below is the css for above html code :-
.wrapper{ padding: 25px; width: 350px; margin: 0 auto; margin-top: 40px; background: white; border-radius: 5px; } input{ padding: 5px 30px ; } #btn{ display: inline-block; background-color:#28ADE5; color:#000; border-radius: 6px; text-align:center; margin-top:3px; padding: 5px 20px; } #btn:hover{ cursor: pointer; } ol {padding-left: 20px;} ol li {padding: 5px;color:#000;} .cross_line{text-decoration: line-through;} li:hover{ cursor: pointer; }Working demo:- //jsfiddle.net/0a5z4rcj/2/
Page 2
Page 3
Page 4
Page 5
Page 6
Page 7
Page 8
Page 9
Page 10
Page 11
Page 12
Page 13
Page 14
Page 15
Page 16
Page 17
Page 18
Page 19
Page 20
Page 21
Page 22
Page 23
Page 24
Page 25
Page 26
All the Free jQuery Plugins about 'todo list' are listed here.
12/27/2017 - Other - 9533 Views
LobiList is a simple, powerful, ajax-enabled jQuery todo list management plugin that uses jQuery UI for drag and drop support and Bootstrap for list styles & action icons.
09/14/2016 - Other - 9706 Views
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.
06/05/2016 - Other - 3083 Views
Just another jQuery based todo list web app used to manage your task list that all the items will automatically be saved onto cookies in your browser.
07/20/2015 - Other - 9235 Views
A very simple todo list web app built with jQuery and Bootstrap 3 that has the ability to persist the tasks with Html5 local storage.
03/11/2015 - Mobile - 9220 Views
Editable Listview is a jQuery & jQuery mobile plugin which allows you add, remove and edit items from a collapsible list view.
12/23/2014 - Other - 6609 Views
Todolist is a really simple jQuery plugin to create a responsive & animated todo list component on your web page, styling with jQuery UI.
10/13/2014 - Other - 5676 Views
Just another task manager [todo list] web application built on top of jQuery, CSS3, Html5 and Bootstrap 3.
09/20/2014 - Other - 6027 Views
A stylish jQuery, Html5, and Bootstrap based todo list app which allows you to add, remove, delete tasks in 3 states [New, In Progress and Archived].
09/14/2014 - Other - 7169 Views
listrr is a minimal jQuery & jQuery UI based plugin to create a stylish responsive card-style task manager for Todo List/Wish List/Shopping List web apps.
09/01/2014 - Other - 4503 Views
An animated and flat designed to-do list app built on top of jQuery, animate.css and CSS3 transitions
08/16/2014 - Other - 3392 Views
A simple responsive to-do list manager built with jQuery that allows you to add, check, delete tasks with ease.
05/01/2014 - Other - 8259 Views
Task-List is a task management plugin that makes it easy to manage your task lists or To-do lists with Html5 localStorage support.
03/05/2014 - Other - 8572 Views
A super lightweight jQuery widget to create a shopping list on your web page that you can add, remove, and checked the items.
02/21/2014 - Other - 5582 Views
Yet another To-Do list manager powered by jQuery and jQuery UI that supports drag and drop, datepicker and has the ability to save the list data to client side using Html5 localStorage.
02/18/2014 - Other - 25023 Views
Yet another simple To-Do list web app built on top of jQuery and Bootstrap 3 that helps you keep track of the things you have to do.
01/14/2014 - Other - 15672 Views
A simple, lightweight plugin for creating a To-do list [task manager] widget that allows your visitors to keep track of the things they have to do on your website.