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

1. Location Search: Users can input a city name to get weather data.

2. Current Weather: Display the current temperature, weather conditions, and more.

3. 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.

1. 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.

1. 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.

1. 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>



<p>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.</p>


<hr>

<ol>
<li>Displaying the 3-Day Forecast</li>
</ol>

<p>Next, I display the weather forecast for the next three days. This is handled by the displayForecast() function:<br>
</p><pre class="brush:php;toolbar:false">function displayForecast(forecastData) {
    let forecastHTML = '';
    for (let i = 1; i < forecastData.length; i  ) {
        forecastHTML  = `
            <div>



<p>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.</p>


<hr>

<p>Conclusion</p>

<p>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.</p>

<p>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.</p>


<hr>

<p>Feel free to try out the code and tweak it to fit your needs. Let me know if you have any questions or suggestions!</p>


          

            
        

The above is the detailed content of My first Weather app. For more information, please follow other related articles on the PHP Chinese website!