Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create a to-do list with JavaScript
The TODO list is a list that typically used to keep track of all the things we need to do in a given day, with the most crucial chores at the top and the least important items at the bottom.
We can use it to plan our everyday schedules. We have the flexibility to add new assignments to the list, as well as remove those tasks that have been completed. A TODO list can be used to complete the following four main tasks
Add new task
Delete task
Mark task as completed
Edit task
Let’s look into the following examples to get a better understanding of creating a to-do list with JavaScript.
Example
<!DOCTYPE html>
<html lang="en">
<body>
<input type="text" placeholder="Please Enter your Task Here.." id="txtData">
<button onclick="todoList()">AddTaskToDo</button>
<ul id="to_do_list"></ul>
<script>
function todoList() {
const myTask = document.getElementById('txtData');
const addToDoList = document.getElementById('to_do_list');
let originalValue = `<li> ${myTask.value} </li>`;
myTask.value = '';
addToDoList.insertAdjacentHTML('beforeend', originalValue);
}
</script>
</body>
</html>
On running the above script, the output window will pop up, displaying the input field TODO along with a button on the webpage. When the user enters the task in the field and clicks the button, it will list out all the tasks in an unordered list format.
Using querySelector() in JavaScript
When a selector or set of selectors is provided, the Document method querySelector() returns the first Element in the document that matches them. Null is given back if there are no matches.
Syntax
Following is the syntax for querySelector()
element = document.querySelector(selectors);
Example
In the following example, we are running the script using querySelector() to make a TODO list and also to remove the task that was entered in TODO.
<!DOCTYPE html>
<html>
<body style="background-color:#EAFAF1">
<div id="tutorial">
<input type="text" placeholder="Enter Tasks To Complete">
<button id="tutorial1">Add</button>
<div id="tutorial2"></div>
</div>
<script>
document.querySelector('#tutorial1').onclick = function(){
if(document.querySelector('#tutorial input').value.length == 0){
alert("Please Enter Task TODO")
} else {
document.querySelector('#tutorial2').innerHTML += `
<div class="perform">
${document.querySelector('#tutorial input').value}
<button class="remove">Remove Task
<i class="far fa-trash-alt"></i>
</button>
</div>
`;
var current_tasks = document.querySelectorAll(".remove");
for(var i=0; i<current_tasks.length; i++){
current_tasks[i].onclick = function(){
this.parentNode.remove();
}
}
}
}
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of an input field called TODO along with a button displayed on the webpage. When the user adds the task and clicks the buttons, it displays that task in the TODO list along with a remove button.
1K+ Views
To Continue Learning Please Login