Building a Simple Weather App with API Integration
As I continue learning and improving my coding skills, I decided to build a basic weather app using an API to get real-time data. This project helped me understand how to interact with APIs, handle asynchronous operations, and dynamically update the user interface. In this blog, I will walk you through the code I used to create the app.
Project Overview
The weather app fetches weather data for a given location and displays the current weather and a 3-day forecast. It uses the WeatherAPI to gather data, and JavaScript handles the functionality.
Key Features
Location Search: Users can input a city name to get weather data.
Current Weather: Display the current temperature, weather conditions, and more.
Forecast: Show weather forecasts for the next 3 days.
Let's take a look at the key parts of the code that make this app work.
- Fetching Weather Data Using an API
The first step is to fetch the weather data from the WeatherAPI. Here's how I set up the function to handle the API call:
async function searchWeather(term) {
var response = await fetch(`https://api.weatherapi.com/v1/forecast.json?key=7d77b96c972b4d119a3151101212704&q=${term}&days=3`);
if (response.ok && response.status !== 400) {
let weatherData = await response.json();
displayCurrent(weatherData.location, weatherData.current);
displayForecast(weatherData.forecast.forecastday);
}
}
This function uses fetch() to make an asynchronous request to the WeatherAPI. It retrieves the current weather and a 3-day forecast, and then passes that data to the displayCurrent() and displayForecast() functions.
- Handling User Input
The app listens for user input via the search box. When the user types in a location (e.g., "London"), it triggers the weather search:
document.getElementById('search').addEventListener('keyup', function (event) {
searchWeather(event.target.value);
});
In addition, I added a button to trigger the search when clicked:
document.getElementById('searchBtn').addEventListener('click', function() {
let searchTerm = document.getElementById('search').value;
searchWeather(searchTerm);
});
This allows the user to either type in the search box or click the search button to fetch weather data.
- Displaying Current Weather
Once the data is fetched, the displayCurrent() function is responsible for showing the current weather details on the page. Here's how it works:
function displayCurrent(location, currentWeather) {
if (currentWeather) {
let lastUpdatedDate = new Date(currentWeather.last_updated);
let cardHTML = `
<div id="todayCard">
<div class="card">
<div class="card-header d-flex justify-content-between px-4 text-grey">
<span>${days[lastUpdatedDate.getDay()]}</span>
<span>${lastUpdatedDate.getDate()} ${monthNames[lastUpdatedDate.getMonth()]}</span>
</div>
<div class="card-body">
<h5 class="card-title location">${location.name}</h5>
<div class="degree">
<div class="num px-2">${currentWeather.temp_c}<sup>o</sup>C</div>
<div class="forecast-ico">
<img src="https:${currentWeather.condition.icon}" alt="" width="90px">
</div>
</div>
<div class="current-info d-flex">
<span><i class="fa-solid fa-umbrella"> </i> 20%</span>
<span><i class="fa-solid fa-wind"></i> ${currentWeather.gust_kph} Km/h</span>
<span><i class="fa-regular fa-compass"></i>West</span>
</div>
</div>
</div>
</div>
`;
document.getElementById('day').innerHTML = cardHTML;
}
}
This function generates a card displaying the current temperature, weather condition, and additional details like wind speed and humidity. It dynamically updates the page by inserting the generated HTML into the DOM.
- Displaying the 3-Day Forecast
Next, I display the weather forecast for the next three days. This is handled by the displayForecast() function:
function displayForecast(forecastData) {
let forecastHTML = '';
for (let i = 1; i < forecastData.length; i++) {
forecastHTML += `
<div class="col-lg-6 p-0">
<div class="text-center forecastCard">
<div class="card w-100">
<div class="card-header d-flex justify-content-center px-4 text-grey">
<span>${days[new Date(forecastData[i].date).getDay()]}</span>
</div>
<div class="card-body d-flex flex-column align-items-center justify-content-center">
<div class="degree">
<div>
<div class="forecast-ico">
<img src="${forecastData[i].day.condition.icon}" alt="">
</div>
<h1>${forecastData[i].day.maxtemp_c}<sup>o</sup>C</h1>
<h4 class="text-muted">${forecastData[i].day.mintemp_c}<sup>o</sup></h4>
</div>
</div>
<div class="custom text-primary">${forecastData[i].day.condition.text}</div>
</div>
</div>
</div>
</div>
`;
}
document.getElementById('next').innerHTML = forecastHTML;
}
This function loops over the forecast data and generates cards for each of the next two days, showing the max and min temperatures, weather conditions, and icons.
Conclusion
Building this weather app was a great exercise for me as I learned how to interact with APIs, process JSON data, and dynamically update a webpage. The project helped me solidify my knowledge of asynchronous JavaScript, DOM manipulation, and event handling.
If you're just starting with JavaScript and APIs, this weather app is a simple yet powerful way to practice your skills. You can extend this project by adding more features like error handling, more detailed forecasts, or even a dark mode for the UI.
Feel free to try out the code and tweak it to fit your needs. Let me know if you have any questions or suggestions!
SOCIAL SHARE CARD GENERATOR