/FrontEndMentor-Solution---to-do-app-

Primary LanguageJavaScript

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.

Table of contents

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

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

Screenshot

My process

Built with

  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Mobile-first workflow
  • React - JS library
  • react-gh-pages - for deployment onGitHub Pages

Notes

  • This originally was completed with prop-drilling but thanks to @andrewg010 (see #Acknowledgments), it was converted to use context
  • I was not able to implement the light/dark theme toggle - I think I'd need to utilise npm packages to complete this.
  • Likewise for the drag-and-drop feature.

Useful resources

  • Using localStorage with React Hooks - LogRocket - Ibadehin Mojeed's thorough explanation how to utilise localStorage with React Hooks was extremely helpful - along with their useLocalStorage custom hook which was used in this project.

Author

Acknowledgments