My React Journey: Day 13

Project O'Clock: Weather App

Today, I created a simple weather app that fetches real-time weather data from the OpenWeather API. The app allows users to search for a city and displays key weather information, such as temperature, humidity, wind speed, and weather conditions.

Key Code Highlights

1. API Details The app uses the OpenWeather API with metric units for temperature.

const apiKey = "789b1d530**********"; 
const apiUrl = "https://api.openweathermap.org/data/2.5/weather?&units=metric&q=";

2.Query Selectors
These elements connect the HTML structure with JavaScript:

const searchBox = document.querySelector(".search input");
const searchBtn = document.querySelector(".search button");
const weatherIcon = document.querySelector(".weather-icon");

3.Fetching Weather Data
The checkWeather() function sends an API request and handles the response.

async function checkWeather(city) {
    const response = await fetch(apiUrl + city + `&appid=${apiKey}`);

    if (response.status == 404) {
        document.querySelector(".error").style.display = "block";
        document.querySelector(".weather").style.display = "none";
    } else {
        const data = await response.json();

        // Updating Weather Information
        document.querySelector(".city").innerHTML = data.name;
        document.querySelector(".temp").innerHTML = Math.round(data.main.temp) + "°c";
        document.querySelector(".humidity").innerHTML = data.main.humidity + "%";
        document.querySelector(".wind").innerHTML = data.wind.speed + " km/hr";

        // Dynamic Weather Icon Update
        if (data.weather[0].main == "Clouds") {
            weatherIcon.src = "images/clouds.png";
        } else if (data.weather[0].main == "Rain") {
            weatherIcon.src = "images/rain.png";
        } else if (data.weather[0].main == "Clear") {
            weatherIcon.src = "images/clear.png";
        } else if (data.weather[0].main == "Drizzle") {
            weatherIcon.src = "images/drizzle.png";
        } else if (data.weather[0].main == "Mist") {
            weatherIcon.src = "images/mist.png";
        }

        document.querySelector(".weather").style.display = "block";
        document.querySelector(".error").style.display = "none";
    }
}

4.Event Listener for Search
This adds interactivity to the search button:

searchBtn.addEventListener("click", () => {
    checkWeather(searchBox.value);
});

What I Learned

1. API Integration:

Fetching data using fetch() and handling the response with async/await.
Importance of managing API keys securely (this key is for testing purposes only).

2.Error Handling:

Displaying an error message when an invalid city is entered or if the API request fails.

3.Dynamic UI Updates:
Dynamically updating content on the page based on API data.
Conditional rendering for different weather icons.

4.CSS & Responsiveness:

The app uses a simple card-based UI. A separate styles.css file was used to manage layout and design.

5.JavaScript DOM Manipulation:
Using querySelector and innerHTML to interact with the HTML elements.

Final Thoughts
Building this weather app was exciting and reinforced my knowledge of JavaScript, API calls, and DOM manipulation. As I continue, I look forward to transitioning such projects into React for a more component-based approach. ?

The above is the detailed content of My React Journey: Day 13. For more information, please follow other related articles on the PHP Chinese website!