How we can create a to do list using HTML CSS JavaScript? Solution: See this JavaScript To Do List With CSS, List With Check and Delete Options.
Previously I have shared lots of JavaScript Programs, this to-do list is also a part of that pure JS category. Basically, the to-do list is for remember and check what you have to do today. And mostly this type of list people save in mobile apps, computers, notebook, etc but you also can create to do list using JavaScript programming.
Today you will learn to create To-Do list with checked and delete options. Basically there is text input filed and button with add icon, when you will type anything in the field and click on add button that task will be added and appears in the bottom. After adding multiple tasks, you have checked task which you have done and also you can delete them.
So, Today I am sharing JavaScript To Do List With CSS. This program is built-in pure JavaScript, there is no library or framework. And this program is a perfect example of how JavaScript can add or delete HTML CSS elements dynamically. If you are a beginner, then this program will best practice for you.
If you are thinking now how this list program actually is, then see the preview given below.
Preview Of Tasks List With Checked and Delete Options
See this video preview to getting an idea of how this task list program looks like.
Now you can see this visually, you can also see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- SVG Search Input Animation
- JavaScript Email Validation
- Equal Height Column CSS JS
- Scroll To Top Feature JavaScript
JavaScript To Do List With CSS Source Code
Before sharing source code, let’s talk about it. First I have create a text input filed using HTML <input type="text"> tag and a button with icon for adding tasks. After that, created a div and placed HTML list tag <ul> with an ID name and JS will add items inside it. There are some icons like plus, trash, for placing these icons I have used Font-Awesome library (get).
Now using CSS I have placed all the elements on the right place, as you can see in the preview. & inside the button put the icon class, and styled other elements. There is also a CSS effect for a checked or completed task, you can see a line middle of the text. For creating this effect used CSS text-decoration: line-through; command.
JavaScript detects all the actions and changing CSS values and adding HTML elements. When you will add any task that will adds on the list below, for that I have used JavaScript’s document.createElement function to store task’s data. Left all other things you will understand after getting the codes, I can’t explain all in writing.
For creating this program you have to create 3 files for that. First file for HTML, second for CSS and the third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
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 |
<!DOCTYPE html> <!--Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>JavaScript To Do List | Webdevtrick.com</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet"> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="style.css"> </head> <body> <div id="tasker" class="tasker"> <div id="error" class="error">Please Enter a Task</div> <div id="todo-header" class="todo-header"> <input type="text" id="input-task" placeholder="Enter Your Task"> <button id="add-task"><i class="fa fa-fw fa-plus"></i> </button> </div> <div class="todo-lists"> <ul id="tasks"></ul> </div> </div> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
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 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ body { background: #f1f1f1; margin-top: 2rem; } .tasker ul, .tasker li, .tasker .error, .tasker button, .tasker input { margin: 0; padding: 0; border: none; outline: none; background: transparent; } .todo-header button, .todo-lists .task button { transition: all 0.2s ease; -webkit-transition: all 0.2s ease; } .tasker { max-width: 400px; margin: 0 auto; } .tasker .error { display: none; background: #ff4747; color: #fff; padding: 14px; margin-bottom: 10px; border-radius: 5px; text-align: center; } .tasker ul { background: #fff; } .tasker li, .tasker .error, .tasker button, .tasker input { font: 18px/1.25em 'Lato', sans-serif; } .todo-header { display: inline-flex; background: #212121; justify-content: space-between; width: 100%; } #input-task { color: white; } .todo-header input, .todo-header button { color: #fff; box-sizing: border-box; font-size: 1.25em; padding: 14px; } .todo-header input { flex-grow: 2; } .todo-header button { background: #00b934; border-left: 1px solid #098009; } .todo-header button:hover { background: #5cb85c; } .todo-lists .task { display: block; position: relative; padding: 14px 40px 14px 14px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .todo-lists .task:last-child { border-bottom: none; } .todo-lists .task:hover > button { opacity: 1; } .todo-lists .task.completed { color: #cdcdcd; text-decoration: line-through; } .todo-lists .task input { margin-right: 10px; } .todo-lists .task button { color: #cdcdcd; margin: 14px; position: absolute; top: 0; right: 0; opacity: 0; } .todo-lists .task button:hover { color: #ed1c24; } |
function.js
The final step, Create a JavaScript file named ‘function.js‘ and put the codes.
|
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 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
// Code By Webdevtrick ( https://webdevtrick.com ) (function() { 'use strict'; var tasker = { init: function() { this.cacheDom(); this.bindEvents(); this.evalTasklist(); }, cacheDom: function() { this.taskInput = document.getElementById("input-task"); this.addBtn = document.getElementById("add-task"); this.tasklist = document.getElementById("tasks"); this.tasklistChildren = this.tasklist.children; this.errorMessage = document.getElementById("error"); }, bindEvents: function() { this.addBtn.onclick = this.addTask.bind(this); this.taskInput.onkeypress = this.enterKey.bind(this); }, evalTasklist: function() { var i, chkBox, delBtn; for (i = 0; i < this.tasklistChildren.length; i += 1) { chkBox = this.tasklistChildren[i].getElementsByTagName("input")[0]; chkBox.onclick = this.completeTask.bind(this, this.tasklistChildren[i], chkBox); delBtn = this.tasklistChildren[i].getElementsByTagName("button")[0]; delBtn.onclick = this.delTask.bind(this, i); } }, render: function() { var taskLi, taskChkbx, taskVal, taskBtn, taskTrsh; taskLi = document.createElement("li"); taskLi.setAttribute("class", "task"); taskChkbx = document.createElement("input"); taskChkbx.setAttribute("type", "checkbox"); taskVal = document.createTextNode(this.taskInput.value); taskBtn = document.createElement("button"); taskTrsh = document.createElement("i"); taskTrsh.setAttribute("class", "fa fa-trash"); taskBtn.appendChild(taskTrsh); taskLi.appendChild(taskChkbx); taskLi.appendChild(taskVal); taskLi.appendChild(taskBtn); this.tasklist.appendChild(taskLi); }, completeTask: function(i, chkBox) { if (chkBox.checked) { i.className = "task completed"; } else { this.incompleteTask(i); } }, incompleteTask: function(i) { i.className = "task"; }, enterKey: function(event) { if (event.keyCode === 13 || event.which === 13) { this.addTask(); } }, addTask: function() { var value = this.taskInput.value; this.errorMessage.style.display = "none"; if (value === "") { this.error(); } else { this.render(); this.taskInput.value = ""; this.evalTasklist(); } }, delTask: function(i) { this.tasklist.children[i].remove(); this.evalTasklist(); }, error: function() { this.errorMessage.style.display = "block"; } }; tasker.init(); }()); |
That’s It. Now you have successfully created JavaScript To Do List With CSS, List With Checked and Delete Options. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
Nice Tutorial, Please can you try storing those values of tasks added into localstorage
Hi , thank for this project , i was just wondering can i collect active links ? Ex.:
Task 1 : Go to http://www.google.com and make a search