Using the ReactJS Framework, In this React js weather application tutorial we will create an interactive weather application. The user will be able to access real-time weather information for the city they have searched for through the built application by consuming the api from openweathermap .Also you can find the React js weather application github code.
Let’s take a peek at our finished product in an interactive manner | React js weather application example:
Technologies Used/Pre-requisites:
ReactJS
React js.
CSS.
JSX.
Function Components in React.
Method:
The ReactJS Framework is used in the produced code to display the interactive Weather Application. Users of the programme can access real-time information about a variety of cities. We are retrieving the weather information for the city that the user has looked for with the aid of API. The application is fully responsive, and it responds quickly in terms of output. The user interface of the app is likewise user-friendly.
Project Structure:
Steps to create React Application And Installing Module
Step 1: Create a React application using the following command:
npx create-react-app projectname
then jump to the directory
cd projectname
Step 2: To run the application:
npm start
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 { 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; “`
CSS ( 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.
