Todo List In JavaScript With Source Code
The Todo List In JavaScript developed using JavaScript, bootstrap, and HTML. This Todo List JavaScript Example Project is an interesting Project With Source Code. The user can add the number of to-do work details and you can see the details stored in the list form like sticky list notes. Also, the user can delete the list items if he/she wants to remove it.
A Todo List App In JavaScript Features: the user can make the list of their daily works that they have to do and keep them as records. You just have to type the work information in the text fields and press the enter to add the information on the record.
This JavaScript Project With Source Code also includes a downloadable Todo List JavaScript Code for free, just find the downloadable source code below and click to start downloading.
To start creating a Todo List In JavaScript, make sure that you have any platform in creating a JavaScript, bootstrap, and HTML installed in your computer, in my case I will use Sublime Text.
Steps on how to create a Todo List In JavaScript
Todo List In JavaScript With Source Code
- Step 1: Open Sublime Text.
First after installing sublime text IDE, click “open” to start.
- Step 2: Create a HTML file.
Second click “file” and select “save as” and named it “index.html“
- Step 3: Create a CSS file.
Third click “file” and select “save as” and named it “style.css“
- Step 4: Create a JavaScript file.
Fourth click “file” and select “save as” and named it “app.js“
- Step 5: The actual code.
You are free to copy the code given below and paste to your different file created.
The Code Given Below Is For The index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> <title>My Todo List</title> </head> <body> <div class="container"> <header class="text-center text-light my-4"> <h1 class="mb-4">Todo List</h1> <form action="" class="search"> <i class="fa fa-search icon"></i> <input type="text" class="form-control input-field m-auto" placeholder="search todos"> </form> </header> <ul class="list-group todos mx-auto text-light"> <li class="list-group-item d-flex justify-content-between align-items-center"> <span>Create a Javascript Project</span> <i class="fa fa-trash-o delete"></i> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <span>Learn Programmin</span> <i class="fa fa-trash-o delete"></i> </li> </ul> <form class="add text-center my-4"> <label class="text-light"> Add new todo... </label> <input type="text" class="form-control m-auto" name="add"/> </form> </div> <script src="app.js"></script> </body> </html> |
In this file which is the index of the project.
The Code Given Below Is For The style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
body { background: #353f5b; } .container { max-width: 400px; } .search i { position: absolute; } .search { position: relative; } .icon { padding: 10px; left: 0; } .input-field { text-align: center; } input[type="text"], input[type="text"]:focus { color: #fff; border: none; background: rgba(0, 0, 0, 0.3); max-width: 400px; } .todos li { background: #423a6f; } .delete { cursor: pointer; } .filtered{ display: none !important; } |
In this file which is the design of the project.
The Code Given Below Is For The app.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
const addForm = document.querySelector(".add");//reference to form const list = document.querySelector(".todos"); //reference to ul //Adding todos const generateTemplate = (todo) => { const html = ` <li class="list-group-item d-flex justify-content-between align-items-center"> <span>${todo}</span> <i class="fa fa-trash-o delete"></i> </li> `; list.innerHTML += html; }; addForm.addEventListener("submit", (e) => { e.preventDefault(); const todo = addForm.add.value.trim(); // console.log(todo); //check - for true if the todo lenght is greater than 1 it return true to if condition if (todo.length) { generateTemplate(todo); addForm.reset(); //to reset the input } }); // Deleting todos - we are using event delegation //we already had reference for ul list.addEventListener("click", (e) => { // if (e.target.tagName === "I") if (e.target.classList.contains("delete")) { e.target.parentElement.remove(); } }); //Filter and Searching - keyup event //cont search = document.querySelector('.search input'); const search = document.querySelector(".input-field"); //reference to search input const filterTodos = (term) => { Array.from(list.children) .filter((todo) => !todo.textContent.toLowerCase().includes(term)) .forEach((todo) => todo.classList.add("filtered")); Array.from(list.children) .filter((todo) => todo.textContent.toLowerCase().includes(term)) .forEach((todo) => todo.classList.remove("filtered")); }; search.addEventListener("keyup", () => { const term = search.value.trim().toLowerCase(); filterTodos(term); }); |
In this file which is the javascript function of the project.
Run Quick Virus Scan for secure Download
Run Quick Scan for secure DownloadDownloadable Source Code
Summary
This JavaScript Project With Source Code is simply in HTML, CSS, and JavaScript. Taking about the features of this system, the user can make the list of their daily works that they have to do and keep them as records. You just have to type the work information in the text fields and press the enter to add the information on the record. This project includes a lot of javascript for making the functioning of the project.
Related Articles
Inquiries
If you have any questions or suggestions about Todo List In JavaScript , please feel free to leave a comment below.
