It wasn't easy to customize that check box with an image. I am not sure how I will set the visibility of close icons by hovering over a todo. So I left it. Also the draggable todo, I haven't implemented. I hope I will learn the remainings from others' submissions.
Hello,
Your solution looks great! A few points I would add:
min-height: 100vh. This ensures that there is no whitespace at the bottom for taller screensonMouseEnter and onMouseLeave events to the todo-input-wrapper and then styling the close-icon based on those eventsApp.jsYou may have a look at my solution to get an idea of what I mean. Cheers!
First time using CSS Grid, the design is not 100% but I earned a lot from this however and the main reason I chose this was for the JS and JSON practice which I feel has been done well, though I feel the CSS could be cut down.
Additionally I used local storage for the first time and it saves which toggle you last had active to turn on when you refresh/come back to the site.
Hello Macaulay!
You have a great solution here, and you made it responsive too, which is awesome.
A few suggestions from my side would be to:
You may view my solution to see what I mean
Other than that, wonderful job!
i dont know why the Trash Button cannot be targeted by event.target so it cannot be clicked? also, feedback are open :) Thanks
Hello @titocs!
Your solution looks great and works well. One thing I would recommend you to work on is animations and microinteractions. They can really improve the quality of your website. If you wish, you can check out my solution to this problem and tinker with the interactable elements to see what I mean!
Any feedback is welcome.
Nice work dude! This is so good. Also matches the design accurately. +1
I'm a beginner on programming and web development, so i would like some feedback on my css code, especially on the mobile part.
Hi there Pedro!
Your solution is really great, love that animation on load.
A tip from me would be to include padding on your wrapper element, so that the card doesn't touch the browser's edges on tablet and mobile sizes.
I would like to better understand the positioning of image and styling of the image, the image style was one of the things i was not able to grasp.
Hello,
You can colorize the image by adding an element with a purple background-color on top of that and then setting the element's mix-blend-mode: multiply
Please how can I change the image background from grey to purple
Hello,
You can add an element with a purple background-color on top of the div, and then set that element's mix-blend-mode: multiply
Rate below out of 10
Awesome work, man.
I would rate it an 8/10 because there is a responsiveness issue, which you can see at a screen width of around 820px. The cards get cropped. <br/> You can fix it by settings the container's width to a relative value.
Check out my solution for reference! <br/> Please upvote my comment if it helps!
Feel free to comment on my very first design challenge at frontendmentor.io
is my media queries right ? does my css good enough to display expected design?
Hello Mel!
You've done great, but I noticed a few issues if you don't mind me listing them.
:hover statesYou can also check out my solution for reference. I hope this helps! Please upvote my comment if it does!
I was not able to make the layout fully responsive. When the browser height is decreased in desktop, the bottom of the container starts working improperly. How can i fix this.
Hello Utkarsh!
Great work there. To answer your question, I noticed you set the cards' heights to 61vh which is why they are behaving that way. You don't need a height property in the card, as its height will automatically resize to fit the content.
You can check out my solution for reference.
if someone has suggestions how to improve this code I'll be happy to read that! I see that my version is quite more 'far away' from the user than the design version, and some texts are black instead of the gray (little forget), box shadows too, if you see something else please write me about that. Have a nice day :)
Hello, This is my first challenge where I try to use scss. At first, it's a little bit difficult for me to start but at last, I finished it. There are so many things have to learn in sass but I use it here simply with like nested, variables, extend. So, if you have further suggestions about sass, please feel free to tell me. Happy coding :)
