graememscott commented 5 years ago

Creating a to-do list with Vanilla Javascript

Step 1) Creating the markup

We'll need 3 HTML elements for this:

<input />: used to type in a new item on the to-do list
<button />: used to submit a new item to the to-do list
<ul />: stores to-do list items

Let's add some classes to make our lives easier in the following steps:

<input class="todo--input" />

<button class="todo--submit">Add</button>

<ul class="todo--list"></ul>

Step 2) Selecting the elements

We can use 3 "document.querySelector"s to get each of the elements we created in the last step. Let's also store them all in variables so we can easily reference them later:

var todoInput = document.querySelector(".todo--input");

var todoSubmit = document.querySelector(".todo--submit");

var todoList = document.querySelector(".todo--list");

Step 3) Creating an event listener for our button

All we need here is a simple "click" event listener for our todoSubmit button, nothing fancy!

todoSubmit.addEventListener("click", function() {
  // We'll create our to-do list items here!
});

Step 4) Getting the current value of our input

We need to do two things to make our button create new items in our list:

Get the current "value" of the todoInput input element
Append that value to the list

To the current value of our input, we simply need to get the "value" property of the todoInput input element:

todoSubmit.addEventListener("click", function() {
  console.log(todoInput.value);
});

Step 5) Creating a new list item

Now that we have our value, let's append it to the list! We can use the insertAdjacentHTML() function on our todoList ul element to add our new item to the list

insertAdjacentHTML() accepts two arguements, the first being what you want to append and the second being the position that you want to add the element:

"beforebegin": Before the element itself
"afterbegin": Just inside the element, before its first child
"beforeend": Just inside the element, after its last child
"afterend": After the element itself

In this case, we want "beforeEnd" so that our new item is always added to the bottom of the list:

todoSubmit.addEventListener("click", function() {
  todoList.insertAdjacentHTML("beforeEnd", todoInput.value);
});

The above code will only append the text to the todoList ul element. What if we wanted to append an <li /> tag with todoInput.value inside?

We can do some string concatenation to wrap our todoInput.value within an <li /> tag using the "+" symbol:

todoSubmit.addEventListener("click", function() {
  todoList.insertAdjacentHTML('beforeEnd', '<li>' + todoInput.value + '</li>');
});

Step 6) Close to-do items

Now that we can create to-do items, we need to be able to close them once we're done with them! How we're going to approach this is by adding an event listener on each item in the to-do list!

This brings up the issue of dynamically created objects. When we created the event listener for our todoSubmit button, since the html was already on the page, it worked just as we expected!

However, since we are adding new elements to the page after the javascript has run, we will need to add an event listener to each new list item when it's created.

First things first, we will need to get the new list item we just created so we can add an event listener to it by using the "lastChild" property on our todoList ul element:

todoSubmit.addEventListener("click", function() {
  todoList.insertAdjacentHTML('beforeEnd', '<li>' + todoInput.value + '</li>');

  console.log(todoList.lastChild);
});

Now that we have our new list item, we can actually nest a second event listener inside the event listener for our todoSubmit button so that it only gets created when we click the button. Let's also put our new list item in a variable so it's a little easier to read:

todoSubmit.addEventListener("click", function() {
  todoList.insertAdjacentHTML('beforeEnd', '<li>' + todoInput.value + '</li>');

  var newListItem = todoList.lastChild;

  newListItem.addEventListener("click", function() {
    // We will remove the list item here!
  });
});

Last but not least, we'll need to add some code into our newListItem event listener to remove it from the DOM using the handy dandy "removeChild()" function on the todoList ul element:

todoSubmit.addEventListener("click", function() {
  todoList.insertAdjacentHTML('beforeEnd', '<li>' + todoInput.value + '</li>');

  var newListItem = todoList.lastChild;

  newListItem.addEventListener("click", function() {
    todoList.removeChild(newListItem);
  });
});

Step 7) Have fun!

Style the to-do list! (Style the input and buttons, or try adding more HTML elements to the list items! For example: "<li><span>" + new Date() + "</span>" + todoInput.value + "</li>")

Create a "Close All" button that removes all the items from the list! (Hint: you can either loop through all the items and remove them of just set the "innerHTML" of todoList to blank!)

Clear out the input tag on submit (Hint: Set the "value" of our input back to blank after the new item has been added to the list!)

Step 8) TLDR;

<input class="todo--input" />

<button class="todo--submit">Add</button>

<ul class="todo--list"></ul>

<script>
  var todoInput = document.querySelector(".todo--input");
  var todoSubmit = document.querySelector(".todo--submit");
  var todoList = document.querySelector(".todo--list");

  todoSubmit.addEventListener("click", function() {
    todoList.insertAdjacentHTML('beforeEnd', '<li>' + todoInput.value + '</li>');

    var newListItem = todoList.lastChild;

    newListItem.addEventListener("click", function() {
      todoList.removeChild(newListItem);
    });
  });
</script>

graememscott commented 5 years ago

This is what we did at my place. Added keydown functions

var todoInput = document.querySelector('.todo--input');

var todoSubmit = document.querySelector('.todo--submit');

var todoList = document.querySelector('.todo--list');

function createToDo() {
  if (todoInput.value === "") {
    return;
  }

  todoList.insertAdjacentHTML("beforeend", "<li>" + todoInput.value + "</li>")

  var newListItem = todoList.lastChild;

  newListItem.addEventListener("click", function () {
    todoList.removeChild(newListItem);
  })

  todoInput.value = "";
}

todoSubmit.addEventListener("click", function () {
  createToDo();
})

todoInput.addEventListener("keypress", function (event) {
  if (event.keyCode === 13) {
    createToDo();
  }
})

Sam-Smyth commented 5 years ago

Had a hack at adding some check boxes to this, but got stuck. Styled it rather nicely, though. Just made a commit with all of it in there.

graememscott / company-site

Challenge #2: Create A To-do List #4