This is a solution to the Todo app challenge on Frontend Mentor.
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
- Solution URL: https://www.frontendmentor.io/solutions/todo-react-application-Ho3-KSNnA
- Live Site URL: Deploy with GitHub Pages https://ievgeniiaabdulina.github.io/Note-React/
- CSS custom properties
- Flexbox
- Mobile-first workflow
- React - JS library
Using CSS variables:
:root {
--dark-grayish-blue: hsl(236, 9%, 61%);
}
.wrapper {
background-color: var(--dark-grayish-blue)
}
CSS rounded corners with gradient border :
.uncompleted:hover::before{
content: '';
width: 125%;
height: 125%;
display: inline-block;
position: relative;
top: -10%;
left: -12%;
background-image: var(--primary-check-background);
border-radius: 50%;
}
.uncompleted:hover::after{
content: '';
width: 110%;
height: 110%;
display: inline-block;
position: relative;
top: -148%;
left: -4%;
border-radius: 50%;
}
Drag and Drop to reorder items on the list.
Example resource Creating a Drag and Drop List with React Hooks - This source is very helped me to understand the principles of DnD with React Hooks.
- Website - Ievgeniia Abdulina
- Frontend Mentor - @IevgeniiaAbdulina