Conversation
smirrebinx
left a comment
smirrebinx
left a comment
There was a problem hiding this comment.
Overall this is a nice looking app. Good job! No console errors, great! It's good practice to have an h1 at the top of the page to display the main heading of a web page so you might consider adding that :-)
| addToDo: (store, action) => { | ||
| // store.items.push(action.payload) | ||
| store.items = [action.payload, ...store.items]; | ||
| localStorage.setItem('toDoList', JSON.stringify(store.items)); |
There was a problem hiding this comment.
I like that you added the localStorage.
| Find me in src/app.js! | ||
| </div> | ||
| <Provider store={store}> | ||
| <Wrapper> |
There was a problem hiding this comment.
The App.js looks nice and clean with the mounted components.
| </TopDiv> | ||
| <StyledForm onSubmit={onFormSubmit}> | ||
| <label htmlFor="addToDoInput"> | ||
| Time to add a new task to the list and get things done <br /> |
There was a problem hiding this comment.
I'm not really sure why you've added the
here but instead of
you could use a
for every new paragraph (best practice) :-))
| justify-content: center; | ||
| ` | ||
|
|
||
| export default function DateToday() { |
| @@ -0,0 +1,77 @@ | |||
| import styled from 'styled-components'; | |||
| <li key={singleToDo.id}> | ||
| <ToDoListBox> | ||
| <LeftToDo> | ||
| <input id={`toDo_with_id${singleToDo.id}`} type="checkbox" value={singleToDo.IsDone} onChange={() => onIsDoneCheckboxToggle(singleToDo.id)} /> |
There was a problem hiding this comment.
To increase user accessibility and make the page more user-friendly you can connect the label with the checkbox so that the user can click on the text for the checkbox and not just on the actual checkbox. I think you need to wrap the text (that you have in a span maybe?) inside of the label. You might also want to add a focus to the checkbox in CSS so that keyboard users see where they are when tabbing.
| position: absolute; | ||
| width: 25px; | ||
| height: 25px; | ||
| outline: 2px solid var(--buttonGreen); |
There was a problem hiding this comment.
Wave complains about color contrast errors for the checkboxes, consider using a darker color for the checkbox borders.
| import { useSelector } from 'react-redux' | ||
| import { BottomToDo, HCounter } from './GlobalStyles'; | ||
|
|
||
| const Counter = () => { |
There was a problem hiding this comment.
To get the counter working you need to start the counter at 0. You can try something like this:
`const Counter = () => {
const todos = useSelector((store) => store.todos.items);
const completedTodos = todos.filter((todo) => todo.isDone);
return (
Completed todos: {completedTodos.length}
);
};
`
…tamp of the new todo with date-fns
2 participants
https://musical-bubblegum-d9620c.netlify.app/