I appreciate any feedback. Not sure how to make the flag in the correct way. At beginning i thought that i will not be able to make it, but I thing that I did it quite well. In the other hand there are for sure a lot of things that could be done better.
Hi!
Some points for improvement -
/*** CSS ***/
.image{
background-size: contain; /* So that you don't end up cutting the flag */
background-position: top; /* Keeping the flag on top */
background-repeat: no-repeat; /* Don't repeat the background */
}
/*** CSS ***/
.theme-toggle{
align-items: center;
}
cursor: pointer on clickable elements.Some additional improvements (optional) -
https://countries-search-api.netlify.app/detail/India.Happy Coding!
Yay!!!🤾
I'm so happy to be back, It's been a while I last completed a challenge, I believe there are easier ways to solving this challenge, I would be very much happy to receive feedbacks.
Arigatou 🤝
Hi @Tobesh01 !
Good Job on the challenge !
Some points for improvement -
loading="lazy" on the images so that the off-screen images are not loaded until the user scrolls to them. You can read about lazy-loading here.Happy coding!
Hi. Nice solution.
Some things you can improve -
Happy coding!
Hello everyone!
This is my, Vanilla JS solution to this challenge. I decided to use another IP Geolocation API (IPWHOIS.IO), that doesn't require and API key.
I appreciate any feedback. Cheers!
Hi!
Nice project, but there is a small issue.
Your page is served over https but you are requesting data from insecure resource (http), so the browser is blocking the request.
Change API_BASE_URL to https://ipwhois.app/json/
Happy Coding!
I have only implemented 2 themes though, sorry for that. I wasn't aware of traditional grid system so I had to use bootstrap grid system in order to layout the calc buttons. Anyways, please do check how I made the transition from Light <-> Dark (from calc.js line: 215) and suggest me if there's a rather easier or concise way to implement the same.
PS: I'm still in the learning stage, will be learning ReactJS soon.
Hi!
Your theme switching implementation looks quite good.
Another way of theme switching is using custom properties and toggling a single class to change the properties.
Here is an example -
/*CSS*/
body{
--text-color: #000;
--background-color: #fff;
}
body.dark{
--text-color: #fff;
--background-color: #000;
}
.someElement{
color: var(--text-color);
background-color : var(---background-color);
}
//JS
themeSwitchContainer.onclick = function() {
document.body.classList.toggle('dark');
}
You can play around with this to include more themes.
Your calculator is pretty functional.
+1 for keyboard inputs.
Does anyone know of a good method to keep the entire card from expanding and contracting when the questions are clicked and the answer is displayed without having the text overflow from its container?
Hi. Nice project!
Some suggestions from my side :-
hero-image-container itself.details and summary elements. Check this article by CSS TricksHappy Coding!
Hello👋!
Im surprised how much I learned from a seemingly easy challenge. I ran into problems with CORS on firefox and lost a lot of time trying to figure it out. Hopefully I found solution. List of things I learned or used creating this project:
laravel mix which is a wrapper for webpack and targets the 80% usecase. I didn't realize how powerful tool it is. LINKenvironment variable (link) for my API_KEY. This is a variable whose value is set outside the program to secure our sensitive data. I did it with serverless Lambda function on netlify, so my API_KEY never shows up in my code and no one will steal it. Tutorialobject literals (link) instead of if statement in Tracker.changeContent function. Shortly, we have an object where the keys are the conditions and the values are the responses. Then we can use the square bracket notation to select the correct value of the object from the argument passed in. This looks clean and I will definitely continue to use this.aria-live="polite" and aria-atomic="true" to my .tracker__results-wrapper element to expose dynamic content changes in a way that can be announced by assistive technologies after my results inner elements change content.Errors that I encountered:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource. It turned out that after the recent firefox update you cannot fetch data between different origins. The fix is to send request to a proxy. A proxy acts as an intermediary between a client and server. The proxy server operates in between the frontend web app making the request, and the server that responds with data. Simply add https://cors.bridged.cc/ to any URL you’re fetching from or use cors-anywhere. Read about this CORS error. Since i work with serverless function on netlify i didn't have to put this in my fetch, because netlify fetching that data for me. But i think that info will be helpful for others.Special thanks to @brasspetals for total help, @mattstuddert for helping with these CORS problems and @grace-snow for for throwing the link with object literals on slack. No specific questions here but any additional feedback will be appreciated! Thanks! 😁
I loved the hide details option. The details section hiding the map is very annoying in mobile phones.
