Building To-Do List App Using Vanilla JavaScript For Absolute Beginners
--
The best way to learn something is by doing. In this tutorial, we will be building a To-Do List app using pure JavaScript. If you are a beginner and tired of studying from boring theoretical tutorials then you are in a right place because here we will practically build this To-Do app from scratch. Don’t worry I have explained each and every step to develop our To-do app.
In this app, we will be able to add new tasks to be done, delete tasks, mark tasks after completion, we will have a drop-down menu to filter our tasks on basis of completed or incomplete tasks.
So without any further delay let’s get started with the coding.
We have to create a folder and we have to create three files there:
- index.html
- styles.css
- main.js
HTML file for our app
As this tutorial mainly focuses on teaching JavaScript concepts, I assume that you must be familiar with the HTML syntax and easily understand above code but still we will discuss briefly about what’s happening in this html file.
In body tag of our file we have three main section: 1. Heading 2. Form 3.Task Container and at last we are just linking our JavaScript file.
Heading section as you already guessed contains title of our app.
In form section, we have an input element to enter a new task, a button to display that task below, a dropdown which filters our tasks on basis of completed or incomplete tasks.
In task container section we have all our tasks which are added to our page dynamically when user adds a task through JavaScript.
