React Weather App - Javascript

React Weather App is a web application that allows users to retrieve weather information based on a chosen location. This application is built using Javascript, React, and external weather API.

Functionality

The React Weather App is a single-page application that allows users to:

• Search for the weather of any location in the world by typing the city name in the search bar.
• View the temperature, humidity, wind speed, and weather description of the selected location.
• Additionally, users can switch between metric and imperial measurement units to view weather data.

Technical Details

JavaScript

JavaScript is a popular programming language for building web applications and has been used to develop the React Weather App. JavaScript allows for the development of interactive and dynamic web pages, making it an excellent choice for front-end development.

React

React is a JavaScript library used for building user interfaces. React allows developers to create reusable UI components that can be combined to build complex interfaces. This feature is particularly useful when building single-page applications like the React Weather App.

Weather API

The React Weather App uses the OpenWeatherMap API to retrieve weather data. The OpenWeatherMap API provides a vast amount of weather-related data, including current weather conditions, hourly forecasts, and 16-day forecasts, among others.

Code Snippet

import React, { useState } from "react"
import axios from "axios"

const App = () => {
  const [query, setQuery] = useState("");
  const [weather, setWeather] = useState({});

  const search = async (e) => {
    if (e.key === "Enter") {
      const data = await axios.get(
        `https://api.openweathermap.org/data/2.5/weather?q=${query}&units=metric&APPID={API_KEY}`
      );
      setWeather(data.data);
      setQuery("");
    }
  };

  return (
    <div>
      <input
        type="text"
        className="search-bar"
        placeholder="Enter City Name"
        onChange={(e) => setQuery(e.target.value)}
        value={query}
        onKeyPress={search}
      />
      {weather.main && (
        <div>
          <div className="city">{weather.name}</div>
          <div className="temp">{Math.round(weather.main.temp)}°C</div>
          <div className="weather">{weather.weather[0].description}</div>
          <div className="humidity">
            Humidity: {weather.main.humidity}%
          </div>
          <div className="wind-speed">
            Wind Speed: {weather.wind.speed} meters/sec
          </div>
        </div>
      )}
    </div>
  );
};

export default App;

Conclusion

The React Weather App is an excellent example of a single-page application built using Javascript and React. With its intuitive user interface, users can effortlessly obtain weather-related data, making it an invaluable tool for weather enthusiasts.