Hi @devanshaagrawal,
There are a few mistakes in the provided HTML and JavaScript code. I’ll outline and correct them for you:
-
Title Tag: You have an empty
<title>tag. It’s good practice to provide a meaningful title for your HTML document. -
JavaScript Function Syntax: There’s an extra closing curly brace
}after theifcondition, which is unnecessary and should be removed. -
Variable Naming: In the JavaScript code, you are using
user_dataandweather_data, but you should useuser_dataconsistently.
<!DOCTYPE html>
<html>
<head>
<title>Weather App</title>
</head>
<body>
<p id="output">Default text</p>
<input id="city"> <button onclick="show_temp()">Submit</button>
<script type="text/javascript">
function show_temp() {
document.getElementById("output").style.color = "blue";
document.getElementById("output").style.fontSize = "20px";
var city = document.getElementById("city").value;
var httpRequest = new XMLHttpRequest();
var url = "https://api.weatherbit.io/v2.0/current?city=" + city + "&key=0ced9c08b85d453791a22e9d7cf2259f";
httpRequest.open("GET", url);
httpRequest.send();
httpRequest.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var user_data = JSON.parse(this.responseText);
document.getElementById("output").innerHTML = "The temperature in " + city + " is " + user_data.data[0].temp + "°F";
}
}
}
</script>
</body>
</html>
Key changes:
- Removed the extra closing curly brace (
}) after theifcondition. - Changed
weather_datatouser_datafor consistency. - Properly declared the variable
httpRequest.
still I am not getting any output moreover while inspecting it is showing that show_temp () is not defined
Hi @devanshaagrawal,
The syntax to define a function is
function function_name(){
}
Try this code and it should work as expected:
function show_temp() {
document.getElementById("output").style.color = "blue";
document.getElementById("output").style.fontSize = "20px";
var city = document.getElementById("city").value;
var httpRequest = new XMLHttpRequest();
var url = "https://api.weatherbit.io/v2.0/current?city=" + city + "&key=0ced9c08b85d453791a22e9d7cf2259f";
httpRequest.open("GET", url);
httpRequest.send();
httpRequest.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var user_data = JSON.parse(this.responseText);
document.getElementById("output").innerHTML = "The temperature in " + city + " is " + user_data.data[0].temp + "°F";
}
}
}
Hi @devanshaagrawal,
In the code that I have provided you will have to replace the API key with the one which you have logged in and created.
function show_temp() {
document.getElementById("output").style.color = "blue";
document.getElementById("output").style.fontSize = "20px";
var city = document.getElementById("city").value;
var httpRequest = new XMLHttpRequest();
var url = "https://api.weatherbit.io/v2.0/current?city=" + city + "&key=add_your_api_key_here";
httpRequest.open("GET", url);
httpRequest.send();
httpRequest.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var user_data = JSON.parse(this.responseText);
document.getElementById("output").innerHTML = "The temperature in " + city + " is " + user_data.data[0].temp + "°F";
}
}
}
Refer to Creating weatherbit account for fetching weather details | Bolt IoT and Project 2: Showing weather data using on HTML page | Bolt IoT for more details
still i am unable to understand what mistake i have done in previous code please point them out and if not the code given in video is incorrect?
Hi @devanshaagrawal,
In the code I’ve shared with you, it’s crucial to replace the API key within the variable named ‘url.’ Could you kindly verify whether you have made this replacement with your API Key?
Refer to Creating weatherbit account for fetching weather details | Bolt IoT and Project 2: Showing weather data using on HTML page | Bolt IoT for more details
yes i have already got the result but i am unable to figure out my mistakes please let me know by comparing my code and the one which you shared .
Hi @devanshaagrawal,
Apologies for the delay in getting back to you.
It’s great to hear that you were able to get the desired result. The code you provided was indeed correct. The primary issue was with the API key, which should be unique to each user and was replaced as needed. As long as the API key is properly configured, the code should work effectively to retrieve and display the temperature data. If you have any more questions or need further assistance, please feel free to ask.
Hello, I’m interested in making project on weather using Weatherbit.io. The terms and policies indicate that the website is not free, and payment is required. What can i do?
Hi @siddiquasubiya4,
On this page, you can select the Free Trial option, allowing you to proceed without any payment. Click on the “Proceed To Dashboard” button after selecting the Free Trial. Once you log in, you’ll find the API key in the dashboard which you can use in your code for the project, which is valid for 21 days as part of the free plan.