This is my 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: https://github.com/daHatta/fem-todo-app
- Live Site URL: https://fem-todo-app-delta.vercel.app/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Tailwindcss - CSS framework
- React - JS library
- Next.js - React framework
Packages used in this project:
// ...
"dependencies": {
"@hello-pangea/dnd": "^16.6.0",
"@savvywombat/tailwindcss-grid-areas": "^4.0.0",
"next": "14.1.4",
"next-themes": "^0.3.0",
"react": "^18",
"react-dom": "^18"
},
// ...
There where some tricky parts to solve, i.e. the styling of custom checkboxes:
/* ... */
input[type="checkbox"]:checked {
background: linear-gradient(
130deg,
var(--clr-checkStart),
var(--clr-checkEnd)
) border-box;
border: 1px solid transparent;
}
input[type="checkbox"]:checked::after {
content: "";
margin-left: 1px;
width: 18px;
height: 18px;
background: url("../images/icon-check.svg");
background-repeat: no-repeat;
background-position: center, center;
}
/* ... */
Getting information from child-component:
// StatusBar component
/* Function to filter Tasks accourding their status active/completed */
const handleFilterValue = (filter: string) => {
handleSelectedFilter(filter);
};
// page
// Function to get filter value from Statusbar component
const handleSelectedFilter = (filter: string) => {
setFilterValue(filter);
};
Getting the filter value from the child-component was needed to set the value of the useState-Hook in the parent element. It allows the app to set up a filtered list which can be provided for the output in the TodoList component.
This is a perfect challenge to learn about React/Next.js and Typescript especially about the communication between components. Learning and understanding how to deal with props of components was significant in order to solve this challenge. One of my next challenges/projects will deal with Next.js and external APIs followed by CRUD.
- Using Multiple Fonts - Nextjs Documentation (Opitmizing Fonts).
- Light & Dark Mode in Next.js App Router + Tailwind with no Flicker - Awesome article by Dave Gray about Light & Dark Mode implementation in Next.js.
- Custom Styling Checkboxes: The Modern Way - Great article by Adam Butterfield
- Pure CSS Custom Checkbox Style - Another Great article about checkbox styling by Stephanie Eckles.
- Grid Areas in Tailwindcss - Great plugin for named grid areas in Tailwindcss by SavvyWombat.
- Coding a Todo List Using NextJS with TailwindCSS - Great Video about a Todo-project made by Codr Kai.
- React For Beginners 29: Todo App Part 2 Preview Of The App - Awesome Video series about React for Beginners made by Code Stoic. I learned a lot about React by watching his series from the beginning.
- React For Beginners 45: Sorting Items In A Todo List - Great Video by Code Stoic, which is part of the series mentioned before.
- #34 Filtering a List in React | working with React events | A Complete React Course - Great Video by procademy, also part of a bigger series.
- The useState Hook as a Props In React with Typescript - Nice intro in dealing with types as Props for components made by proCodeZone.
- React JS Typescript Drag and Drop - Awesome video about the use of react-beautiful-dnd made by Nic Valdez from Darwin Tech.
- Frontend Mentor - @daHatta