project-todos-context-vite #24
Conversation
There was a problem hiding this comment.
Hi Cornelia and well done this week with the Todo App! You build an app meeting the requirements and made a good use of updating global state with React Context. I am not sure what is the purpose of the components List Name and Reminder, if some features of the app are still WIP it's better to hide them until they're fully functioning.
Please check again accessibility (need to score at least 95) and responsiveness for small screens (320px width). Fix these 2 things and you're good to go 🚀
| import { TodoProvider } from "./Components/TodoContext/TodoContext.jsx"; | ||
| import { ListName } from "./Components/ListName/ListName.jsx"; | ||
| import { TodoList } from "./Components/TodoList/TodoList.jsx"; | ||
| import { WorkoutBlock } from "./Components/Workout/WorkoutBlock.jsx"; |
There was a problem hiding this comment.
The naming conventions could be improved for consistency and clarity. For example, some components and CSS classes use camelCase while others use kebab-case.
src/Components/ListName/ListName.jsx
Outdated
| <div className="listname-container"> | ||
| <h2> | ||
| List name: | ||
| <input | ||
| type="text" | ||
| value={listName} | ||
| onChange={handleListNameChange} | ||
| onClick={() => clearDefaultText(listName, "Weekly planner")} | ||
| /> | ||
| </h2> | ||
| <h2> | ||
| Date: | ||
| <input | ||
| type="week" | ||
| value={date} | ||
| onChange={handleDateChange} | ||
| onClick={() => clearDefaultText(date, "")} | ||
| /> | ||
| </h2> | ||
| </div> |
There was a problem hiding this comment.
providing proper semantic HTML elements, ARIA attributes for accessibility?
src/Components/ListName/ListName.jsx
Outdated
| <input | ||
| type="week" | ||
| value={date} | ||
| onChange={handleDateChange} | ||
| onClick={() => clearDefaultText(date, "")} | ||
| /> |
There was a problem hiding this comment.
Hi Cornelia and well done this week with the Todo App! You build an app meeting the requirements and made a good use of updating global state with React Context. I am not sure what is the purpose of the components List Name and Reminder, if some features of the app are still WIP it's better to hide them until they're fully functioning.
Please check again accessibility (need to score at least 95) and responsiveness for small screens (320px width). Fix these 2 things and you're good to go
Okey, so I did some adjustments and accessibility score is higher than 95 now and responsiveness should be good for 320px screens (atleast when I'm looking from my computer). Regarding my component "List Name" my idea with it was that the user can change the todo app and name it according to their plans, it can be a weekly planner for work/school, sparetime planning, or maybe you are planning a trip and you can name for example travel checklist. I adjusted my component "Workout" so that you can hide/show it to make the todo app more flexible to all sorts of planning. I removed the "Reminder" component and instead went for a "Sticky Notes" component, also to make the app more flexible for all sorts of use and planning.Does this make more sense now? Let me know what you think. 🌻 |
Netlify link
https://majestic-moxie-414767.netlify.app/
Flying solo