Weather Application using ReactJS | react mini project

Using the ReactJS library, we will create an interactive weather application in this article. Users will be able to get real-time weather information for the city they are searching through the built-in application. If users search for the wrong city, they are also shown an error notification stating that the requested city could not be located. We used the OpenWeatherMap API, which provides us with global weather data. For many areas, we have weather data that includes wind speed, among other things.

Important thing : In this weather application i have set the default city but you guys can change it .

Let’s have an interactive look at what our final project will look like:

Asset Link : Link

Technologies Used/Pre-requisites:

Project Structure:

The dependencies in package.json :

"dependencies": {
    "@fortawesome/free-solid-svg-icons": "^6.4.2",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.4.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-loader-spinner": "^5.3.4",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Steps to create React Application And Installing Module

Step 1: Create a React application using the following command:

npx  create-react-app  projectname

cd projectname

Step 2: To run the application:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example: Insert the below code in the respective files.

App.js: All the logic of this application for weather application i have write in the App.js file
Index.css: You guys can also write the styling part in the index.css or app.css but in this application case we will write all the css code in the index.css file

App.js

import React, { useState } from "react";
import { useEffect } from "react";

function App() {
  const [city, setCity] = useState("Delhi");
  const [weatherData, setWeatherData] = useState(null);
  const [error, setError] = useState(null);

  const currentDate = new Date();

  const months = [
    "January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December"
  ];

  const month = months[currentDate.getMonth()];
  const day = currentDate.getDate();
  const year = currentDate.getFullYear();

  const formattedDate = `${month} ${day}, ${year}`;

  const API_KEY = "bcda10ba323e88e96cb486015a104d1d"; // Replace 'YOUR_API_KEY' with your actual API key from OpenWeatherMap

  const fetchWeatherData = async () => {
    try {
      const response = await fetch(
        `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`
      );
      const data = await response.json();
      console.log(data)
      // if (response.ok) {
      setWeatherData(data);
      // setError(null);
      // } else {
      //   setError(data.message);
      //   setWeatherData(null);
      // }
    } catch (error) {
      console.error("Error fetching weather data:", error);
      // setError("Error fetching weather data. Please try again later.");
      // setWeatherData(null);
    }
  };

  useEffect(()=>{

    
  

  fetchWeatherData();

  },[])

  const handleInputChange = (event) => {
    setCity(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    fetchWeatherData();
  };

  const getWeatherIconUrl = (main) => {
    switch (main) {
      case "Clear":
        return "/sun.png"; // Path to your sunny weather icon
      case "Rain":
        return "/icons/rainy.png"; // Path to your rainy weather icon
      case "Snow":
        return "/icons/snowy.png"; // Path to your snowy weather icon
      case "Haze":
        return "/sun.png"; // Path to your haze weather icon
      // Add more cases for other weather conditions as needed
      default:
        return null;
    }
  };


  return (
    <div className="App">
      

      <div className="container">
        {weatherData && (
          <>
            <h1 className="container_date">{formattedDate}</h1>
            <div className="weather_data">
              <h2 className="container_city">{weatherData.name}</h2>
              {/* <img className="container_img" src="/thunder.png" width="180px" alt="sss"/> */}
              <img className="container_img" src={getWeatherIconUrl(weatherData.weather[0].main)} width="180px" alt="Weather Icon" />
              <h2 className="container_degree">{weatherData.main.temp}</h2>
              <h2 className="country_per">{weatherData.weather[0].main}<span className="degree_icon"></span></h2>
              <form className="form" onSubmit={handleSubmit}>
                <input
                  type="text"
                  class="input"
                  placeholder="Enter city name"
                  value={city}
                  onChange={handleInputChange}
                  required
                />
                <button type="submit">Get</button>
              </form>
            </div>
          </>
        )}


      </div>
    </div>
  );
}

export default App;

Index.css

/* Google Font Link */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
 
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  /* background: #0059FF; */
}

.container {
  background: #EDF0F6;
  background: linear-gradient(354deg, #137DF5 0%, #14B1F8 100%);
  /* padding: 30px 120px; */
  width: 320px;
  height: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  border-radius: 10px;
}

.container_date
{
  color: white;
  margin-top:76px;
  opacity: 47%;
  font-size: 22px;
  font-weight: 400;
}

.container_city
{
  margin-top: 1rem;
  font-size: 37px;
  font-weight: 700;
  color: white;

}

.container_degree{
  font-size: 50px;
  font-weight: 800;
  color: white;
  position: relative;
  top: -20px;
}

.container_img
{
  position: relative;
  top: -29px;
}

.degree_icon
{
  font-size: 20px;
}

.country_per
{
  position: relative;
  top: -15px;
  color: white;
  font-size: 18px;
}

.input {
  border: none;
  padding: 1rem;
  border-radius: 0px 0px 0px 15px;
  background: #e8e8e8;
  /* box-shadow: 20px 20px 60px #c5c5c5, -20px -20px 60px #ffffff; */
  transition: 0.3s;
  position: relative;
  top: -2px;
 }
 
 .input:focus {
  outline-color: #e8e8e8;
  background: #e8e8e8;
  box-shadow: inset 20px 20px 60px #e8e8e8,
     inset -20px -20px 60px #ffffff;
  transition: 0.3s;
 }

 /* button */

 button 
  {
    color: #090909;
    padding: 0.7em 0.7em;
    font-size: 18px;
    /* border-radius: 0.5em; */
    /* background: #e8e8e8; */
    cursor: pointer;
    border: 1px solid #e8e8e8;
    transition: all 0.3s;
}

button:active {
  color: #666;
  box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
}

.form
{
  margin-top: 3rem;
}

Conclusion:

We have successfully build this weather application using react js and we have used many technologies in it . To build this react js weather application . i hope you will love this tutorial get so many knowledge from this video. I’m hoping you’ll create this application effectively and get a lot of knowledge from it. We designed this project as a beginner project, but in the future days we will cover more advanced projects as well.

Output:

People are also reading: