Build Weather App in HTML CSS and JavaScript

The JavaScript API provides a powerful way to integrate external services into websites, enabling developers to bring dynamic data into their applications. A popular example is using the Weather API in JavaScript to get real-time weather information for specific cities. In this tutorial, we will learn the basics of building a simple weather app with a clean, user-friendly interface that receives live weather data based on city inputs.

What is a JavaScript API?

An API (Application Programming Interface) allows different software applications to communicate with each other. In JavaScript, APIs are widely used to access data from external services like weather, location or even social media platforms. JavaScript APIs are incredibly flexible, and they allow developers to fetch data, manipulate it, and display it in web applications.

Why Use a Weather API in JavaScript?

Weather APIs provide valuable data that can be updated in real time, making them perfect for applications that need up-to-the-minute information. Weather APIs often provide data on temperature, humidity, visibility, and more. With JavaScript, developers can use fetch() or other HTTP request libraries to call these APIs and handle the returned data in a variety of ways.

How to Set Up a Weather API in JavaScript

To build a weather app using JavaScript, you first need to select a weather API provider. There are several popular options available, such as:

OpenWeatherMap
WeatherAPI
AccuWeather API

For this example, we are using the WeatherAPI service. WeatherAPI offers a free tier, making it a good choice for beginners or those building basic applications.

Get an API Key

To use WeatherAPI, you need to register on their website and obtain an API key. This unique key is required to access the API’s data. Make sure to keep it secure and not expose it to unauthorized users, as it is linked to your account.

Set Up Your HTML Structure

In the provided HTML example, the structure includes an input field for users to type the city name, a search button, and fields to display the city name, local time, and temperature. This basic structure creates a straightforward user interface, ensuring that the application is easy to use.

				
					<input type="text" placeholder="Enter City" id="city-input">
<button type="button" id="search-button" class="btn btn-success">Search</button>
<p id="city-name"></p>
<p id="city-time"></p>
<p id="city-temp"></p>

Create script.js Fetch Data Using JavaScript API

With JavaScript, we use the fetch() function to retrieve data from the Weather API based on user input. This data is then displayed on the page using JavaScript DOM manipulation.

				
					document.getElementById("search-button").addEventListener("click", function(event) {
    event.preventDefault();
    Myfunction();
});

var city = document.getElementById("city-input");
var cityName = document.getElementById("city-name");
var cityTime = document.getElementById("city-time");
var cityTemp = document.getElementById("city-temp");

async function getData(CityName) {
    const promise = await fetch(
        `http://api.weatherapi.com/v1/current.json?key=189543c713b2426e96d174757241807&q=${CityName}&aqi=yes`
    );
    return await promise.json();
}

async function Myfunction() {
    const value = city.value;
    const result = await getData(value);
    cityName.innerText = `${result.location.name}, ${result.location.region} - ${result.location.country}`;
    cityTime.innerText = result.location.localtime;
    cityTemp.innerText = `Temperature: ${result.current.temp_c}°C`; 
    
}

Displaying Weather Information

The JavaScript API receives data and parses the JSON response, allowing developers to access specific parts of the data. Here, we display the city name, local time and temperature in Celsius. You can extend it to include other data like weather conditions, humidity or wind speed.

Conclusion

Integrating the Weather API in JavaScript can be a practical project to enhance your web development skills. The use of APIs in JavaScript allows for more interactive and useful applications by delivering real-world data directly to users. As you develop more with the JavaScript API, you’ll find a variety of applications for real-time data, from finance to social media and beyond.