Design comparison
Solution retrospective
I actually like the hover on the circle borders for the tasks. I did not know they could work like that. I'm most proud of the drag and drop, obviously. Dnd-Kit worked its magic, I could actually do it from scratch as well.
What challenges did you encounter, and how did you overcome them?The theming was a slight issue, because I was hard-coding the tailwind classes. I overcame by abstracting the colors, and implementing them into the tailwind.config.js and index.css.
I also had problems with dnd-kit, it wasn't allowing the first inputted task to be draggable, but it fixed itself when I made the first index of the task start from 1 not 0.
What specific areas of your project would you like help with?When the tasks get to the amount which they exceed the height of the screen, how do I not make it not get a scroll bar horizontally ?
Community feedback
- @markuslewinPosted 3 months ago
Hi!
Remove the
w-screen
on the div that's a direct child to#root
. It's a block element in a flow layout, so it'll grow to the edges of the screen either way.100vw
sets the element to be 100% of the viewport width, but it doesn't account for the size of the scrollbar. When the page starts scrolling, there isn't enough room for both the 100vw element and the scrollbar, and so the element starts overflowing.Marked as helpful1 - @Chiemeka2006Posted 3 months ago
this is a really good project, why dont you make sure to save the todo lists to local storage and also make the theme switcher to be saved to local storage, thats sure to bring more reality and life to your project. ill be uploading my own todo list u can check it out although i might not do the drag and drop, but i might try to find a ibrary out there that could help me accomplish that
Marked as helpful0 - @Chiemeka2006Posted 3 months ago
also to your question "When the tasks get to the amount which they exceed the height of the screen, how do I not make it not get a scroll bar horizontally ?" you can set the parent of the lists to have the property of overflow-y: auto; and also give the parent a max-height property, how i decided the value i was gonna put for this property was by using the inspector tool to view the height of 1 list then multiply by 6. in your case the height of 1 list is 56px so u should set max-height to 336px; . Then how to get rid of the scrollbar that will appear in the parent container due to the overflow-y: auto; lets say ur parent element is a ul you do : ul::-webkit-scrollbar { display: none; scrollbar-width: 0rem; }
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord