I don't know where my code is going wrong. The challenge is to display the current temperature of my location in the h1 of the page but my console is telling me axios is not defined. I am not sure if it is because I am using codesandbox or if there is an error I am missing in my code. Thanks
JS
function showTemperature(response) {
console.log();
let temperature = Math.round(response.data.main.temp);
let heading = document.querySelector("h1");
heading.innerHTML = `The outside temperature is ${temperature}℃`;
}
function retrievePosition(position) {
let latitude = position.coords.latitude;
let longitude = position.coords.longitude;
let units = "metric";
let apiKey = "cb64da9857db4762d73f7ab9b0ccec88";
let apiEndpoint = "http://api.openweathermap.org/data/2.5/weather";
let apiUrl = `${apiEndpoint}?lat=${latitude}&lon=${longitude}&appid=${apiKey}&units=${units}`;
console.log(apiUrl);
axios.get(apiUrl).then(showTemperature);
}
navigator.geolocation.getCurrentPosition(retrievePosition);
HTML
<!DOCTYPE html>
<html>
<head>
<title>She Codes Plus</title>
<meta charset="UTF-8" />
<link href="src/styles.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<img src="images/logo.png" alt="She Codes Plus Logo" class="logo" />
<h1>JavaScript Geolocation API</h1>
<h3>JS Challenge 1</h3>
<p>Log your current latitude and longitude using the Geolocation API</p>
<h3>JS Challenge 2</h3>
<p>Log the current temperature where you are.</p>
<h3>JS Challenge 3</h3>
<p>
Change the h1 of this page by the current temperature
</p>
<script src="src/index.js"></script>
</body>
</html>
question from:
https://stackoverflow.com/questions/65890592/bootcamp-and-code-sandbox-challenge-is-telling-me-axios-is-not-defined 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
