WeatherApp.jsx

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;