Frontend Mentor - Todo app solution

This is a solution to the Todo app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Add new todos to the list
• Mark todos as complete
• Delete todos from the list
• Filter by all/active/complete todos
• Clear all completed todos
• Toggle light and dark mode
• Bonus: Drag and drop to reorder items on the list

Links

• Solution URL: (https://github.com/ZainMhrez/todo-app-frontend-mentor)
• Live Site URL: (https://zainmhrez.github.io/todo-app-frontend-mentor/)

Built with

• HTML5
• Sass/scss
• Flexbox
• Javascript
• Local storage
• Accessibilty
• SortableJS - JavaScript library for reorderable drag-and-drop lists.

Useful resources

• resource 1 - This helped me alot with making an accessible custom checkbox.

• resource 2 - This helped me to Code rounded gradient borders.

• resource 3 - This helped me in to-do-list functionality.

• resource 4 - This helped me to drag and drop items.

Author

• Linkedin - (https://www.linkedin.com/in/zain-mhrez/)
• Frontend Mentor - (https://www.frontendmentor.io/profile/ZainMhrez)
• Twitter - (https://twitter.com/zainmhrez1)
• Facebook - (https://www.facebook.com/zain.syria.12/)