Merge pull request karangaikwad#6 from RushikeshPandekar/main

Api added

Author: karangaikwad

src/App.css

@@ -50,7 +50,7 @@ body{
 .Todays_weather{
   margin-left: 10vh;
   /* border:2px solid black; */
-  width:500px;
+  width:550px;
   display: flex;
   flex-wrap: wrap;
   padding:40px;
@@ -87,7 +87,7 @@ body{
 .temp{
   float:left;
   color: white;
-  font-size: 60px;
+  font-size: 40px;
   font-weight: 500;
   margin:6px;
 }

src/App.js

@@ -1,79 +1,102 @@
 import './App.css';
 import "axios";
+import { useState } from 'react';
+import axios from 'axios';
 
 function App() {
+  
+  const [weather,setWeather]=useState("");
+  const apikey="c6b22ba82ac0661c3d775b2062b31250";
+
+  const apiCall=async(event)=>{
+    event.preventDefault();
+    const loc=event.target.elements.loc.value;
+    const res=await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${loc}&units=metric&appid=${apikey}`);
+    setWeather({
+      descp: res.data.weather[0].description,
+      temp:res.data.main.temp,
+      city:res.data.name,
+      icon:res.data.weather[0].icon,
+      pressure:res.data.main.pressure,
+      humidity:res.data.main.humidity,
+      mintemp:res.data.main.temp_min,
+      maxtemp:res.data.main.temp_min,
+      windspeed:res.data.wind.speed,
+    });
+  };
+  // let k=weather.temp;
+  // let c=k.toFixed(2);
   return (
-    <div class = "weatherApp">
-
-
-    
+    <div className = "weatherApp">
     <div className="Todays_weather">
-      <div className="temp">16 &deg;</div>
+      <div className="temp">{weather.temp} &deg;</div>
       <div className="city_datetime">
-        <span className="city">London</span>
+        <span className="city">{weather.city}</span>
         <span className="datetime">06:09-Monday 9 sep'19</span>
       </div>
       <div className="weather">
-        <img src="http://openweathermap.org/img/wn/10d@2x.png" alt="weather icon" className="w-icon" height="50px" width="50px"></img>
-        <span>Cloudy</span>
+        <img src={`http://openweathermap.org/img/wn/${weather.icon}@2x.png`} alt="weather icon" className="w-icon" height="50px" width="50px"></img>
+        <span>{weather.descp}</span>
       </div>
 
     </div >
 
-<div class="App">
+<div className="App">
 <div>
 
-  <div class="input">
-    <form class="d-flex">
-      <input class="form-control me-2" type="search" placeholder="Search Here" aria-label="Search" />
-      <button class="btn" type="submit">Search</button>
+  <div className="input">
+    <form className="d-flex" onSubmit={apiCall}>
+      <input className="form-control me-2" type="search" placeholder="Search Here" aria-label="Search" name="loc"/>
+      <button className="btn" type="submit">Search</button>
     </form>
 
 
 
   </div>
   <hr></hr>
-  <div class="page">Todays weather</div>
+  <div className="page">Todays weather</div>
   <table>
+    <tbody>
+    <tr>
+      <th>Min Temp</th>
+      <td>{weather.mintemp}&deg;</td>
+    </tr>
     <tr>
-      <th>Clouds</th>
-      <td>50%</td>
+      <th>Max Temp</th>
+      <td>{weather.maxtemp}&deg;</td>
     </tr>
     <tr>
-      <th>Density</th>
-      <td>5.3Kg/m<sup>3</sup></td>
+      <th>Presssure</th>
+      <td>{weather.pressure}</td>
+    </tr>
+    <tr>
+      <th>Humidity</th>
+      <td>{weather.humidity}</td>
     </tr>
     <tr>
       <th>WindSpeed</th>
-      <td>20mph</td>
+      <td>{weather.windspeed}</td>
     </tr>
+    </tbody>
   </table>
   <hr></hr>
-  <div class="page">Cities</div>
-  {/* <div class = "cities">
+  <div className="page">Cities</div>
+  {/* <div className = "cities">
        <button  id="butn1">Button</button>  
        <button  id="butn2">Button</button>
        <button  id="butn3">Button</button>
        <button  id="butn4">Button</button>
   </div> */}
-  <div class = "cities">
-      <div><button class="butn">Pune</button></div>
-      <div><button class="butn">Kolkata</button></div>
-      <div><button class="butn">London</button></div>
-      <div><button class="butn">Paris</button></div>
+  <div className = "cities">
+      <div><button className="butn">Pune</button></div>
+      <div><button className="butn">Kolkata</button></div>
+      <div><button className="butn">London</button></div>
+      <div><button className="butn">Paris</button></div>
   </div>
 </div>
 </div>
 </div>
-
-
-
-
-
-
-
-
-  );
+);
 }
 
 export default App;