Skip to content
OverviewSolutions
5
Comments
7
Steen Toons
@Steentoons

All comments

  • Lebogang•90
    @iLebo-stackSubmitted over 2 years ago

    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.

    html 5, scss, reactjs

    1
    Steen Toons•260
    @SteentoonsPosted over 2 years ago

    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
    1
  • ApplePieGiraffe•30,545
    @ApplePieGiraffeSubmitted over 3 years ago

    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.

    Invoice App | React, Next.js, styled-components, Formik, Framer Motion

    16
    Steen Toons•260
    @SteentoonsPosted over 3 years ago

    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.

    1
  • Steen Toons•260
    @SteentoonsPosted over 3 years ago

    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!!

    0
  • Steen Toons•260
    @SteentoonsPosted over 3 years ago

    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.

    1
  • Steen Toons•260
    @SteentoonsPosted over 3 years ago

    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.

    0
  • Steen Toons•260
    @SteentoonsPosted over 3 years ago

    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
    0
  • Grojd•40
    @GrojdSubmitted over 3 years ago

    I don't really understand where should I use what units (%, rem, em, px ...)

    Practiced flexbox

    1
    Steen Toons•260
    @SteentoonsPosted over 3 years ago

    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.

    0