How can I improve darkMode handling without having to pass a variable through the dom tree?
Any other suggestion is more than welcome!
How can I improve darkMode handling without having to pass a variable through the dom tree?
Any other suggestion is more than welcome!
If you are using a library like React, or VueJs, you can make use of context api or Redux, or Redux Toolkit (in react for example) or Vuex (in case of vue) to create a global state for Dark/light theme. In this way there is no longer need to pass props down the dom tree multiple levels to implement a theme switcher. Instead, you save all state variables related to themes in one central point, and any component that have multiple themes can directly get access to the global state using context (again in case of react).
Hello this is was my first ever frontend mentor challenge. I did face some minor problems and issues during this challenge but all in all it was easy.
Great solution! well done. The only two issues you need to fix in my opinion is the button width in the mobile version (it should be wider), and the width of the sidebar also in the mobile version along with the font size of the vertical navbar inside it.
I found it difficult at the beginning to wire together the JS part with the form answers, and at the end to figure out the different colours one might use for the backgrounds.
I would appreciate any feedback on the css and JS part because I have a feeling that I have overcomplicated it.
Thank you.
Nice Job. Congrats on completing the challenge. However, you might consider using a brighter color for the rating component background. One opinion, use the same color as the ratings buttons, then add some box-shadow around the buttons to make them separable from the background. That what I have done in my code.
Nice solution. One tiny little note, the next and previous buttons on the lightbox did not work for me. I think you should double check that. Otherwise, good job on solving this intricate challenge
I'd love so feedback on the animation, it's the second time I've properly used it and it looks a little clunky to me.
Very nice animation. Is this vanilla Css out there, or are you using a library? Thanks in advance
// ESPAÑOL // En si el reto fué sencillo en si, pero en el hover de la imagen se me complicó bastante... No supe muy bien el como centrar de forma vertical me frustré bastante en esa parte y pues intenté improvisar un poco para que intentara quedar bien en el diseño movil y escritorio, pero no pude... Acepto sugerencias y criticas constructivas para saber como pude resolverlo mejor...
pd: Se que el uso de flex y grid son innecesarios en la descripción de la tarjeta, pero es bueno saber como funcionan de forma armoniosa juntos.
// ENGLISH // The challenge itself was simple, but in the hover of the image it got quite complicated... I didn't know very well how to center vertically, I got quite frustrated in that part and so I tried to improvise a bit so that it would try to look good in the mobile and desktop design, but I couldn't... I accept suggestions and constructive criticism to know how I could solve it better...
ps: I know the use of flex and grid are unnecessary in the card description, but it's nice to know how they work harmoniously together.
Your solution is great. However, regarding the hover effect, you can improve it using the follwing steps:
Set the position of the image as relative.
Set the position of the overlay as absolute.
The overlay element should take the whole width and height of the the overlaid element. This achieved by the following:
.nft-img-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; border-radius: 12px; background-color: hsl(178, 100%, 50%); opacity: 0; transition: opacity 0.5s; }
And finally for centering the eye icon inside the overly I used the following:
.nft-icon-view { position: absolute; opacity: 0; top: 42.5%; left: 42.5%; }
4.1. I used positioning with the icon because I did not want the opacity of the overlay to affect the eye as well. For more information on overlaying visit the following link:
Image overly icon
I found it difficult to declare the correct spacing and line width for the columns in desktop mode. I would be really grateful for your review to see how could I improve my code and enhance my coding skills.
Great solution. There is a tiny bug you have to fix, he text color of the buttons should change as well upon hovering otherwise the text is unreadable
Hello Everyone,
I want your notes for code structure specially JavaScript code. And what i can improve.!
Have a good day everyone^^
Brilliant design!. Smooth layout. However, there is a slight bug in the mobile version. The slide show is not functional. I think you should check it out.
Good job. However, You still have to add the hover effects to both the image, and the title.
I decided not to use JavaScript in this challenge. So I need to use the checked state in CSS. Yes, the checkbox allows for that, but to create an accordion element, there is only one element open, the others will be closed automatically.
So I used some radio buttons to do it. But the drawback is that the radio button cannot be unchecked so the accordion cannot be closed completely. Need some tricks to overcome it.
What do you think?
Perfect Design!. May I ask how did you position the background like that below the illustration-woman-online image ?