This is an implementatin of a todolist javascript application that demonstrates how you can use vanilla javascript to create your own javascript components using DOM Manipulation.
The Process is abit cumbersome and requires you to write alot of javascript code for every component, a process that has been made easy by frontend frameworks like React, Angular, Vue and the likes
The application is loaded from index.html file which loads the todolist.js module
The todolist.js module is the entry point of the application. It loads all the initial application components
The Components directory/folder contains some of the sample components like
- a generic button
- a container for grouping components
- a task component for each task create
- a taskList for holding all the tasks together
This application manages it's own state using the app.state.js. This file defines some variables and methods for manipulating the data:- retrieving, adding, removing and marking.
It also uses the browser localstorage to persist data locally
In the adveture of trying to uncover how most frontend frameworks work behind the scenes I went on a journey to unlearn what I already know about JavaScript / HTML / CSS and relearning afresh, and who knows, I might create my own framework 😉