@iLebo-stack
Submitted
I did not implement the button on the detail page because the names of the border countries are abbreviated, how could I use the given api to make this buttons work.
Looking to hire developers?
@Steentoons
@iLebo-stack
Submitted
I did not implement the button on the detail page because the names of the border countries are abbreviated, how could I use the given api to make this buttons work.
@Steentoons
Posted
From the data, each country has cca3
that has the abbreviations. You can use this to your advantage by using the current cca3
to return the whole country object. This can then be used to create the details for that particular country. In short, after clicking a border, you can get the innerHTML
and check its cca3
from the data (use the lowercase version compared with name.common
). after getting the country that matches the name, use the country's object to create the detailed contents. I hope you get the idea
Marked as helpful
@ApplePieGiraffe
Submitted
Hello, everybody! 👋
This is my 30th solution on Frontend Mentor! 🎉 (And my first Guru level challenge submission.) 😎 This was definitely a tricky challenge, but I got to learn and try out many new things! 😀
I used React and Next.js to build the site, styled-components to style it, Formik (and Yup) to handle the forms in this challenge, and Framer Motion to add some page transitions and animations. 😄
There were quite a few things I had to learn in order to complete this challenge, and I'm not sure if I did them all correctly. 😥 Looking back, there are a few things I wish I would have differently, but it's a learning experience! 🙂
If anyone could share some resources on how to manage and organize larger projects like this, I'd really appreciate it! 👍 Lots of resources that I find only focus on specific things (like creating a popup or using certain features of a tool) and not so much how to approach and think about an entire app. 🙃
If you'd like to learn more about my project, see the README in my Git repo (where I also list a few quirks in my solution).
Feedback welcome and appreciated! 😊
Happy coding! 😁
BTW, click on the sidebar avatar for the attribution.
@Steentoons
Posted
Wow!! This is so awesome.
You did a fantastic job from the animations to the light and dark themes to the filters and responsiveness. I will definately take time to learn how all this was achieved from your repo. And congrats for submiting your guru solution.
@codebyteforyou
Submitted
Please give me some feedback Thank you.
@Steentoons
Posted
Hi
You did a very nice job on following the design... Well done. Try to increase the font sizes a little bit to match the design. Add more padding on the buttons to appear bigger as in the design. Increase the size of the mockup image and add more space between sections to allow more breathing of the design like in the original one.
Overall, you did a great job!!
@saifu-a
Submitted
I don't like the shadow here. Can you help me with getting is as same as in the original one?
@Steentoons
Posted
Hi Saif
I did not find the exact shadow used on the design, but I made one more subtle with more blur and less opacity. box-shadow: 0px 0px 34px -2px rgba(0,0,0,0.27);
You can use CSS box shadow generators online to create your own better version.
@MrSamich
Submitted
Good Practice.
@Steentoons
Posted
Hi MrSamich
You have done well on the centering of the design to match the original design... You could imrove on your design by using the original colors, forexample using the lighter background provided. lower the top bottom padding of left-section class to make it fit the height of the image, add some border-radius on the pieces to match the design.
Also you can try to add a colored semi-transparent overlay on the image to change the black and white to match the one on the original design.
@zyryle
Submitted
Can you check my code and tell me more what I could improve?
@Steentoons
Posted
Hi zyryle
I liked your approach of using flex and 100vh... You did a pretty good job in centering the boxes, and the design looks good
You could improve on it by adding a little bit more padding on the inner elements to provide some more space inside the centered box to match the design even more. Like on the boxes class.
Marked as helpful
@Grojd
Submitted
I don't really understand where should I use what units (%, rem, em, px ...)
@Steentoons
Posted
Hi Grojd
I think you did quite a nice job there, some small tweaks on the inner space, but overall, I think you followed the original design. Keep it up...
Personally, I like to use % when working with responsive widths. It does some math relative to the parent. I normally use em when working with margins and paddings. I use rems mostly on font sizes, so that when the user changes font size on their browser, your website will adjust accordingly. I rarely use px, I usually converts them to ems. But that is my opinion, you can look more into them and find what woks best for you.