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!
Top comments (24)
It looks great, but here are a few suggestions to make you a better writer:
Emphasize key points by bolding important parts of the text
Use code highlighting with triple backticks. This will add code highlighting like this:
f you're curious to see it in action, check out my JavaScript blog post where I explore the Double Bang (!!), void operator, eval() function, and more. Dive into the details here.
Welcome to dev.to and keep writing 🧙♂️
yeah, use those Emojs... sure fire way to get me to ignore your article
Imagine judging the quality of an article based on a few emojis. Incredible how mentally restrictive that must be.
Pro tip: your time would be better spent learning how to build a website that doesn’t make people regret having internet access.
Have a good day! emoji emoji 😁
Ignoring is not equal to judging. Don't you worry. There's enough content out there without distractions.
@perisicnikola37 I also have a dislike of emojis in articles and trust me a lot of other people share that same opinion. The fact that you call that mentally restrictive tells a lot about who you are.
I don't like it when it's too much either, but I also think it's monotonous to read a raw text. Everyone has their own opinion and as you can see, the people who liked my comment like it, but there are still people who don't. And that's totally ok.
As I wrote -> Add some emojis
What's disappointing is that you and the person above write to me but don't have enough time to leave any advice for the author. I at least tried to help with four tips.
Greetings!
@retakenroots
Thanks 🙏🏻🙏🏻
Congrats keep building amazing things
♥
Amazing
It's great!
Keep writing
Thanks 🙏🏻
Live link?
1zizo1.github.io/weather-app'
Love a project that does something cool and works as a way to learn new things! Awesome stuff!
Wanted to build something like this, Happy
good blog
Looks great. It would be nice to track user's IP address and show forecast for that location by default. A PR for that is on the way.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.