Scribd
Upload
9 views3 pages

GeeksforGeeks Weather App Code

The document contains a React component for a weather application that fetches weather data from the OpenWeatherMap API. It includes functionalities for user input, displaying loading indicators, handling errors, and presenting weather information such as temperature and wind speed. The component also formats the current date and displays weather icons based on the fetched data.

Uploaded by

teslanicola398
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
9 views3 pages

GeeksforGeeks Weather App Code

The document contains a React component for a weather application that fetches weather data from the OpenWeatherMap API. It includes functionalities for user input, displaying loading indicators, handling errors, and presenting weather information such as temperature and wind speed. The component also formats the current date and displays weather icons based on the fetched data.

Uploaded by

teslanicola398
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

//App.

js

import { Oval } from 'react-loader-spinner';


import React, { useState } from 'react';
import axios from 'axios';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faFrown } from '@fortawesome/free-solid-svg-icons';
import './[Link]';

function GfGWeatherApp() {
const [input, setInput] = useState('');
const [weather, setWeather] = useState({
loading: false,
data: {},
error: false,
});

const toDateFunction = () => {


const months = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
];
const WeekDays = [
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
];
const currentDate = new Date();
const date = `${WeekDays[[Link]()]} ${[Link]()} $
{months[[Link]()]
}`;
return date;
};

const search = async (event) => {


if ([Link] === 'Enter') {
[Link]();
setInput('');
setWeather({ ...weather, loading: true });
const url = '[Link]
const api_key = 'f00c38e0279b7bc85480c3fe775d518c';
await axios
.get(url, {
params: {
q: input,
units: 'metric',
appid: api_key,
},
})
.then((res) => {
[Link]('res', res);
setWeather({ data: [Link], loading: false, error: false });
})
.catch((error) => {
setWeather({ ...weather, data: {}, error: true });
setInput('');
[Link]('error', error);
});
}
};

return (
<div className="App">
<h1 className="app-name">
GeeksforGeeks Weather App
</h1>
<div className="search-bar">
<input
type="text"
className="city-search"
placeholder="Enter City Name.."
name="query"
value={input}
onChange={(event) => setInput([Link])}
onKeyPress={search}
/>
</div>
{[Link] && (
<>
<br />
<br />
<Oval type="Oval" color="black" height={100} width={100} />
</>
)}
{[Link] && (
<>
<br />
<br />
<span className="error-message">
<FontAwesomeIcon icon={faFrown} />
<span style={{ fontSize: '20px' }}>City not found</span>
</span>
</>
)}
{weather && [Link] && [Link] && (
<div>
<div className="city-name">
<h2>
{[Link]},
<span>{[Link]}</span>
</h2>
</div>
<div className="date">
<span>{toDateFunction()}</span>
</div>
<div className="icon-temp">
<img
className=""
src={`[Link]
%[Link]%5B0%[Link]%7D@[Link]%60%7D
alt={[Link][0].description}
/>
{[Link]([Link])}
<sup className="deg">°C</sup>
</div>
<div className="des-wind">
<p>{[Link][0].[Link]()}</p>
<p>Wind Speed: {[Link]}m/s</p>
</div>
</div>
)}
</div>
);
}

export default GfGWeatherApp;

You might also like