Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions8Comments7

All comments

  • Travolgi 🍕• 31,480

    @denielden

    Submitted

    Hi there :)

    I had a lot of fun in this challenge and had a good opportunity to learn how to use Router v6 and Styled Components for the first time.

    Also I practiced a lot with React custom hooks, initially I had some problems in the details page because React didn't update the page content because I rightly didn't set the listening on the parameter that changed.

    Also I added some additional features:

    • See current country weather data on detail page through other API
    • See the Map of the country on the details page
    • Button scroll to top after the scrool
    • Button for query reset when typing on the search input
    • Error page with animated svg when no results found
    • LocalStorage save of the set light or dark mode theme

    But...

    • Despite my extensive research I still have to figure out how I can create a preload at render time while react builds the page so that the "hops" due to reset.css are not seen as soon as the app is opened.
    • I also want to understand how to show an upload on the single image as it is uploaded.

    Thank you for taking the time to check out my project! And Happy coding ;)

    React REST Countries & Weather API with color theme switcher

    #fetch#react#react-router#styled-components#node

    7

    Hayatunnabi Nabil• 130

    @imhayatunnabi

    Posted

    nice work man !!!!

    1
  • imad• 3,310

    @imadbg01

    Submitted

    Hello Frontend Mentor Community, This challenge was take me a long time, about two months, the reason for that is because I have some difficulties to position img as show in the design, Any suggestions are welcome

    My solution to blogr landing page, using Vue.js and Tailwind CSS

    #tailwind-css#vue

    1

    Hayatunnabi Nabil• 130

    @imhayatunnabi

    Posted

    nicely done man !!!!

    1
  • Hayatunnabi Nabil• 130

    @imhayatunnabi

    Posted

    fix the issues. everything is fine

    1
  • Hayatunnabi Nabil• 130

    @imhayatunnabi

    Posted

    working fine. good job

    1
  • Hayatunnabi Nabil• 130

    @imhayatunnabi

    Posted

    nicely done

    0
  • Raymart Pamplona• 16,140

    @pikapikamart

    Submitted

    Hello. This is my 24th challenge here and my first premium challenge taken^^

    This challenge was taken around January but took me too long to build it. January and early February was really hectic as again, lots of school activities/projects and even short film animations, those was grouping so that I had to shift my focus for it at the time! Glad that it was over. Phew:>>

    I picked this challenge as a first out of the premium challenges because this challenge was the one that I really want to create when I saw way before the challenges here at fem and i'm really glad that I was able to take this one!!

    This is my first time using styled-component as well. I haven't searched articles about what is the proper approach or convention when using styled-components. That is why for every styled-component that I used, I prefixed it with a "Styled" word like "StyledNavbavList", I was thinking that it is too verbose and kind of felt a bit off at first but I just continued with it. It will be really nice if you share your thoughts about using styled-components, specially naming each styled.

    I added some animations as well on the site and I think I got the functionalities right? Hehe, hoping so. For the create-plan page, I initially thought that there will be no logic in the price computation, the moment when I had to push now the site, I saw a readme on the challenge folder from the challenge.zip, there it was. The logic for the computation :>>> That was close submitting a not fully functional site!!

    Lastly, if you could give me a resource/information on how to render svg dynamically. For example, I have 3 svgs in a folder, how can I just import that and use it without using the svg as a value for src prop in the img. Thanks!

    (The hover for the social media icons was supposed to make it colored paleOrange but never did it because I want to render svg dynamically and not manually adding svg code if there is such a way)

    Overall, I am really happy with this one and hoping that I could not tackle more challenges. Thank you for checking this one out!!

    Coffeeroaster Multi Page | Next.js , Mobile first

    #framer-motion#next#styled-components#typescript

    7

    Hayatunnabi Nabil• 130

    @imhayatunnabi

    Posted

    nice

    1
  • Karishma Garg• 1,010

    @krrish105

    Submitted

    Hey Guys, I just finished the Advice Generator App Challenge. I would like you all to see it and let me know how I can improve it. Let me know my mistakes. Thank you!.

    Advice Generator App

    #accessibility

    3

    Hayatunnabi Nabil• 130

    @imhayatunnabi

    Posted

    very good one. <3

    0