Now Open it with Live Server by right-clicking on the “index.html” file (inside visual studio code), then scroll down and click on the “Open with Live Server” option and take a look at it at the browser. This is going to hold all our todo items.

Then below the, we have an with class=”todo-items”.

Then we have a of type=”submit” and class=”add-button”.

Inside the, we have an box of type=”text” with class=”todo-input”.

Then below that, we have a with class=”todo-form”.

Inside that, we have a which says “Todo”. Open “index.html” and type the following: Todo List Todo Add Go to Gym X Now let’s get started… Initial SetupsĬreate a folder structure similar to below: That’s what we all want to do and trust me it’s quite simple 😀.

Then always save the todo items permanently on LocalStorage.

Strikeout the todo item if it is completed.

Search for “Live Server” by Ritwick Deyīut wait, How we are going to build this thing? Breaking Down the Logic.

If you don’t have Live Server installed, then:

And finally, make sure you have installed Live Server by Ritwick Dey in visual studio code. You are free to use whatever code editor you like. I am going to use visual studio code as my text editor. You should also have a knowledge of forEach loop, filter function, = and =, Conditional (ternary) operator, functions, template literals, and Javascript Object.īut anyway feel free to follow along, I will try my best to keep this tutorial simple. We are going to focus on HTML and mainly Javascript.

I am not going to explain CSS, instead, you can just copy the code for the CSS file. I assume that you had a decent understanding of HTML, CSS, and Javascript. You can download the completed project from GitHub → Todo List App Github Prerequisites

This tutorial was initially published in my blog, if you are interested to see more tutorials like this then check out this link - īefore jumping right in first, take a look at the finished product here at Codepen → Todo List Codepen In this tutorial, you will learn how to create a simple Todo List App using HTML, CSS, and Javascript. Howdy Folks, Welcome to this new tutorial. How to Build a Todo List App With Javascript and Local Storage

Todo list app