-
+ const [searchInput, setSearchInput] = useState('');
+ const [searchResults, setSearchResults] = useState([]);
+ const dispatch = useDispatch();
-
- Get started by editing
- app/page.js
-
-
- By{' '}
-
-
-
+ const handleSearch = () => {
+ if (searchInput.trim() === ''){
+ alert('Error! You must enter a city name.');
+ return;
+ }
-
-
-
+
+ - -
+ ))}
- Docs -> -
-Find in-depth information about Next.js features and API.
- + dispatch(fetchWeather(searchInput)) + .then((response) => { + if (response.payload.cod === '404') { + alert('Error! You did not enter a correctly spelled city.'); + } else { + setSearchResults((prevResults) => [ + ...prevResults, + { city: searchInput, data: response.payload } + ]); + } + }); + }; - -- Learn -> -
-Learn about Next.js in an interactive course with quizzes!
- + const calculateAverage = (dataList, property) => { + if (!dataList || dataList.length === 0) return 0; + const sum = dataList.reduce((acc, item) => acc + item.main[property], 0); + return (sum / dataList.length).toFixed(2); + }; + + return ( +Sparkly Sparkles Weather
+ setSearchInput(e.target.value)} /> ++ - -
- Templates -> -
-Explore the Next.js 13 playground.
- + {searchResults.map((result, index) => ( +
+
+ {result.data && result.data.list && result.data.list.length > 0 && (
+ <>
+ {result.city}
- -- Deploy -> -
-- Instantly deploy your Next.js site to a shareable URL with Vercel. -
- -Temperature
+
+ datum.main.temp)} height={50}>
+
+
+
+
+
+ -
+ {result.data.list.slice(0, 5).map((datum, index) => (
+
- {datum.main && datum.main.temp} + ))} +
-
+
- 5-day average: {calculateAverage(result.data.list, 'temp')} +
Pressure
+
+ item.main.pressure)} height={50}>
+
+
+
+
+
+ -
+ {result.data.list.slice(0, 5).map((item, index) => (
+
- {item.main && item.main.pressure} + ))} +
-
+
- 5-day average: {calculateAverage(result.data.list, 'pressure')} +
Humidity
+
+ item.main.humidity)} height={50}>
+
+
+
+
+
+ )}
+ -
+ {result.data.list.slice(0, 5).map((item, index) => (
+
- {item.main && item.main.humidity} + ))} +
-
+
- 5-day average: {calculateAverage(result.data.list, 'humidity')} +