Build a To-Do List

a simple, useful web app for tasks



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: - html, head, title, and meta viewport tags - linking the style.css and app.js files - an input tag with an id and placeholder text (where tasks are typed) - lastly, an empty unordered list, or ul tag with an id. The ul tag is the parent tag for the li tags that we will create in the JavaScript function.

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: - add tasks on press of the enter key - remove text in the input box when enter key is pressed - remove tasks on click

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: - write a function to add tasks with the following variables: - a variable set to the input id’s value - a variable set to the ul id - a variable set to the create element method for the li tag

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!