Design comparison
Solution retrospective
Hello everyone ! 🙂
Here is my version of this challenge, any feedback/remark is appreciated ! I have a few questions:
-
The API is blocked by adblocker such as uBlock, is there a way to avoid it ?
-
I tried to hide the API key with the netlify GUI, but is there a simplest way to do it with Node.js for example ?
-
If the text returned is very long my boxes
info-container__box
get pushed. How can I make sure that no matter the length of the text I receive, the text fit the box ? Or dynamically adjust the font-size ?
Have a nice day ☀️
Community feedback
- @DrKlonkPosted over 3 years ago
Usually the way for me to hide an api key would be as an environment variable. You can get those in a Node server by installing the package dotenv, adding a .env file and accessing it in the server by using process.env.VARIABLE_NAME. More on it here.
Do not include it in git though, if you really want it hidden.
Btw, I didn't do this challenge yet and have never used Netlify, so I don't know if your way is even better.
1@RayaneBengaouiPosted over 3 years ago@DrKlonk Thank you for your comment ! I'll check the ressource you linked.
0 - @BonreyPosted over 3 years ago
Hello, Enayar! Great work on this challenge! 🥳 Everything works well on my laptop, although I have an adblocker turned on.
Probably, just one little suggestion: I'd fix your html accessibility errors by adding
aria-label
attribute to yourinput
field. It's a nice workaround when you don't have a label attached to the input field.As for the font size, I'd indeed dynamically adjust it depending on the screen width. It can be done in JavaScript like so:
function updateFontSize() { let infoTexts = [dataElements.location, dataElements.isp]; for (let i = 0; i < 2; i++) { if (infoTexts[i].innerText.length > 36 && window.outerWidth <= 1200) { infoTexts[i].style.fontSize = "0.8rem"; infoTexts[i].style.lineHeight = "1rem"; } else if (infoTexts[i].innerText.length > 36) { infoTexts[i].style.fontSize = "1.1rem"; } } }
(In fact, that's the exact snippet from my code. I recently completed this challenge myself. 😅)
Have a nice day too! And good luck with your coding! 😉
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord