How to create a Simple TO DO App using JavaScript?
It is very simple to create a To-Do app. Here is the example of My To Do app which is created by JavaScript.
HTML Code
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>TO DO App</title>
</head>
<body class="bg-primary">
<div class="container">
<div class="card px-4" style="width: 18rem;">
<div class="card-header my-2">
<b><h3>To Do List</h3></b>
</div>
<input type="text" id="task_field" placeholder="Add a New Task" class="form-control my-4">
<!--Add Item to ongoing list-->
<span class="text-muted"><small>Ongoing Tasks</small></span>
<ul class="list-group list-group-flush" id="menu">
</ul>
<!--Add Item to completed list-->
<span class="text-muted"><small>Completed Tasks</small></span>
<ul class="list-group list-group-flush" id="com_menu">
</ul>
<div class="container my-3">
<button class="btn btn-primary" id='add_btn'>Add Task</button>
</div>
</div>
</div>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
JAVASCRIPT CODE
<script type="text/javascript">
var menu, btn, task, com_menu;
menu = document.getElementById('menu');
com_menu = document.getElementById('com_menu');
task = document.getElementById('task_field');
btn = document.getElementById('add_btn');
btn.addEventListener('click', function(){
var task_val = task.value.toUpperCase();
if(task_val)
{
var li, del_btn, check_button;
li = document.createElement('li');
del_btn = document.createElement('button');
check_button = document.createElement('button');
li.appendChild(document.createTextNode(task_val));
li.setAttribute('class', 'list-group-item');
check_button.setAttribute('type', 'checkbox');
check_button.style.float = 'right';
check_button.setAttribute('class', 'form-check-input mx-3');
check_button.onclick = function(){
li.parentNode.removeChild(li);
var com_li;
com_li = document.createElement('li');
com_li.appendChild(document.createTextNode(task_val));
com_li.setAttribute('class', 'list-group-item');
com_menu.appendChild(com_li);
}
del_btn.appendChild(document.createTextNode('Delete'));
del_btn.style.float = 'right';
del_btn.setAttribute('class', 'btn btn-danger btn-sm');
del_btn.onclick = function(){
li.parentNode.removeChild(li);
}
li.appendChild(del_btn);
li.appendChild(check_button);
menu.appendChild(li);
task.value = "";
}
else
{
alert('Write a Task, Please.');
}
});
</script>
Top comments (10)
Perfect...
You should host it online, so that we can preview it.
Hy you can test it here :-)
Regards
TestToDo
Thank You to hosting it.
I m busy in my next project so I did not get time to host it.
I didn't host anything, try flems and yhe only you have to do is copy the url
and copy in your post
Regards
Here is mine 😄
Nice.
I checked your To Do and It's good.
Thank you very much 😄
LISTEN: WE DONT NEED 50000 TUTORIALS ON HOW TO DO A TO DO LIST!
OMG
What do u want?
Tell me...
Just kidding