Skip to content

Latest commit

 

History

History
63 lines (43 loc) · 2.29 KB

README.md

File metadata and controls

63 lines (43 loc) · 2.29 KB

Frontend Mentor - Todo app

Design preview for the Todo app coding challenge

The challenge

The challenge is to build out this todo app and get it looking as close to the design as possible.

  • Figma and Sketch files are provided
  • There is also a style-guide.md file, which contains information such as color palette and fonts.

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

Installation

This project was bootstrapped with Create React App.

In the project directory, you can run: npm start to run the app in development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Features I added

  • Drag and drop to reorder items on the list
  • Local storage of todos

Technologies I used

Learning outcomes

My focus for this project was to:

  • One of the overarching lessons for me in developing this app was project structure as it is the most complex React app I've worked on.
  • Style a React app with styled-components for the first time.
  • Utilized local storage for the first time.
  • Implement color themes in a React app for the first time.
  • A few things I could improve that I wasn't able to address before submission:
    • The todo items flicker sometimes after dropping them in the drag and drop
    • Improve accessibility practices

My profile at Frontend Mentor

En-Jen