Build a To-Do List with HTML/CSS/JS

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:

index.html - for our markup
style.css - for styling
app.js - for the function(s)

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
To add the li to the list, the variable set to the create element method for the li tag should use the appendChild method to create a text node of the variable set to the input id’s value. This is basically just setting the input id’s value to the li tag.
Moving on, the variable set to the ul’s id should use the appendChild method again for the variable used to set the create element method. This will actually create the li of the input text in the ul.
Lastly, we can set the input id’s value to nothing (so that one can type in the next task easily) and use the variable for the li tag and the onclick event to equal to our next function to remove the task from the ul.
But wait! How do we know when to run this function to add taks? That’s why we need to write a document.body.keyup event which will be equal to a function (a variable). Then, in that function, there must be an if statement stating if the (that variable).keyCode == 13, our function that we wrote above should run. (13 is the code for the enter key)

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!

Build a To-Do List

By Samay Shamdasani

Getting Started

The function

Stylin’ it up