HTML, CSS, JS Todo tutorial


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> <h1 id="title" class="text-align">Todos</h1></header>


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.


<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>


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.


.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;}


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.


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.


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


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


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.


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.


Task form


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


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


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.


Link the CSS and the JS:

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




I am a Software engineering student in my senior year with most of my experience in web development and related technology.

Love podcasts or audiobooks? Learn on the go with our new app.

20 Reasons to do Angular In Nx

Understanding Node as a Java Developer

Fundamentals of Rest API response codes

Photo By Markus-Spiske on Unsplash

The First Step Is Choosing What to Learn

Redux Retry

React Hook Basics: useState()

React vs. Vue

Storybook 6 Migration Guide

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


I am a Software engineering student in my senior year with most of my experience in web development and related technology.

More from Medium


My Front-End Path

50 Projects In 50 Days — HTML, CSS & JavaScript

CSS Basics #1: First Steps