Creating a TODO with JavaScript

[clique aqui para português]

A task list is something that helps a lot in our chores, making it possible to list and organize which tasks to do, so we will create a task list using only HTML and JAVASCRIPT, and a small class in CSS.

CODE

First we will create the interface, we will do something simple, using only HTML.

<h1>Lista de tarefas</h1>

<form name="form_main">
  <label for="task">Tarefa: </label> 
  <input type="text" name="task" id="task" /> <br />
  <button type="button" onclick="add()">Add</button>
</form>

<fieldset>
  <legend>Tarefas:</legend>
  <ul>
    <li>Limpar casa</li>
    <li>Outras</li>
  </ul>
</fieldset>

In the HTML structure an input was created to receive our task and a button was also created that triggers the add() function.

We will also need a CSS class to give a 'streaky' effect to completed tasks.

.checked {
  text-decoration: line-through;
}

The checked class is used only to define text as 'streaky' when completing a task.

Now let’s create the add() function.

function add() {
  let li = document.createElement('LI');
  let input_value = document.form_main.task.value;
  let input_text = document.createTextNode(input_value);

  li.appendChild(input_text);
  document.querySelector('ul').appendChild(li);
  document.form_main.task.value = "";

  createCloseButton(li);
}

The add() function creates a new element (task) in the list.

Within the add() function, a call is made to the createCloseButton() function, which is the function we are going to create now.

function createCloseButton(li) {
  let span = document.createElement("SPAN");
  let txt = document.createTextNode("\u00D7");

  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);

  span.onclick = () => span.parentElement.style.display = "none";
}

In the createCloseButton function we create a span with an x, which when clicking the element is hidden.

As the list is already with some items we will create a loop to go through all the li and add the close button.

Finally, we will add a click event to all li, and when clicking add the class checked.

document.querySelectorAll('li').forEach(createCloseButton);

document.querySelector('ul').addEventListener('click', (e) => {
  if (e.target.tagName === 'LI')
    e.target.classList.toggle('checked');
});

ready as simple as that.

Demo

See the complete project working below.

Youtube

If you prefer to watch, I see the development on youtube (video in PT-BR).

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you! 😊😊