IP Tracker - HTML/CSS/JS

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.

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 your input 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! 😉