HTML, CSS, JS Todo tutorial

Purpose

Our Todo app will be our beginner project for getting the hang of html, CSS, and JS used in combination. This app will allow the user to keep track of things they need to accomplish from any size device. You should have some experience with these but I will also reference resources for aspects that may be new to you.

HTML, CSS, JS Todo tutorial — YouTube

Here is the Github repo.

Determine how your app will work and appear

The Todo app we will create

The user should be able to…

…check a box to indicate it has been completed

…see how many tasks they have left to do

…add new tasks to a list

…remove tasks from a list

Create the UI

The UI is composed of a header, a list, filter buttons, and a form for a new task.

Header

html:

<header>
 <h1 id="title" class="text-align">Todos</h1>
</header>

CSS:

All our style we will add to style.css file since we don’t have to do too much.

#title {font-size: 2rem;} .text-align {text-align: center;}

List and filters

Our todos div will include the todo-list, number of tasks left and the filters.

html:

<main>
 <div id="todos">
  <ul id="todo-list"></ul>
  <div class="flex flex-around border todo">
   <span id="tasks-left">0 tasks left</span>
   <span class="filter-item" onclick="filter('all')">all</span>
   <span class="filter-item" onclick="filter('active')">active</span>
   <span class="filter-item" onclick="filter('completed')">completed</span>
  </div>
 </div>
</main>

CSS:

We will utilize flex to make everything appear the appropriate size on different screen sizes. When a filter is selected we want it to have a border around the button.

html:

.todo {width: 100%; height: 20px;}
.todo:nth-child(even) {background-color: gray;}
.todo:nth-child(odd) {background-color: lightgray;}
.flex {display: flex;}
.flex-around {justify-content: space-around;}
.filter-item {cursor: pointer;}

JS:

The javascript will be in a separate file main.js. The filter function will rely on getting all our todos from an array of todo objects containing a completed variable that will be set to true or false and a name for the task. We will filter for three different things: all tasks, only the active/not complete tasks, and only show the completed tasks. When we filter we remove the todos from the array so we can start with a empty array to add tasks to.

filter

removeTodos willl go through all the child nodes in our unordered list which we are getting by id and remove them until there are no tasks remaining.

removeTodos

getTodos will add tell addTodoElement to add a list element for every task we have in the list we pass in to it.

getTodos

addTodoElement creates the task with a checklist, a task name, and a delete button and append it onto the DOM on the unorderedList.

addTodoElement

This will be our helper function to allow us to set the name of the tag and the options such as the innerText (task name), onclick (what the element should do when we click it) and the classes we want the element to have.

createElementWithAttr

Several of out functions will also call changeTasksLeftSpan which will change the tasks left to the number of tasks remaining that have not been completed.

changeTasksLeftSpan

Task form

html:

<form action="" class="flex flex-between">
<input type="text" id="todo-input" />
<input type="button" onclick="addToTodoList()" value="+" />
</form>

CSS:

.flex-around {justify-content: space-around;}
.flex-between {justify-content: space-between;}
#todo-input {width: 100%;}

JS:

addToTodoList will create a new todo object and append it to out todoList. It will also tell addTodoElement (shown above) to add this to the DOM.

addToTodoList

Link the CSS and the JS:

<link rel="stylesheet" href="style.css" />
<script src="main.js" defer></script>