WeatherApp.jsx
WeatherApp.jsxunknown
plain_text
a year ago
2.5 kB
7
Indexable
import { useState } from "react"; import { useNavigate } from "react-router-dom"; import { Link } from 'react-router-dom'; import './WeatherData.css' import Button from '@mui/material/Button'; const api = { key: "95d7fb89913501eb128ba6c87da49a8e", base: "https://api.openweathermap.org/data/2.5/", }; const WeatherApp =()=> { const navi=useNavigate(); const [search, setSearch] = useState(""); const [weather, setWeather] = useState({}); /* Search button is pressed. Make a fetch call to the Open Weather Map API. */ const searchPressed = () => { fetch(`${api.base}weather?q=${search}&units=metric&APPID=${api.key}`) .then((res) => res.json()) .then((result) => { setWeather(result); }); }; return ( <div className="App"> <header className="App-header"> <header> <nav> <div className="nav-left"> </div> <div className="nav-right"> <p>Welcome !!!!! {localStorage.getItem("name")}</p><br/> <Button variant="contained" onClick={() => navi('/Dashboard')}>Dashboard</Button><br/> </div> </nav> </header> {/* HEADER */} <h1 className="appname">Weather App</h1> {/* <Link to="/Dashboard">Dashboard</Link><br/> <Link to="/ImageUpload">Image Upload</Link> */} {/* Search Box - Input + Button */} <div> <input type="text" placeholder="Enter city/town..." onChange={(e) => setSearch(e.target.value)} /> <br/> <br/> <button onClick={searchPressed}>Search</button> </div> {/* If weather is not undefined display results from API */} {typeof weather.main !== "undefined" ? ( <div> {/* Location */} <p>{weather.name}</p> {/* Temperature Celsius */} <p>{weather.main.temp}°C</p> {/* Condition (Sunny ) */} {/* <p>{weather.weather[0].main}</p> */} <p>({weather.weather[0].description})</p> </div> ) : ( "" )} </header> </div> ); } export default WeatherApp;
Editor is loading...
Leave a Comment