Hi Guys!
It's been a while since I last submitted a solution. I am very happy to be back!
This time around I decided to put into practice my React skills to bring to life this simple and beautiful design. Used Semantic HTML tags, SCSS for styling, and AOS library for animations.
Hope you guys like it! I also would really appreciate any feedback on my code or on the overall project.
Wish you guys an awesome week and fun coding!
Awesome work dude!
Everything looks super slick and responsive! I suggest you make your animations go only one way. If you scroll up and down again they replay, but this is just a personal taste.
However, there is a bit of a weird 1000px - 1140px area. The Intro section heading overlaps with the background making it unreadable and the articles at the bottom are really squished. This is all minor but I thought you'd appreciate the nitpicking feedback!
all comments are super welcome
Hey there, good job, but you missed a couple of things here and there. Some of them:
I advise you put in another breakpoint, like a tablet size for example, because on those sizes your images become squished, and the texts overflow.
In the "Why choose Easybank?" section, you can remove the width and height from the icons. if you put different percentages the image becomes disproportional. (percentages at all here aren't a good idea, either remove or set them to identical static values) Also, one icon is missing - you have a typo and spelt it with a capital it should be "icon-onboarding.svg" not "icon-Onboarding.svg"
Good luck! :)
I can't find the logic development when clicking on the border countries from the details page. As I would do it?
Hey, there! I recently completed this challenge and commented this same thing elsewhere. I thought it was annoying too, but it's actually not that hard.
Every country has a "borders" property, with cca3 codes in them. You can use those country codes to query the API. Take a look at the API docs, you'll find the "List of codes" segment. https://restcountries.com/v3.1/alpha?codes={code},{code},{code}
So all you need to do when the page loads is take the "borders" property and insert the cca3 codes into the API endpoint like so: https://restcountries.com/v3.1/alpha?codes=col,pe,at
This will return the countries with those cca3 codes. You can then use those objects to render the full names of the countries, and make them into links.
My function looked something like this:
axios.get(https://restcountries.comv3.1alpha?codes=${country.borders.join(",")}).then(function (response) { setborderCountries(response.data); });
Hope this helps! Good luck :)
