Step 10

Let's create a script.js file with the following content and link it to the index.html.

const BASE_URL = "https://dataservice.accuweather.com";
const API_KEY = "USE_YOUR_API_KEY"; // terrible practice!
// You should never save API key directly in source code

const search = document.getElementById("search");
search.addEventListener("submit", getWeatherForecast);

function getWeatherForecast(event) {
  event.preventDefault();
  const city = document.getElementById("city").value.trim();
  getLocationKey(city);
}

function getLocationKey(city) {
  // TODO get the "location key" for the given `city`!
  //  then call getCurrentCondition to retrieve weather forecast for it!
}

function getCurrentCondition(location) {
  // TODO get the "current condition" based on the `location` argument!
  //  then call updateUI to update the UI!
}

function updateUI(location, forecast) {
  // TODO update the following based on `location` and `forecast` arguments!
  document.getElementById("name").innerText = "City Name";
  document.getElementById("condition").innerText = "Weather Condition";
  document.getElementById("temperature").innerText = "Temperature";
}

As you can see, the getWeatherForecast function is called when a user searches for a location.

For testing, you can have this method print the location to the console.