Project final - Weather panel
Finalize the weather panel and make city input show the temperature.
Combining the functions
So far we've defined separate functions: getWeather reads the input, fetchWeather fetches the data, renderWeather renders to the screen. Now we'll write a displayWeather function that combines them. This function will be async: it reads the city, fetches the data with await fetchWeather(city), then renders with renderWeather(city, info). A single click now runs the whole chain. We'll add a new Refresh button and bind it to this function.
Adding the Refresh button
You can add a new button with JavaScript without touching the HTML. document.createElement("button") creates a new button element. We set its label with refreshButton.textContent = "Refresh". Then we place it on the page with app.appendChild(refreshButton). Finally we bind the click to the displayWeather function with refreshButton.addEventListener("click", displayWeather). A second button now completes the project.
Exercise Add the displayWeather function and the Refresh button
Continue on top of the previous lesson's solution. Define an async function displayWeather(): read the city with cityInput.value, fetch the data with await fetchWeather(city), and render with renderWeather(city, info). Then create a new button with const refreshButton = document.createElement("button"), set its textContent to "Refresh", add it with app.appendChild(refreshButton), and bind with refreshButton.addEventListener("click", displayWeather).
Show example solution
const app = document.querySelector("#app");
const cityInput = document.querySelector("#cityInput");
const getWeatherButton = document.querySelector("#getWeatherButton");
const weatherResult = document.querySelector("#weatherResult");
console.log(app, cityInput, getWeatherButton, weatherResult);
function getWeather() {
const city = cityInput.value;
console.log(city);
}
getWeatherButton.addEventListener("click", getWeather);
async function fetchWeather(city) {
const url = `https://api.example.com/weather?city=${city}`;
const response = await fetch(url);
const info = await response.text();
return info;
}
function renderWeather(city, info) {
weatherResult.textContent = `${city}: ${info}`;
}
async function displayWeather() {
const city = cityInput.value;
const info = await fetchWeather(city);
renderWeather(city, info);
}
const refreshButton = document.createElement("button");
refreshButton.textContent = "Refresh";
app.appendChild(refreshButton);
refreshButton.addEventListener("click", displayWeather);Test yourself
-
What should displayWeather do first?
- Read the city with cityInput.value
- Call the fetchWeather function
- Create a new button
- Render the result to the screen
Show answer
Read the city with cityInput.value — Correct! The city must be read first; data is fetched after.
-
Create a new button element
const refreshButton = document.____;Show answer
const refreshButton = document.createElement("button"); -
Match the displayWeather steps
- cityInput.value
- Reads the city
- await fetchWeather
- Fetches the data
- renderWeather
- Renders to the screen
- displayWeather
- Drives the function
-
Match the lessons to their features
- Lesson 1
- Element selection
- Lesson 2
- Binding the click
- Lesson 3
- Fetching data
- Lesson 4
- Rendering to the DOM
- Lesson 5
- Completing the panel