Build a To-Do List



Tweet

Getting Started

In this project, we’ll make our very own to-do list! This project will incorporate several JavaScript functions to add and remove tasks from our list.

Let’s start by creating three files:

Our basic markup will consist of:

Here’s what our HTML file should look like:

<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="style.css" />
      <title>
         To-do List
      </title>
   </head>
   <body>
      <input id="input" placeholder="What needs to be done?">
      <ul id="list"></ul>
   </body>
   <script src="app.js"></script>
 </html>

The function

To make our to-do list work, we need it to do three things at the minimum:

How can we implement this? Well, we need to create a function that runs whenever the enter key is pressed. Then, that function will add that input text to the ul as a li. At that moment, the input text box will also be erased so that one can type in the next task. Also, on click of a task, it must be passed on to another function which will remove it from the parent element (ul).

Here’s how we should go about this:

I know this may seem confusing, but try to set up your own variable names and make an attempt! If you’re successful, you should be able to add a task to the list by clicking the enter key! Here’s our first two functions:

function newItem() {
	var item = document.getElementById('input').value;
	var ul = document.getElementById("list");
	var li = document.createElement('li');
  li.appendChild(document.createTextNode("- "+item));
  ul.appendChild(li);
  document.getElementById('input').value="";
  li.onclick = removeItem;
  }

  document.body.onkeyup = function(e){
      if(e.keyCode == 13){
        newItem();
      }
  }

Now, we can add tasks, but what about removing them? In our first function, we specified that li.onclick would equal our removeItem() function. Let’s write that.

Looking back, we see that the ul is our parent element, while the li is the child element. To remove the li, all we would really need to do is well, remove the child of the parent element. We can do that easily with the target event. This is how we would write it:

function newItem() {
	var item = document.getElementById('input').value;
	var ul = document.getElementById("list");
	var li = document.createElement('li');
  li.appendChild(document.createTextNode("- "+item));
  ul.appendChild(li);
  document.getElementById('input').value="";
  li.onclick = removeItem;
  }

  document.body.onkeyup = function(e){
      if(e.keyCode == 13){
        newItem();
      }
  }

  function removeItem(e) {
  e.target.parentElement.removeChild(e.target);
  }

That’s it! We can now click on any li to remove it from the list.

Stylin’ it up

Right now, all we have is an ugly bulleted list. Here’s my attempt at making it look prettier. However, feel free to experiment with the styling yourself.

  html{
	font-family: "Avenir Next", Helevetica, sans-serif;
	text-align: center;
  }

  body {
	max-width: 500px;
	margin: 0 auto;
  }

  input {
	padding-top: 30px;
	width: 500px;
	height: 60px;
	font-size: 40px;
	border: 0;
  }

  input:focus {
	outline:none;
  }

  li {
	text-align: left;
	font-size: 40px;
	list-style: none;
	margin: 0;
  }

  li:hover {
	text-decoration: line-through;
  }

Take a look at the result. What do you think? If you feel good, try building something slightly more advanced like a web paint app!