All solutions

Hello community, that's my first FEM project in React and the second i ever made using this library. It has been a long journey, i'm satisfied with the result but i focused most of my attention and energy on the functionality part (it kept me very busy) of the project. I decided to use plain CSS, i tried to avoid repetition except for the theme switcher, i couldn't avoid WET code which means that maybe the whole functionality could have been implemented in a better way.

• I thought it was nice having a load more button and a back-to-top button so i added them. I could disable the load more button at the end of the page but just for all countries, it would be nice making it work for each filter, i'm not there yet.

• I've never used select element, it turned out to be very hard to style especially in Google Chrome it appears worse than Firefox, i tried my best! Dark mode looks ok on mobile but on desktop the arrow down disappears.

• The API changed. That happened nearly at the end of the project, the new endpoint was unstable for over a week, at the moment is working great! However there's an important difference between the two. The old API had the border property in all countries, no matter if a country has no border country, the property was there and of course the value was 0, i structured my code so that it worked perfectly! The new API didn't include the property in all of those countries with no borders, and that meant i had to change the code structure to make it perfect, so you are going to see a blank page when you click some countries.

To conclude, altough there's room for improvement i'm quite happy i could work on an advanced challenge, i learned a lot and i want to learn more about React, patterns, architecture and styled components is the next goal.

Feel free to leave a feedback.

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

Feedback is welcome!

Hi everyone, this is the second project, i found hard make it responsive and i thought the dark theme was easier... It's very far from perfect, but i tried my best and eventually i'm quite satisfied because it's the first time i use sass. Some questions to anyone who has experience:

1. What do you think about my html and sass structure?

2. Any tips for getting better at how to approach responsive design since the beginning of a new project?

Thank you.

Hi everyone, this is my first project in HTML, CSS and vanilla JS, as a beginner i've srtuggled a lot, especially the design has been a hard challenge. I've tried my best but due to my lack of experience i don't know if CSS structure is ok, i've started from smaller width and then i've added 5 more media queries. Is that correct?

There are some issues i couldn't fix:

1. I can't split the subtitle text in the header (mobile version) exactly as is shown in the picture.

2. The line inside the card has space left and right, so it doesn't fit the whole card width.

3. The arrows that move the slider are too big i don't know how can i adjust them.

4. I can't resize the circles (header background image) for desktop screen width.

I've simulated the subscrition when the button is clicked but the body background image gets smaller when the page is empty (only desktop). Why?

You may find more mistakes, thank you in advance for taking the time and see my solution.