Todo-List
This is a very simple TODOs list created by me using HTML, CSS Styling, Vanilla JS and Basic Jquery DOM Manipulation.
Features of list:
- To Add items to the list just type in the top input box of the list and hit enter to place item onto list
- To mark item/task as completed click on the item and it will get marked off. Click again and the item gets displayed without the line-through.
- To delete items hover over the items to the left and you should see an animated trash icon; Upon clicking the trash icon the item gets deleted from the list
Potential Cons:
-
The list is static as it is based on a HTML template and hence any item added will not get stored as there is no Database routed to this APP. Hence refreshing the webpage will get the items erased and set back to default.
-
The list is singular and while I did attempt to make multiple lists in the webpage for adding multiple categories of lists, due to time constraint, it was not possible for me to implement them.
How they all work together:
The Display site (frontend):
-
The application frontend was created using a HTML file (index.html) and the styling was done using CSS. The icons and font designs were made using font-awesome-5 and Google fonts respectively.
-
The basic animations incorporated are the fading of items upon deletion and trash icon sliding right upon mouse hovering.
Backend works:
-
The backend works such as clicking, adding, and deleting functions for the list items were done using Basic JQuery DOM Manipulation, where I was able to select the HTML elements using their respective IDs and then perform functions on them.
-
It was very beneficial to refer to the JQuery documentation website for some of the Jquery functions.
I wanted this project to be accomplished using simple tools such HTML, CSS Styling, Vanilla JS and Basic JQuery DOM Manipulation, and it was a success that I was able to complete them using these tools and nothing more; (Well I deployed them using Heroku;) )
Otherwise, feel free to see my project and use them!