To-Do List w/ jQuery

Table of Contents

• How to Use
• Instructions
• How I built the Color Game

How to Play

Click the link here

Instructions

• Write your to do's in type your todo input field
• Click on the todo to cross out the one's that are done
• Hover over to the right end of the todo to bring out the trash icon to delete

How I built the Color Game

• Designed the app first in Adobe XD before coding.
• Setup HTML with div, ul, li for list items and added classes and id to take the element for manipulation
• CSS for design the whole app
• Used jQuery to make interactive decisions
• Started with toggleClass method to change 'completed' class which when click, crossed of the list item
• Moved on to remove the list when trash icon clicked. Also, added fadeOut method for clean effect
• Used keypress event to listen for the enter key and add the input to a new list
• Lastly added an event to the plus sign which fade out the input field.

I made a Youtube video of the whole process from start to finish

can be found Here

Hope you enjoy the App !