@tbrownleeSubmitted almost 2 years ago
How can I make the checkboxes like the ones in the design file?
How do I save info in React on refresh?
How do I implement drag and drop?
Igo Brasil Monteiro
@igomonteiroAll comments
- @igomonteiroPosted almost 2 years ago
Hi tbrownlee, you did a nice job!
About your questions:
How can I make the checkboxes like the ones in the design file?
- To do that, you need to "hide" the standard html checkbox input and wrap the input inside a container, then style the container as you want. The checkbox component that you will create can be either a controlled or uncontrolled component, you choose. To set the gradient inside the checkbox, you need to use the property background-image, not the background-color, take a look at my solution. Also, check out this article: Custom checkbox component in React or this one (but this one is in Portuguese) Checkbox component in react
How do I save info in React on refresh?
- To save the todo info without implement any API, you can use the browser local storage. You can save the todos in the localStorage everytime the user create or update (checking/unchecking) a todo, in resume, implement this logic using the useEffect hook. In addition, you can create a custom hook (that implement the logic of saving/getting from localStorage) and also use the ContextAPI to manage the todo states. To read more about how to use the localStorage, see this article: Todo app using localStorage and react hooks
How do I implement drag and drop?
- To do that you can implement your own drag and drop functionality, but this will be kinda hard, or you can use some drag and drop library. I recommend dnd kit or react beautiful dnd - i'm not a big fan of this last one because the bundle size is huge XD but i've used it in my solution. In this two libs, you will need to implement a function to handle the onDragEnd event. In this function, you will set your new states reordering the element in the array using the index returned by the onDragEnd event of the dragged element. To reorder the array, you can use the splice method, check the docs here.
IMPORTANT NOTE: splice is a destructive method, which means it modifies the array on which it is called, don't use it in directly on your react state, instead create a new const that store the current todo states and then use the splice method on it, then set your todos state with the new elements by using the setter of your useState.
One more observation: about your mobile design, reduce the breakpoint to 375px, in your solution the background-image is switching to the mobile image too soon, this way, the image is getting the sides "cut off".
Good luck if you implement these improvements, but your solution turned out pretty cool.
Hope you understand, english is not my native language, but i'm trying.
Keep up the hard work! 🚀
Marked as helpful1 - @itushSubmitted almost 2 years ago
Hello Developers👋
Another nice project to practice DOM manipulation with toggle visual state and I enjoyed building it 😄
As always, I'd really appreciate if you could answer the following:👇
1.What did I do wrong? 2.What did I do right? 3.How can I improve? common mistakes?
🙏Thanks in advance Happy Coding😄
@igomonteiroPosted almost 2 years agoHi Tushar, good job!
Feedbacks about your solution.
1. What did I do wrong?
- The notifications counter background color is wrong, you need to use the primary blue color
- The "actions" text color needs to be more neutral, a opaque gray color. For example, in the text: "followed you"
- The last two notifications have the whole text as a link, but the links are only for the users name and the post/picture name
2. What did I do right?
- Nice job with the mark all as read
- The mobile view look's good
- Nice use of "section" semantical tag
- Good colors organization in the tailwind config file
- Nice job in the counter.js module file, next time, try to organize this file inside "utils" or "lib" folder, for example
3. How can I improve? Common mistakes?
- Try to use a wrapper around the whole notification component to center the component in the window, then set the background-color of the body to "Verylgb" and keep the notification component white
- You need to improve the paddings and margins
- Implement individual mark as read, e.g when clicking in the notification or in the red circle. Note: after implement this feature, add some condition that not allow the counter to be less than zero, I saw many users doing this mistake
- Wrap the "avatar" and the "content" in the same div, that will solve the "space-between", the space-between is throwing the avatar to the left side, away from the content, it is interesting when the content have the picture, like in the "Kimberly Smith" notification
- Improve the hover effect, see the "active state" picture in the design starter files, this will help you
- In my opinion, the most common mistake is: getting your hands dirty without stopping a little to think first, actually, this is a mistake that I make a lot. Before you start styling your HTML page with tailwind, first, stop a little and analyze the design you have to clone/reproduce, build the HTML from it WITHOUT any style first, just to organize the things, think about the parts you can organize in a container/wrapper , for example, "hmm, there is a main notification content here, but you can see that the avatar is next to this content, it is part of this content, it might be interesting if I organize them all inside a container, in addition, the notification paragraph and its timestamp are vertically aligned, maybe organizing them inside another div is also interesting, so I can use a flex with column direction
I hope you understand, english is not my native language, but I'm trying haha
Keep it up, one step at a time, good job! 🚀
0 - @KathrynDavies123Submitted almost 2 years ago
Think I figured out everything, but open to any feedback :)
@igomonteiroPosted almost 2 years agoHi Kathryn, nice job!
I noticed that there is a problem in your solution, the notifications counter can be negative when clicking on notifications that have already been marked as read. Try to implement some condition that doesn't let the counter be less than zero.
Best.
Marked as helpful0 - @augustine-a8Submitted almost 2 years ago@igomonteiroPosted almost 2 years ago
Nice job Augustine.
I noticed that there is a problem in your solution, the notifications counter can be negative when clicking on notifications that have already been marked as read. Try to implement some condition that doesn't let the counter be less than zero.
Other than that, you nailed it!
Marked as helpful0
