You can develop this todo application in any text editor and debug in any browser. I’m using Plunker to code this due to its simplicity. You can follow along with using this Plunker demo link
Todo list Using Jquery – Project Setup
First things first, we need to set up our project. Let’s add a new index.html file to our plunker project as shown below.
Simple Todo Demo!
Click on row to delete newly added entry.
- 1. Example of Existing task
- 2. Example of Existing task
Nothing too fancy in that html code. We have a heading and paragraph to let user know to click newly created task. Next is an unordered list group from bootstrap 4 showing 2 items to start with. Think of those two items as existing data from a database. Next is a simple textarea to allow user to type new task entry to add to the list. Last, we have a button which will fire the add operation when user click on it.
Add script to handle add and delete tasks
A delete function is in there as well to remove the item from the list. Very basic.