-
Notifications
You must be signed in to change notification settings - Fork 55
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
TaskBuddy #33
base: main
Are you sure you want to change the base?
TaskBuddy #33
Conversation
…and added a function and a button to remove tasks
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Very nice and clean Zustand store ⭐ It's easy to follow, and I like that you used the persist middleware as well.
Changes requested
- Please format your code and think about indenting properly (check all your files)
- Be consistent with semicolons or not
src/App.jsx
Outdated
<> | ||
<Header/> | ||
<TaskContainer/> | ||
</> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Indentation
import styled from "styled-components" | ||
import { TaskList } from "./TaskList" | ||
import { TaskForm } from "./TasksForm" | ||
|
||
const TaskWrapper = styled.div` | ||
margin: 0 auto; | ||
max-width: 80vw; | ||
min-height: 50vw; | ||
box-sizing: border-box; | ||
display: flex; | ||
align-items: center; | ||
justify-content: flex-start; | ||
flex-direction: column; | ||
margin-bottom: 3.125; | ||
`; | ||
|
||
export const TaskContainer = () => { | ||
return( | ||
<TaskWrapper> | ||
<TaskForm/> | ||
<TaskList/> | ||
</TaskWrapper> | ||
) | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Consistency, are you using semicolons or not? ;)
src/components/tasks/TaskList.jsx
Outdated
display: flex; | ||
flex-direction: row; | ||
align-items: center; | ||
`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Indentation
src/components/tasks/TaskList.jsx
Outdated
const Input = styled.input` | ||
appearance: none; | ||
min-width: 1.25rem; | ||
max-width: 1.25rem; | ||
height: 1.25rem; | ||
border: 0.0625rem solid black; | ||
cursor: pointer; | ||
&:checked { | ||
border: 0.125rem solid green; | ||
position: relative; | ||
} | ||
&:checked::after { | ||
content: '✓'; | ||
color: green; | ||
font-size: 1.875rem; | ||
display: block; | ||
text-align: center; | ||
line-height: 0.5625rem; | ||
} | ||
`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Indentation
src/components/tasks/TaskList.jsx
Outdated
const date = new Date(timestamp); | ||
return date.toLocaleDateString("en-US", { | ||
month: "numeric", | ||
day: "numeric", | ||
}); | ||
}; | ||
|
||
return ( | ||
<TaskMap> | ||
<TaskCount> | ||
<p>Total tasks: {totalTaskCount()}</p> | ||
<p>Completed tasks: {completedTaskCount()}</p> | ||
</TaskCount> | ||
{tasks.length === 0 ? ( | ||
<NoTasks>You have no tasks yet. Let's add some!</NoTasks> | ||
) : ( | ||
<ListWrapper> | ||
<ListContainer> | ||
{tasks.map((task) => ( | ||
<List key={task.id}> | ||
<Label> | ||
<Input | ||
type="checkbox" | ||
checked={task.completed} | ||
onChange={() => toggleTaskCompletion(task.id)} | ||
/> | ||
<TaskText $completed={task.completed.toString()}>{task.text}</TaskText> | ||
<TaskDate>Added {formatDate(task.id)}</TaskDate> | ||
</Label> | ||
<RemoveButton onClick={() => removeTask(task.id)}><img src={bin} alt="Delete-Button" /></RemoveButton> | ||
</List> | ||
))} | ||
</ListContainer> | ||
</ListWrapper> | ||
)} | ||
</TaskMap> | ||
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Indentation
src/components/tasks/TasksForm.jsx
Outdated
/> | ||
<TaskButton type="submit">+ Add Task</TaskButton> | ||
</Form> | ||
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Indentation
tasks: [ | ||
{ id: 1, text: "Make to-do app", completed: false }, | ||
{ id: 2, text: "Clean kitchen", completed: true }, | ||
{ id: 3, text: "Walk the dog", completed: false }, | ||
], |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the feedback @HIPPIEKICK
Netlify link
https://fannys-taskbuddy.netlify.app