@MhBbid
Animated Well Polished Rest API Countries Viewer
#framer-motion#react#tailwind-css#typescript#sass/scss
Muhammad Amoo
@DruxAMBAll comments
- @DruxAMB
Your project is amazing man but one of the purpose of using frontend mentor is to build a project that look like that of frontend mentor design.
Hope this was helpful?
Happy Coding: DruxAMB
- @D4rkpage@DruxAMB
You did great man, but you need to give your card-image a default height so as the images hight to match and prevent overflow.
Hope this was helpful?
Happy Coding: DruxAMB
- @wagnnermorais@DruxAMB
Well done man, you did really great on the challenge. You need to change the styling of the card items so that it will display 4 countries on each column as shown in the default design. Here is a reference from my project.
<div className="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2"> {filterApi.map((mapping) =>{ const {numericCode, flags, name, population, region, capital} = mapping; return ( <div key={numericCode} className="card overflow-hidden w-64 rounded-lg shadow-lg hover:shadow-xl mb-10 cursor-pointer m-auto"> <img src={flags.png} className="w-64 h-36" alt="DruxAMB png" /> <div className="p-3 mt-2 mb-5"> <div className="font-black text-md my-2 text-start">{name.common}</div> <div className="flex text-sm font-semibold">Population: <p className="font-extralight ml-1">{population }</p></div> <div className="flex text-sm font-semibold">Region: <p className="font-extralight ml-1">{region}</p></div> <div className="flex text-sm font-semibold">Capital: <p className="font-extralight ml-1">{capital}</p></div> </div> </div>Using something like this will help you
<div className="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2">Hope this was helpful*?
Happy Coding!!: DruxAMB
Marked as helpful - @ecaleb97@DruxAMB
Well done man, you did really well on the project. You need to change the styling of the card items so that it will display 4 countries on each column as shown in the default design. Here is a reference from my project.
<div className="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2"> {filterApi.map((mapping) =>{ const {numericCode, flags, name, population, region, capital} = mapping; return ( <div key={numericCode} className="card overflow-hidden w-64 rounded-lg shadow-lg hover:shadow-xl mb-10 cursor-pointer m-auto"> <img src={flags.png} className="w-64 h-36" alt="DruxAMB png" /> <div className="p-3 mt-2 mb-5"> <div className="font-black text-md my-2 text-start">{name.common}</div> <div className="flex text-sm font-semibold">Population: <p className="font-extralight ml-1">{population }</p></div> <div className="flex text-sm font-semibold">Region: <p className="font-extralight ml-1">{region}</p></div> <div className="flex text-sm font-semibold">Capital: <p className="font-extralight ml-1">{capital}</p></div> </div> </div>Using something like this will help you
<div className="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2">Hope this was helpful*?
Happy Coding!!: DruxAMB
- @addier94@DruxAMB
Well done dev, you did really great on this project. You need to change the styling of the card items so that it will display 4 countries on each column as shown in the default design. Here is a reference from my project.
<div className="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2"> {filterApi.map((mapping) =>{ const {numericCode, flags, name, population, region, capital} = mapping; return ( <div key={numericCode} className="card overflow-hidden w-64 rounded-lg shadow-lg hover:shadow-xl mb-10 cursor-pointer m-auto"> <img src={flags.png} className="w-64 h-36" alt="DruxAMB png" /> <div className="p-3 mt-2 mb-5"> <div className="font-black text-md my-2 text-start">{name.common}</div> <div className="flex text-sm font-semibold">Population: <p className="font-extralight ml-1">{population }</p></div> <div className="flex text-sm font-semibold">Region: <p className="font-extralight ml-1">{region}</p></div> <div className="flex text-sm font-semibold">Capital: <p className="font-extralight ml-1">{capital}</p></div> </div> </div>Using something like this will help you
<div className="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2">Hope this was helpful*?
Happy Coding!!: DruxAMB
- @JBlezi@DruxAMB
Well done man, you did really great on this project. You need to change the styling of the card items so that it will display 4 countries on each column as shown in the default design. Here is a reference from my project.
<div className="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2"> {filterApi.map((mapping) =>{ const {numericCode, flags, name, population, region, capital} = mapping; return ( <div key={numericCode} className="card overflow-hidden w-64 rounded-lg shadow-lg hover:shadow-xl mb-10 cursor-pointer m-auto"> <img src={flags.png} className="w-64 h-36" alt="DruxAMB png" /> <div className="p-3 mt-2 mb-5"> <div className="font-black text-md my-2 text-start">{name.common}</div> <div className="flex text-sm font-semibold">Population: <p className="font-extralight ml-1">{population }</p></div> <div className="flex text-sm font-semibold">Region: <p className="font-extralight ml-1">{region}</p></div> <div className="flex text-sm font-semibold">Capital: <p className="font-extralight ml-1">{capital}</p></div> </div> </div>Using something like this will help you
<div className="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2">Hope this was helpful*?
Happy Coding!!: DruxAMB
- @Chaffexd@DruxAMB
You did great man but you didn't add light and dark theme feature to your project. Please let me know if you I should on you on that or we could collaborate together on this project.
I'm awaiting your feedback.
- @CodeWithAlamin@DruxAMB
Great Job man
- @roraima1986What are you most proud of, and what would you do differently next time?
sin comentarios
What challenges did you encounter, and how did you overcome them?sin comentarios
What specific areas of your project would you like help with?sin comentarios
@DruxAMBHi Rorsima, Congratulations you finished the challenge!!! Just one recommendation that might help you with your projects.
You can use a utility class to center you content in the middle and prevent that stretch all away the viewport width. In your css file
.container { widht: 90%; // in small screens it will take the 90% of the viewport width max-width: 1100px; // in big screens won't grow more than 1100px viewport width margin-inline: auto; //margin left and right will center you content }In you html<main class="main-section"> content </main> </div>``` Hope this help you! ***DruxAMB***Marked as helpful - @snhase@DruxAMB
It will be preferable and much more easier if you use CSS frame works for your project e.g Bootstrapcss, Tailwindcss or Material UI.
Just read their documentations and you're all good to go.
You won't have problem with breakpoints using this frameworks.
I hope this was helpful ?
DruxAMB
Marked as helpful - @KendrickAng@DruxAMB
You did excellently well but try increasing the size (Height & Width) of your solution so as to match that of the design.
- @HA3IK@DruxAMB
Nice using Sass for this project, looking forward to start implementing Sass in my projects.
- @khoirulwana@DruxAMB
Hey Khoirul, I just previewed your site and you did excellently well. Keep up the good work.
- @DaniloDFL0@DruxAMB
Good job, at least you tried, I also had problem with form validation but this challenge helped me in improving my form validation skill. Try going to w3schools to learn more about form validation in javascript. I hope this helps you.
- @Lartzmanuel@DruxAMB
Sorry, I saw that you added express and mongodb as one of the tools that you used but you don't need this for this challenge. Those tools are used for backend.
- @WictorNisa@DruxAMB
You did well but the fonts you used are a bit lighter than the challenge font. Keep up the good work.
- @mariemkhaled0@DruxAMB
Please which css framework did you use for your project ?
