Hello, Frontend Mentor community! This is my solution to the REST Countries API with a color theme switcher.
I appreciate all the feedback you left that helped me to improve this project. I fixed the issues I had previously and added new features per your recommendation.
I have done this project a while ago however if you are here and have any feedback, tips, or ideas to share, I will be more than glad to hear them out!
Thanks
Hi Catherine you did a great job :) . You can sort out the border issue by making the border as a component itself and fetch about that country on that component. Also the problem of github pages with SPAs can be solved by using something like
(function(l) {
if (l.search[1] === '/' ) {
var decoded = l.search.slice(1).split('&').map(function(s) {
return s.replace(/~and~/g, '&')
}).join('?');
window.history.replaceState(null, null,
l.pathname.slice(0, -1) + decoded + l.hash
);
}
}(window.location))
You can refer about the same here
How did you get the text to span the width of the div? When I added spacing or increased font it looked odd.
Hi Angela congrats on finishing the challenge. It seems like the image is missing. When I gone through your code I found the href you are using is /images/image-qr-code.png. The / means the root. When you host your site the root wont be your root folder. So you have to simply omit the / or simply use ./ instead of / which denotes the current folder.
images/image-qr-code.png
or
./images/image-qr-code.png
I will be happy to hear any feedback or suggestions 😀
Hi Bhremada Fevreano congratulations on finishing the challenge. Everything working just fine on all screen sizes. But It seems like from initial load infinite requests are sent to the server to fetch comments. Take a look at the problem. Also check the accessibility issues too.
This thing not allowing me to submit the feedback since it is short so this is just blabbering dont care about this line
Hello, Frontend Mentor community! This is my solution to the FAQ Accordion Card.
I appreciate all the feedback you left that helped me to improve this project. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.
You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.
Thank you
HI Catherine congratulations for finishing the challenge, you did a great job. I recommend the details tag for creating these kind of accordions. It is easier with the HTML elements "details" and "summary". In this way you can quickly create a perfomant and accessible accordion. CSS is only needed to create the accordion elements.
Hello everyone, Specifically I have a doubt about how the height of <main> element is 0 even I have not used float. I have to manually set the height of main element as 98%. Can anyone explain what is happening ? Any feedback you wish to give are welcomed.
It is caused by you've set position absolute to its child. Position absolute will take the element out of the flow. Since that div is the only child of main if it is gone main will feel empty :(
I failed to vertically center my div element. Is the code well written to allow it?
Your body now have a height equal to the card. So vertical align won't work. Give body height:100vh
By far the most challenging part of this challenge was aligning the ethereum icon, price, clock icon, and days and ultimately I relied on a clunky solution to do it because I just couldn't fuss with it anymore. I'm also not sure if the on-hover effects should be reversed with the default appearance. I would think you would get to preview the NFT image on hover but otherwise it would be hidden by the overlay -- however, it really appears from the images supplied in this project that the overlay and eye icon appears on a hover (or possibly a click). Regardless, this was a fun challenge and I am pretty happy with the results.
Congratulations on finishing the challenge. I don't recommend using table in this scenario, instead you could use flex for this kind of layouts
Add Your helpful feedback 😃
Great job. I wonder why you put a span inside the form to read the comments but not the input tag
Feedback appreciated. Also, on my end, the font-family changes correctly to fit the given design but it seems that when other people view it the font stays default. What is the best way to fix this?
It is not recommended to use the font like this. It will only work for users who have the font installed on their machine. You can solve this by using Google fonts, fontface or using any common fonts like Arial.
How i should animate the click with js ?
You can create class with animation in css and toggle the class on click
What should i do to make this code "cleaner"? Is React Context good solution for this app? What should i do to save this data to localStorage immediately, because i'm saving this data after setState and we know that setState is asynchronous so saved data isn't always current?
Hey yoy did great 👍. You can solve the local storage problem using useEffect.
useEffect(()=>
localStorage.setItem
("comments",JSON.stringify(state))
,state)
I use css unit(ex vh, rem) in my code, but I dont understand it perfectly. I want to ask you about it and the implementation, thank you 😀
Hi Jhon, congrats for finishing this one ✨.
Lets talk about relative units.
vh - view height - It is the height of your view port means screen. 100vh is equal to 100% of screen height similarly 50vh is 50% screen height.
vw - view width - It is same as vh but instead of height here width is referred.
rem - rem means relative to the root font size. By default 1rem is 16px. But if you increase the font size in root rem also incrases.
em - similar to rem, but instead of relative to root in em it is relative to the nearest parent with fixed font size. Let's look at an example
<div class="grand-parent">
<div class="parent">
<div class=child />
</div>
</div>
:root{
font-size:14px; //16px by default
}
.grand-parent{
font-size:1rem; //1 * root font size = 1 * 14px = 14px
font-size:2rem; // 2 * 14px = 28px
font-size:1em; // first check whether there is a parent with fixed font size. no such parent
except root , so 1em = 1 * 14px
}
.parent{
font-size:2rem; // 28px
}
.child{
font-size:2em; // parent has a font size of 28px so 2em = 2 * 28px = 56px
font-size:2rem //2 * 14px = 28px;
Hope you understood the concept