My React Journey: Day 13-JS Tutorial-php.cn

My React Journey: Day 13

Mary-Kate Olsen

Release： 2024-12-14 07:33:11

Original

665 people have browsed it

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

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=";

Copy after login

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");

Copy after login

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";
    }
}

Copy after login

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

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

Copy after login

What I Learned

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!