Skip to content
Submitted almost 4 years ago

Planets Fact Site using HTML, SCSS, JS

sass/scss, accessibility
Davide•1,705
@Da-vi-de
A solution to the Planets fact site challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello! I had very good moments and very hard times working at this project. I feel i got better at managing bigger projects but yet i need to think more carefully before writing code. There are things i would like to understand better so let's begin!

  • The menu burger icon: I wanted to follow the design, when the icon is clicked there's no X for closing it (that would have been easier), it changes color instead. I tried hard but i couldn't change the color, so i found online this solution: 
         filter: invert(14%) sepia(6%) saturate(7%) hue-rotate(31deg) brightness(94%)                            contrast(81%);
 }```

and a color generator website, i spent hours trying all color shades from black to gray, what you see is the best result! Any clue on how i could do it differently?

  • The aboveline! I got crazy because i want to put the focus on top the selected planet page but i can't!

  • Conclusion: I know it is not the best result but I'm quite happy anyway, it was very hard at times.

  • Edit: Thanks to Emmilie Estabillo the menu burger icon color is the same as the design now.

Feel free to leave a feedback. Thanks

Code

Please log in to post a comment

Log in

Community feedback

  • Chris Young•40
    @chrisyoung0101

    Hi Davide, I like how you kept your script.js super simple or at least simple compared to what I used in my solution for this challenge :-). I think there's a lot for me to learn there. The "get" element function is a cool idea I hadn't thought of.

    Question : You mentioned "capturing and bubbling" in your comment on my solution. I see that your buttons are in a parent div with id="buttons" and each button has attribute data-tab. How are you using data-tab? I see each data-tab has a value but not seeing where that value is being used. Anyways, just attempting to get a better grasp of the DOM's "capturing & bubbling" phase. Thanks.

  • Chamu•13,820
    @ChamuMutezva

    Hi Davide. There is one concept that i am not familiar with in your html - having 2 separate navigations (one for mobile and the other for desktop). Any other reasons why you did not want to use css to control the navigation between mobile and desktop? Besides that the presentation is looking good , well done

  • Emmilie Estabillo•5,600
    @emestabillo

    Hey Davide, have you tried using opacity for the menu button? Much easier than matching colors. 🙂

Join 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