Skip to content

Commit 511821f

Browse files
RushikeshPandekarRushikeshPandekar
committed
button event and time added
1 parent 713faee commit 511821f

File tree

1 file changed

+110
-6
lines changed

1 file changed

+110
-6
lines changed

‎src/App.js

+110-6
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,13 @@ function App() {
1212
event.preventDefault();
1313
const loc=event.target.elements.loc.value;
1414
const res=await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${loc}&units=metric&appid=${apikey}`);
15+
function Time(city,offset){
16+
let d= new Date();
17+
let utc= d.getTime()+(d.getTimezoneOffset()*60000);
18+
let nd= new Date(utc+(1000*offset));
19+
console.log(utc)
20+
return nd.toLocaleString();
21+
}
1522
setWeather({
1623
descp: res.data.weather[0].description,
1724
temp:res.data.main.temp,
@@ -20,8 +27,105 @@ function App() {
2027
pressure:res.data.main.pressure,
2128
humidity:res.data.main.humidity,
2229
mintemp:res.data.main.temp_min,
23-
maxtemp:res.data.main.temp_min,
30+
maxtemp:res.data.main.temp_max,
2431
windspeed:res.data.wind.speed,
32+
time:Time(loc,res.data.timezone),
33+
});
34+
};
35+
const apiCallpune=async(event)=>{
36+
event.preventDefault();
37+
const loc="pune";
38+
const res=await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${loc}&units=metric&appid=${apikey}`);
39+
function Time(city,offset){
40+
let d= new Date();
41+
let utc= d.getTime()+(d.getTimezoneOffset()*60000);
42+
let nd= new Date(utc+(1000*offset));
43+
console.log(utc)
44+
return nd.toLocaleString();
45+
}
46+
setWeather({
47+
descp: res.data.weather[0].description,
48+
temp:res.data.main.temp,
49+
city:res.data.name,
50+
icon:res.data.weather[0].icon,
51+
pressure:res.data.main.pressure,
52+
humidity:res.data.main.humidity,
53+
mintemp:res.data.main.temp_min,
54+
maxtemp:res.data.main.temp_max,
55+
windspeed:res.data.wind.speed,
56+
time:Time(loc,res.data.timezone),
57+
});
58+
};
59+
const apiCallkolkata=async(event)=>{
60+
event.preventDefault();
61+
const loc="kolkata";
62+
const res=await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${loc}&units=metric&appid=${apikey}`);
63+
function Time(city,offset){
64+
let d= new Date();
65+
let utc= d.getTime()+(d.getTimezoneOffset()*60000);
66+
let nd= new Date(utc+(1000*offset));
67+
console.log(utc)
68+
return nd.toLocaleString();
69+
}
70+
setWeather({
71+
descp: res.data.weather[0].description,
72+
temp:res.data.main.temp,
73+
city:res.data.name,
74+
icon:res.data.weather[0].icon,
75+
pressure:res.data.main.pressure,
76+
humidity:res.data.main.humidity,
77+
mintemp:res.data.main.temp_min,
78+
maxtemp:res.data.main.temp_max,
79+
windspeed:res.data.wind.speed,
80+
time:Time(loc,res.data.timezone),
81+
});
82+
};
83+
const apiCalllondon=async(event)=>{
84+
event.preventDefault();
85+
const loc="london";
86+
const res=await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${loc}&units=metric&appid=${apikey}`);
87+
function Time(city,offset){
88+
let d= new Date();
89+
let utc= d.getTime()+(d.getTimezoneOffset()*60000);
90+
let nd= new Date(utc+(1000*offset));
91+
console.log(utc)
92+
return nd.toLocaleString();
93+
}
94+
setWeather({
95+
descp: res.data.weather[0].description,
96+
temp:res.data.main.temp,
97+
city:res.data.name,
98+
icon:res.data.weather[0].icon,
99+
pressure:res.data.main.pressure,
100+
humidity:res.data.main.humidity,
101+
mintemp:res.data.main.temp_min,
102+
maxtemp:res.data.main.temp_max,
103+
windspeed:res.data.wind.speed,
104+
time:Time(loc,res.data.timezone),
105+
});
106+
};
107+
const apiCallparis=async(event)=>{
108+
event.preventDefault();
109+
const loc="paris";
110+
const res=await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${loc}&units=metric&appid=${apikey}`);
111+
function Time(city,offset){
112+
let d= new Date();
113+
let utc= d.getTime()+(d.getTimezoneOffset()*60000);
114+
let nd= new Date(utc+(1000*offset));
115+
console.log(utc)
116+
return nd.toLocaleString();
117+
}
118+
setWeather({
119+
descp: res.data.weather[0].description,
120+
temp:res.data.main.temp,
121+
city:res.data.name,
122+
icon:res.data.weather[0].icon,
123+
pressure:res.data.main.pressure,
124+
humidity:res.data.main.humidity,
125+
mintemp:res.data.main.temp_min,
126+
maxtemp:res.data.main.temp_max,
127+
windspeed:res.data.wind.speed,
128+
time:Time(loc,res.data.timezone),
25129
});
26130
};
27131
// let k=weather.temp;
@@ -32,7 +136,7 @@ function App() {
32136
<div className="temp">{weather.temp} &deg;</div>
33137
<div className="city_datetime">
34138
<span className="city">{weather.city}</span>
35-
<span className="datetime">06:09-Monday 9 sep'19</span>
139+
<span className="datetime">{weather.time}</span>
36140
</div>
37141
<div className="weather">
38142
<img src={`http://openweathermap.org/img/wn/${weather.icon}@2x.png`} alt="weather icon" className="w-icon" height="50px" width="50px"></img>
@@ -88,10 +192,10 @@ function App() {
88192
<button id="butn4">Button</button>
89193
</div> */}
90194
<div className = "cities">
91-
<div><button className="butn">Pune</button></div>
92-
<div><button className="butn">Kolkata</button></div>
93-
<div><button className="butn">London</button></div>
94-
<div><button className="butn">Paris</button></div>
195+
<div><button className="butn" onClick={apiCallpune}>Pune</button></div>
196+
<div><button className="butn" onClick={apiCallkolkata}>Kolkata</button></div>
197+
<div><button className="butn" onClick={apiCalllondon}>London</button></div>
198+
<div><button className="butn" onClick={apiCallparis}>Paris</button></div>
95199
</div>
96200
</div>
97201
</div>

0 commit comments

Comments
 (0)