All solutions

This is my solution for this challenge, This is the second project i have deployed using tailwind css, and it has made my development easier, i only hope to go higher from here.

I learned how to use the useParams hook to access a path from the url and display the page based on that path i accessed. The useParams hook is used with the react-router-dom.

To see how you can add code snippets, see below:

  const countryName = useParams()

   const res =  Data.filter(item => item.name === countryName.countryName)
   <CountryPage 
              image = {image}
              name = {name}
              nativeName = {nativeName}
              population = {population}
              region = {region}
              subRegion = {subRegion}
              capital = {capital}
              topLevelDomain = {topLevelDomain}
              currencies = {currencies}
              languages = {languages}
              borderCountries = {res[0].hasOwnProperty('borders') ? borderCountries : borderEmpty}
            />

I would like to acknowledge freeCodeCamp and Guillame Duhan for the 4-hour intro class to tailwind css, It really helped me in making my first Tailwind CSS Project. I have really gotten the hang of Reactjs and hoping to move to Nextjs

Please I would need directions in the code, it feels too long

I learnt how to use the useState and useContext hooks properly with this project, useContext makes it very easy to pass down props instead of doing too much prop drilling

I learned how to add a dropdown under a link tag. By adding a ul tag inside a li tag. I also learned how to properly add a dark background when my navigation menu bar is clicked in mobile view.

I learnt about the test method on javascript which is used to test if a particular input follows a pattern.

I found it hard to give my border a linear gradient color, but with the help of css- tricks I could do that, now the only problem is giving it a border-radius

I mastered the javascript method toggle(), to add and remove classes on click of an object. I want to focus mainly on mastering javascript.

My JavaScript still needs a lot of tutoring but we are getting there

I have a problem with responsive, as i noticed some elements overlapping on iphone 6s+, so please if anyone could help me correct what i did, Thank you.

This is me the next day, i have updated the mistake.

I found the responsiveness tasking, but i did not have to define @media queries to make it responsive