My first Weather app

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!