Untitled

import React, { useEffect, useState } from "react";

export default function Weather() {
  const [data, setData] = useState("");
  const [city, setCity] = useState([]);
  const API_KEY = import.meta.env.VITE_APP_API_KEY;
  const BASE_URL = "https://api.openweathermap.org/data/2.5/";
  const apiUrl = `${BASE_URL}/weather?q=${city}&appid=${API_KEY}&units=metric`;


  const handleChange = (e) => {
    if (e.key === "Enter") {
      if (e.target.value) {
        setCity(e.target.value);
        console.log(e.target.value);
        e.target.value = "";
      }
    }
  };
  useEffect(() => {
    const weathherData = async () => {
      try {
        const res = await fetch(apiUrl);
        if (!res.ok) {
          throw new Error("fetch data not work");
        }
        const result = await res.json();
        setData(result);
        console.log(result);
      } catch (err) {
        console.log(err);
      }
    };
    weathherData();
  }, [apiUrl]);
  return (
    <div className="container">
      <h1 className="text-capitalize">weather application</h1>
      {/* aplication */}
      <br />
      <div className="row">
        <div className="col-md-8">
          <div className="d-flex">
            <input
              onKeyDown={handleChange}
              placeholder="Enter your city name..."
              type="text"
              className="form-control"
              style={{ boxShadow: "none" }}
            />
            <button type="submit" className="btn btn-primary ms-2">
              Search
            </button>
          </div>
        </div>
      </div>
      <br />
      <br />
      <div className="container">
        <div className="row text-capitalize">
          <div className="col-md-6">
            <div className="card" style={{ height: "100%" }}>
              <img
                src=""
                alt="icon"
                className="card-img-top"
                style={{ width: "150px" }}
              />
              <div className="card-body">
                <h2>
                  <span style={{ color: "maroon" }}></span> &deg;C
                </h2>
                <h3> city:</h3>
                <h3>country:</h3>
              </div>
            </div>
          </div>
          <br />
          <br />
          <div className="col-md-6 ">
            <div className="card" style={{ height: "100%" }}>
              <div className="card-body">
                <h3>humidity:</h3>
                <h3>pressure: </h3>
                <h3>wind: </h3>
                <h3>description: </h3>
                <h3>weather type:</h3>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}