Complex To-Do List

Overview

This project is a complex to-do list application built using HTML, CSS, and JavaScript. It allows users to add tasks, prioritize them, mark them as completed, and delete them. The tasks are visually organized based on their priority levels, and the UI features animations for adding and removing tasks.

The challenge

The challenge was to create an interactive and visually appealing to-do list that allows users to prioritize tasks and manage their completion status effectively.

Screenshot

Links

• Live Site URL: https://shivomtiwari27.github.io/To-do-list/
• Source Code: https://github.com/ShivomTiwari27/To-do-list

My process

Built with

• Semantic HTML5 markup
• CSS Flexbox for layout and responsive design
• CSS Animations for smooth transitions
• JavaScript for task management, event handling, and DOM manipulation

What I learned

In this project, I enhanced my skills in:

• JavaScript DOM Manipulation: Used JavaScript to dynamically create, sort, and remove tasks based on user input.
• CSS Animations: Implemented animations for adding and removing tasks, which improved the user experience.
• Task Prioritization: Created a system to prioritize tasks visually and functionally based on their importance.

Continued development

In future iterations of this project, I plan to:

• Add local storage support to save tasks between sessions.
• Implement a drag-and-drop feature for reordering tasks manually.
• Introduce categories or tags for better task organization.

Useful resources

• MDN Web Docs - JavaScript DOM - Helped with understanding and implementing DOM manipulation.
• CSS-Tricks - Flexbox Guide - Provided insights into using Flexbox for responsive layouts.
• CSS Animations on MDN - Guided the implementation of smooth animations for UI transitions.

Author

• GitHub - Shivom Tiwari

Acknowledgments

Special thanks to MDN Web Docs for the detailed documentation that greatly assisted in developing this project.