@Anthony-2003
Latest solutions
No solutions submitted yet.Latest comments
- @Elir-Mahad
Good job Anthony. Your improvement is remarkable you are doing a great job. Don't stop coding !!
Marked as helpful - @Anthony-2003@Elir-Mahad
Very good work anthony !!!!
Things to fix:
-
In your solution, the width of the card is larger than than the width from the design.
-
In your solution, the hover effect must be active when the mouse is hovered in the txt not out of text. In other words, when your mouse is on the word 'change', then it should become dark blue. If the mouse is not on the word change, then it should be very light.
-
- @Anthony-2003@Elir-Mahad
Good job anthony keep up the good work!
Things to fix:
-
In your solution, the width of the boxes, seems to be larger than the width of the boxes in the design.
-
In your solution, the space between the text and the 'learn more' button, seems to be larger than the space in the design.
Fix these issues and make sure that your solution matches the design as much as possible.
-
- @Anthony-2003@Elir-Mahad
Good job anthony keep it up !
Fix the accessibility issue that's been highlighted by the frontendmentor site.
- @xlr8tor@Elir-Mahad
Hey there friend !
The site looks good.
Regarding the functionality:
Things that work:
-
When i click the checkmark of a todo item, then click on active, the items that show up in the active list are the correct ones.
-
When i remove an item by clicking on the X, the correct number of items left is shown on the bottom left of the box.
-
The dragging and dropping functionality works.
-
The dark mode works and looks beautiful !!!
-
Site is responsive !!
Issues/suggestions:
-
When i click the checkmark of a task. Then press the X .. it gets removed from the list. But then when i go to the completed tab, the completed task does not show up there.
-
If i add a new todo item, then when i click the x, the task is not removed from the list.
-
The checkmark circle, next to the create a new todo input field, seems to serve no purpose. Perhaps you can remove it.
Regarding your code:
- Consider using one Style.js file, that has all your styled components; so that in your components folder, you'll have only the js files. This is something that i do, that's why i'm suggesting it. But i also like how you organized it.
When i expect other people to read my code i usually:
-
Add a file called codeStructure in the level of the App.js file.
-
In codeStructure file i include a brief overview of how i organized my code (4 to 5 lines).
-
On top of each component j.s file, i write a few lines (2 or 3) explaining the purpose of this component and what is exactly happening in the code.
-
Some comments on your code would also be useful. For example: Line 14 of control.js is :
onClick={() => {props.setFilter('All'); setActiveBtn({active:'All'});}}>All</Button>. When i look at this line, i wouldn't immediately know where the filter useState exists, because its not in this file. I found that it was set in the App.js line 19. Instead of me having to look for it, it would be easier if you made a comment to indicate these types of things. -
You are a one line machine. The whole process of reading your code would be a lot faster if you broke things down. For example: In ListItem.js line 11 :
props.isActive({id:props.text.id, completed:!checked, active: checked})can be broken down into smaller pieces with comments explaining what's happening.
I assume other people, who are not at your level, will try to read your code on this site, so it would be helpful for them (i.e, me lol). I usually write things out like this:
const handleChecked = () => { // comment setChecked(!checked); // comment props.isActive({ // comment id:props.text.id, // comment completed:!checked, // comment active: checked // comment }) // } // Below is an example of how i commented on one of my own projects: const getRestaurant = (id) => { // The constant getResturant stores a process // it takes in an id as a parameter RestaurantDataService // Enter the RestaurantDataService component .get(id) // run the function called get and pass the id into it .then((response) => { // grab the response setRestaurant(response.data); // insert the response data into the constant restaurant; console.log(response.data); // console log the data }) .catch((e) => { console.log(e); }); // console.log any errors };It might seem redundant but it expedites the reading process.
keep up the good work !
Marked as helpful -
- @Paienobe@Elir-Mahad
Keep up the good work.
First step, fix the accessibility and html issues that were highlighted in the report !!
Marked as helpful
