Looking to hire developers?
@BasharKhdr1992
@alco4
Submitted
How can I improve darkMode handling without having to pass a variable through the dom tree?
Any other suggestion is more than welcome!
@BasharKhdr1992
Posted
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).
Marked as helpful
@Har1s-Akbar
Submitted
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.
@BasharKhdr1992
Posted
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.
Marked as helpful
@zambobence
Submitted
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.
@BasharKhdr1992
Posted
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.
@ahmed-bsher2
Submitted
@BasharKhdr1992
Posted
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
@tomhine
Submitted
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.
@BasharKhdr1992
Posted
Very nice animation. Is this vanilla Css out there, or are you using a library? Thanks in advance
Marked as helpful
@IsNeonPlay
Submitted
// 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.
@BasharKhdr1992
Posted
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
Marked as helpful
@zambobence
Submitted
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.
@BasharKhdr1992
Posted
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
@MohamedAridah
Submitted
Hello Everyone,
I want your notes for code structure specially JavaScript code. And what i can improve.!
Have a good day everyone^^
@BasharKhdr1992
Posted
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.
@JoelStorr
Submitted
@BasharKhdr1992
Posted
Great job!
@Hasm33d
Submitted
@BasharKhdr1992
Posted
Brilliant!
@JoelStorr
Submitted
@BasharKhdr1992
Posted
Good job. However, You still have to add the hover effects to both the image, and the title.
Marked as helpful
@cholis04
Submitted
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?
@BasharKhdr1992
Posted
Perfect Design!. May I ask how did you position the background like that below the illustration-woman-online image ?
@KariminK
Submitted
I really need more practic with bootstrap and generally responsive pages
@BasharKhdr1992
Posted
When I opened the site on my browser the image showed under the Intro text. I think there is a tiny little bug around that you should check out. Nonetheless, nice solution, keep it up :). Also, you forgot to add the icons inside the dropdown features menu.
@cholis04
Submitted
@BasharKhdr1992
Posted
Great solution.
@marklnz
Submitted
This is my solution for the interactive pricing component, it's built using Blazor WebAssembly, and uses no hand coded JS at all.
I'm interested in general feedback about my HTML & CSS, and if anyone happens to be curious about Blazor, I'm happy to answer questions on that if I can.
@BasharKhdr1992
Posted
Nice solution. Congratulations. May I ask how do you set the steps like you did in your app ?
@gilcllys
Submitted
It was a great opportunity to learn about consuming a API. Feel free to share with me any advice to improve my code.
@BasharKhdr1992
Posted
Good job on coding this out. However, there is a design flaw in your solution, where the info section is floating over the input element which makes it difficult for the user to see what he/she is typing. Also, the marker which indicates the location does not show on the map when after you have fetched the information.
Marked as helpful
@RageOfAthena
Submitted
@BasharKhdr1992
Posted
The spinner is pretty impressive. Nice work!
@cholis04
Submitted
@BasharKhdr1992
Posted
The rolling dice animation is really nice. All of your designs are so far 100% identical to the original design files. Really great work.
