JavaScript Weather APIKey issue

Question

Code 401

JS Code

My API key is working properly in the browser. But I can't get it in the Live server. It shows 401 error as unauthorized. I turned off my firewall too and also I can't get my results. My console says that same error only.

const apiKey = "5926da84fa5ddbb8fb12992a5d7b7585";
const apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q=chennai";
async function checkWeather() {
  const response = await fetch(apiUrl + '&appid=${apiKey}');
  var data = await response.json();
  console.log(data);

}

checkWeather();

Answer 1

 const apiKey = "5926da84fa5ddbb8fb12992a5d7b7585";
        const apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q=chennai";  

        async function checkWeather() {
            try {
                const response = await fetch(`${apiUrl}&appid=${apiKey}`);
                const data = await response.json();
                console.log(data);
            } catch (error) {
                console.error("Error fetching weather data:", error);
            }
        }

        document.getElementById("checkWeatherButton").addEventListener("click", checkWeather);
    </script>

 <button id="checkWeatherButton">Check Weather</button>

you have a single quote but you are using a template literal so you can't use a single quote

so it should be

const response = await fetch(`${apiUrl}&appid=${apiKey}`);

Answer 2

const response=await fetch(apiUrl+'&appid=${apiKey}');

Use backticks instead of single or double quotes,

const response=await fetch(apiUrl+`&appid=${apiKey}`);