import axios from "axios"; import "bootstrap/dist/css/bootstrap.min.css" import { useEffect, useState } from "react"; import './App.css'; function App() { const apiKey = "1815b2003ad4cef38e6b16343a9034ca" const [inputCity, setInputCity] = useState("") const [data, setData] = useState({}) const getWetherDetails = (cityName) => { if (!cityName) return const apiURL = "https://api.openweathermap.org/data/2.5/weather?q=" + cityName + "&appid=" + apiKey axios.get(apiURL).then((res) => { console.log("response", res.data) setData(res.data) }).catch((err) => { console.log("err", err) }) } const handleChangeInput = (e) => { console.log("value", e.target.value) setInputCity(e.target.value) } const handleSearch = () => { getWetherDetails(inputCity) } return ( <div className="col-md-12"> <div className="wetherBg"> <h1 className="heading">Check Weather</h1> <div className="d-grid gap-3 col-4 mt-4"> <input type="text" className="form-control" value={inputCity} onChange={handleChangeInput} /> <button className="btn btn-primary" type="button" onClick={handleSearch} >Search</button> </div> </div> {Object.keys(data).length > 0 && <div className="col-md-12 text-center mt-5 box"> <div className="shadow rounded wetherResultBox"> <img className="weathorIcon" src="https://i.pinimg.com/originals/77/0b/80/770b805d5c99c7931366c2e84e88f251.png" /> <h5 className="weathorCity"> {data?.name} </h5> <h6 className="weathorTemp">{((data?.main?.temp) - 273.15).toFixed(2)}°C</h6> <h6 className="weathorTemp">{data?.wind?.speed} Wind Speed</h6> </div> </div> } </div> ); } export default App;
body{ overflow: hidden; overflow-y: hidden; } .wetherBg{ background: url("https://www.accuweather.com/images/hero/4/1440x450.jpg"); height: 50vh; display: flex; align-items: center; flex-direction: column; justify-content: center; background-repeat: no-repeat; background-size: cover; } .heading{ color:white; font-weight: 700; } .wetherResultBox{ margin: auto; width: 500px; height: 324px; overflow: hidden; } .weathorIcon{ margin-top: 2rem; width: 100px; height: 100px; } .weathorCity{ font-size: 35px; } .weathorTemp{ font-size:30px; font-weight: 700; } @media screen and (max-width:400px) { .box{ position: relative; right: 4rem; } } @media screen and (max-width:375px) { .box{ position: relative; right: 6rem; overflow-y: hidden; } } @media screen and (max-width:414px) { .box{ position: relative; right: 3rem; } } @media screen and (max-width:414px) { .box{ position: relative; right: 3rem; } } @media screen and (max-width: 375px) { body,html { overflow: hidden; } }
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)