Task tracker | Ebtesam Ahmed #7
Conversation
There was a problem hiding this comment.
Great job, @Ebtesammm! 🥳
I have included some comments for the frontend section. Let me know if you want to review any together!
| <Route | ||
| path="/" | ||
| element={ | ||
| <NewTaskPage |
There was a problem hiding this comment.
According to the guidelines outlined in README.md, you need to incorporate a form with two inputs (task name and description) in the App.jsx file, located below the TaskList. Both the form and TaskList should be part of the same page and share the same parent component.
If you need further clarification on this, please let me know.🙂
| }; | ||
|
|
||
| return ( | ||
| <form className={styles.newTask}> |
| const [taskNameState, setNewTask] = useState(''); | ||
| const [taskDescriptionState, setNewTaskDescription] = useState(''); | ||
|
|
||
| const storeNewTask = () => { |
There was a problem hiding this comment.
Improvement: You could consider adding an alert() method here to let the user know that the task was successfully created.
| import { useState } from 'react'; | ||
|
|
||
| function NewTask({ tasksItems, setTasksItems }) { | ||
| const [taskNameState, setNewTask] = useState(''); |
There was a problem hiding this comment.
Improvement: per React community best practices, I recommend using the following naming convention for useState value and setter function:
const [name, setName]= useState();
For example:
const [newTask, setNewTask] = useState('');
It helps readability, makes your code clear and concise.
| value={taskNameState} | ||
| onChange={(event) => setNewTask(event.target.value)} | ||
| name="username" | ||
| required |
There was a problem hiding this comment.
To meet accessibility (a11y) standards, provide visual indicators for required inputs, e.g. asterisks.
| const [taskDescriptionState, setNewTaskDescription] = useState(''); | ||
|
|
||
| const storeNewTask = () => { | ||
| const newTask = { |
There was a problem hiding this comment.
Now it's possible to submit the form with empty inputs and create empty tasks.
Maybe we can use a simple condition to check if the inputs are empty and ask the user to fill those in?
Let me know what you think!
No description provided.