A Todo List App in HTML CSS & JavaScript
In this todo app, you can easily add, edit, or delete your task. There are filters button too that helps you to filter your tasks. The tasks you added on this todo app will be stored in the browser local storage so, it won't be removed on page refresh or tab close.
Once the user gets into this app. The user might not have any recently saved tasks. In order to enter the new task into the todo list. The user simply have to click on the input section and start typing. Once the user has typed everything, simply press the Enter Key. The data will be auomatically saved into the list of tasks and will be displayed on the page along with other tasks (if any exists). Along with the data, a number of functionalities will be provided to the user which we will talk about later. In the start, the status ofd the task is set to Pending which means this task needs to be done. Once the user has completed the task. In order to verify it, the user simply has to check the checkbox of the task. The Strike through line will indicate that this task has been completed by the user and in the backend, the status is changed from pending to Completed.
The users have also been provided with some additional functionalities of edit and delete. The option lies in the ellipsis. Click on the three dots then menu will appear. If the user want to Edit the content of the note, the the user simply have to choose the note that he/she wants to edit and then click on the Edit option. The content will appear in the textbox. The user can edit and then press the Enter key. The data will be updated. On the other hand, if the user want to Delete the particular note then the user can click on the Delete option, the note will be deleted from the list and the content will be updated.
The filters have also been applied so that the user could jump to the filter to see their jobs pending or done.
Following are some of the new features and learning encountered while creating this amazing project:
- The data is being saved and retrieved from the Local Storage which means the data is not lost even after the page refresh.
- The is inserted on pressing the Enter Key, so no kind of button is needed here to insert the data.
- The option are provided on the click option to Edit and Delete the note.
- Filters provide an exceptional visibility to separate the jobs.
Follwing resources have been used in maing this project:
- BrandCrowd for making the logo of this web application.
- FavIconConverter, to convert the image into the favicon.
- Box Icons for importing icons into the application.
- Google Fonts is used for importing the fonts from Poppins Family.
This app is quite useful in daily life and will help many people in many ways. You can access this app through the link given below:
To Do List App
If this app helps you in any way, then do star ths repository.
Follwing technologies have been used at the core of this application to make it stand in the market place:
- HTML
- CSS
- JavaScript
- Browser's Local Storage
The user pressent in another filter when enters the data, it is displayed in the in the same block rather than in all categories, this should be handled wisely.
This has also been handled by myself.
The scroll activity has been enabled, the user can add as many tasks as he/she wants to. The check boxes have now now the pointer effect enabled.
The website is deployed using the free hosting provided by **Vercel**
Later on the link was customized using the well known url shortner and customizer **Rebrandly**:
Muhammad Abdullah Butt
abdullahbutt12292210@gmail.com