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.
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: todo-app(Solution);
-Live Site URL:Todo-app(Vercel);
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow -javascript
In this project I learned how to use the not selector in css!
Below is the code snippet:
<li class="menu__list">
<a href="#" id="all" class="menu__item active">All</a>
</li>
<li class="menu__list">
<a href="#" id="active" class="menu__item">Active</a>
</li>
.menu__item:hover:not(.active){
color:hsl(235, 19%, 35%);
}
- Website - Add your name here
- Frontend Mentor - @wan0805
- Instagram - @wanderson.duartee
I want to thank God for giving me wisdom and patience to complete the project and also thank FrontEnd Mentor for the challenges as they help a lot in our development