How to make a to-do list using Javascript

HTML

For the html you’ll simply need an input element and a button that’ll be used to add the task, below them is a div element with a list that’s where the tasks will be at. You can also add a placeholder to the input if you want or just st…


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Lens

HTML

For the html you'll simply need an input element and a button that'll be used to add the task, below them is a div element with a list that's where the tasks will be at. You can also add a placeholder to the input if you want or just stylize it. Below it we'll make a div element with a list, that'll be where the tasks will be. Each of these elements will have an id that we'll use to attatch the javascript. We can also use a checkbox but the javascript for it is a little bit more complex so i'll just go with the simple way.

<html>
<body>
<!--we put them in a div so they can be aligned-->
<div>
<input placeholder="Add a task!" id="enterTask">
<button id="AddBtn">Create</button>
</div>
<div>
<ul id="taskList">

</ul>
</div>
</body>
</html>

html layout

Creating tasks

First we need to get the input, button, and unordered list element stored in a variable. Next we give the button an event listener since it'll be the button that'll add the task. We'll set it to click and give it a function. Inside the function we make a variable called task with a lielement in it. its HTML will be the same as the inputs value meaning whatever the user put in the input element will be the list items text. Finally we add it's parent by using appendChild on the list area and setting it to the task variable.

When you run this it should add tasks that you type in the input!

var input = document.getElementById('enterTask');
var button = document.getElementById('addBtn');
var listArea = document.getElementById('taskList');

button.addEventListener('click', function() {
//adding the tasks
var task = document.createElement('li');
task.innerHTML = input.value;
listArea.appendChild(task);
});

Deleting tasks

To delete them you have to give the task/list item an event listener INSIDE the buttons event listener. This is because the variables are local, meaning they only work inside the function in the event listener. We gave the task a click event and a function that uses removeChild to delete the task area's child. Under the event listener we'll put an if statement, with it's condition being that if the length of the input is 0 the task will automatically delete before its seen. This is so nobody can make empty tasks.

button.addEventListener('click', function() {
//adding the tasks
var task = document.createElement('li');
task.innerHTML = input.value;
listArea.appendChild(task);
//deleting the tasks
 task.addEventListener('click', function() {
    listArea.removeChild(task);
  })
  if (listLength.length === 0) {
    listArea.removeChild(task);
  }});

How to stylize

A bulleted point isn't a good look on a list item, so we can take it off by setting the ul's list type to none. You can also give it an outline with a border and space each list item by adding gaps. The rest is up to you! After all you can make a to-do list in any way you want. Try to get creative with the looks, like how i gave mine an animation whenever a new task was made!


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Lens


Print Share Comment Cite Upload Translate Updates
APA

Lens | Sciencx (2022-11-27T00:14:46+00:00) How to make a to-do list using Javascript. Retrieved from https://www.scien.cx/2022/11/27/how-to-make-a-to-do-list-using-javascript/

MLA
" » How to make a to-do list using Javascript." Lens | Sciencx - Sunday November 27, 2022, https://www.scien.cx/2022/11/27/how-to-make-a-to-do-list-using-javascript/
HARVARD
Lens | Sciencx Sunday November 27, 2022 » How to make a to-do list using Javascript., viewed ,<https://www.scien.cx/2022/11/27/how-to-make-a-to-do-list-using-javascript/>
VANCOUVER
Lens | Sciencx - » How to make a to-do list using Javascript. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/11/27/how-to-make-a-to-do-list-using-javascript/
CHICAGO
" » How to make a to-do list using Javascript." Lens | Sciencx - Accessed . https://www.scien.cx/2022/11/27/how-to-make-a-to-do-list-using-javascript/
IEEE
" » How to make a to-do list using Javascript." Lens | Sciencx [Online]. Available: https://www.scien.cx/2022/11/27/how-to-make-a-to-do-list-using-javascript/. [Accessed: ]
rf:citation
» How to make a to-do list using Javascript | Lens | Sciencx | https://www.scien.cx/2022/11/27/how-to-make-a-to-do-list-using-javascript/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.