https://github.com/zun-liang/fem-todo-app

Frontend Mentor Challenge Solution Todo App
https://github.com/zun-liang/fem-todo-app

css html javascript nanoid react react-beautiful-dnd styled-components vite

Last synced: 9 days ago
JSON representation

Frontend Mentor Challenge Solution Todo App

• Host: GitHub
• URL: https://github.com/zun-liang/fem-todo-app
• Owner: zun-liang
• Created: 2023-08-30T10:56:06.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2024-01-02T09:00:20.000Z (11 months ago)
• Last Synced: 2024-01-03T10:15:04.210Z (11 months ago)
• Topics: css, html, javascript, nanoid, react, react-beautiful-dnd, styled-components, vite
• Language: JavaScript
• Homepage: https://zun-liang.github.io/fem-todo-app/
• Size: 3.13 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Frontend Mentor - Todo app solution

This is a solution to the [Todo app challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/todo-app-Su1_KokOW). Frontend Mentor challenges help you improve your coding skills by building realistic projects.

## Table of contents

- [Overview](#overview)

  - [The challenge](#the-challenge)

  - [Screenshot](#screenshot)

  - [Links](#links)

- [My process](#my-process)

  - [Built with](#built-with)

  - [What I learned](#what-i-learned)

  - [Continued development](#continued-development)

  - [Useful resources](#useful-resources)

- [Author](#author)

## 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

### Screenshot

  

    

      

      

    

  

  

    

      

    

  

  

    

    

    

  

### Links

- Solution URL: [here](https://www.frontendmentor.io/solutions/todo-app-_MCCMFmZnq)

- Live Site URL: [here](https://zun-liang.github.io/fem-todo-app/)

## My process

### Built with

- Semantic HTML5 markup

- CSS custom properties

- Flexbox

- CSS Grid

- Mobile-first workflow

- [React](https://reactjs.org/) - JS library

- [Styled Components](https://styled-components.com/) - For styles

- [nanoid](https://github.com/ai/nanoid) - For generating React map keys

- [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd)

- [@hello-pangea/dnd](https://github.com/hello-pangea/dnd) - For drag and drop feature

### What I learned

- How to generate React map keys using nanoid

- How to use react-beautiful-dnd/@hello-pangea dnd

- background-color: unset

- How to make gradient borders

- How to target another styled component on hover

- useState lazy initialization

### Continued development

- Advanced React (React Context, Router...)

- Jest and React Testing Library

### Useful resources

#### CSS Related

- [Border Gradient with Border Radius](https://stackoverflow.com/questions/51496204/border-gradient-with-border-radius)

- [Wrapping and breaking text](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text/Wrapping_breaking_text)

- [word-break](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break)

- [overflow-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap)

#### Javascript Related

- [Date.now()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now)

- [Array.from()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)

#### React Related

- [useState lazy initialization and function updates](https://kentcdodds.com/blog/use-state-lazy-initialization-and-function-updates)

#### Styled-components Related

- [Target another styled component on hover](https://stackoverflow.com/questions/41007060/target-another-styled-component-on-hover)

#### Libraries

- [nanoid](https://github.com/ai/nanoid)

- [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd)

- [@hello-pangea/dnd](https://github.com/hello-pangea/dnd)

- [How to Add Drag and Drop in React with React Beautiful DnD](https://www.freecodecamp.org/news/how-to-add-drag-and-drop-in-react-with-react-beautiful-dnd/)

- [Invariant failed, draggableId requires an integer index prop #2400](https://github.com/atlassian/react-beautiful-dnd/issues/2400)

## Author

- Website - [Zun Liang](https://zunldev.com/)

- GitHub - [@zun-liang](https://github.com/zun-liang)

- Frontend Mentor - [@zun-liang](https://www.frontendmentor.io/profile/zun-liang)

- freeCodeCamp - [@zun-liang](https://www.freecodecamp.org/zun-liang)