getWeather()
This function teaches the modern JavaScript async/await pattern for handling asynchronous operations like API calls. The async keyword makes the function always return a Promise, and await pauses execution until that Promise resolves. This is much cleaner than old-style .then() callbacks. The try/catch pattern is essential because network requests can fail—catching errors prevents your entire app from crashing when the API is unavailable.
🔬 This line combines a Bengali label with a number using string concatenation. What happens if you change the label from 'তাপমাত্রা: ' to 'Temperature: ' or add extra text?
document.getElementById("temp").innerText =
"তাপমাত্রা: " + data.main.temp + "°C";🔬 These two lines are the heart of async/await. What happens if you remove the await keyword from one of them? (Hint: you will get a Promise object instead of the actual data—try it!)
let response = await fetch(url);
let data = await response.json();async function getWeather(){
let city = "Dhaka";
let apiKey = "786c9b9d5cd13cc8780fc9c089b9d014";
let url =
`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
try{
let response = await fetch(url);
let data = await response.json();
document.getElementById("temp").innerText =
"তাপমাত্রা: " + data.main.temp + "°C";
document.getElementById("humidity").innerText =
"আর্দ্রতা: " + data.main.humidity + "%";
document.getElementById("wind").innerText =
"বাতাসের গতি: " + data.wind.speed + " m/s";
}catch(error){
console.log("Weather Error:", error);
}
}Line-by-line explanation (13 lines)
🔧 Subcomponents:
let url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
Builds the API endpoint URL using template literals to inject the city and API key parameters
let response = await fetch(url);
Sends an HTTP GET request and pauses execution until the server responds
let data = await response.json();
Converts the response from text into a usable JavaScript object
document.getElementById("temp").innerText = "তাপমাত্রা: " + data.main.temp + "°C";
Finds the HTML element with id='temp' and inserts the temperature value as text
document.getElementById("humidity").innerText = "আর্দ্রতা: " + data.main.humidity + "%";
Finds the HTML element with id='humidity' and inserts the humidity percentage
document.getElementById("wind").innerText = "বাতাসের গতি: " + data.wind.speed + " m/s";
Finds the HTML element with id='wind' and inserts the wind speed value
catch(error){ console.log("Weather Error:", error); }
Catches any errors during the fetch or JSON parsing and logs them to the console instead of crashing
async function getWeather(){- Declares an asynchronous function—async allows the use of await inside, letting the code pause and wait for API responses
let city = "Dhaka";- Stores the city name as a string variable that will be inserted into the API URL
let apiKey = "786c9b9d5cd13cc8780fc9c089b9d014";- Stores your OpenWeatherMap API key—this authenticates your request to their server
let url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;- Uses a template literal (backticks) to build the full API URL, injecting city and apiKey variables into the query parameters
try{- Starts a try-catch block—any code inside try will be monitored, and if an error occurs, it jumps to catch
let response = await fetch(url);- Sends an HTTP request to the API URL and waits for the server to respond; await pauses here until data arrives
let data = await response.json();- Converts the response body (which arrives as text) into a JavaScript object by parsing the JSON; await waits for this conversion
document.getElementById("temp").innerText = "তাপমাত্রা: " + data.main.temp + "°C";- Finds the HTML element with id='temp', then sets its text content to a Bengali label plus the temperature value from the API data
document.getElementById("humidity").innerText = "আর্দ্রতা: " + data.main.humidity + "%";- Finds the element with id='humidity' and sets its text to a Bengali label plus the humidity percentage from the API
document.getElementById("wind").innerText = "বাতাসের গতি: " + data.wind.speed + " m/s";- Finds the element with id='wind' and sets its text to a Bengali label plus the wind speed value
}catch(error){- If any error occurred in the try block above, execution jumps here
console.log("Weather Error:", error);- Logs the error message to the browser console so developers can debug without the page crashing
}- Closes the catch block
