-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
113 lines (103 loc) · 3.19 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import React from "react";
import "./app.css";
import Weather from "./Components/Weather.component";
import "bootstrap/dist/css/bootstrap.min.css";
import "weather-icons/css/weather-icons.css";
import Form from "./Components/form.component";
const Api_key = "366de13a890fc080f3fa56a21211cfef";
class App extends React.Component {
constructor() {
super();
this.state = {
city: undefined,
country: undefined,
icon: undefined,
main: undefined,
temp_celsius: undefined,
temp_max: undefined,
temp_min: undefined,
description: "",
error: false,
};
this.weatherIcon = {
Thunderstorm: "wi-thunderstorm",
Drizzle: "wi-sleet",
Rain: "wi-storm-showers",
Snow: "wi-snow",
Atmosphere: "wi-fog",
Clear: "wi-day-sunny",
Clouds: "wi-day-fog",
};
}
calCelsius(temp) {
let celsius = Math.floor(temp - 273.15);
return celsius;
}
get_WeatherIcon(icons, rangeId) {
switch (true) {
case rangeId >= 200 && rangeId <= 232:
this.setState({ icon: this.weatherIcon.Thunderstorm });
break;
case rangeId >= 300 && rangeId <= 321:
this.setState({ icon: this.weatherIcon.Drizzle });
break;
case rangeId >= 500 && rangeId <= 531:
this.setState({ icon: this.weatherIcon.Rain });
break;
case rangeId >= 600 && rangeId <= 622:
this.setState({ icon: this.weatherIcon.Snow });
break;
case rangeId >= 701 && rangeId <= 781:
this.setState({ icon: this.weatherIcon.Atmosphere });
break;
case rangeId === 800:
this.setState({ icon: this.weatherIcon.Clear });
break;
case rangeId >= 801 && rangeId <= 804:
this.setState({ icon: this.weatherIcon.Clouds });
break;
default:
this.setState({ icon: this.weatherIcon.Clouds });
}
}
getWeather = async (e) => {
e.preventDefault();
const city = e.target.elements.city.value;
const country = e.target.elements.country.value;
if (city && country) {
const api_call = await fetch(
`https://api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=${Api_key}`
);
const response = await api_call.json();
console.log(response);
this.setState({
city: `${response.name},${response.sys.country}`,
temp_celsius: this.calCelsius(response.main.temp),
temp_max: this.calCelsius(response.main.temp_max),
temp_min: this.calCelsius(response.main.temp_min),
description: response.weather[0].description,
error: false,
});
this.get_WeatherIcon(this.weatherIcon, response.weather[0].id);
} else {
this.setState({ error: true });
}
};
render() {
return (
<div className="App">
<Form loadWeather={this.getWeather} error={this.state.error} />
<Weather
city={this.state.city}
country={this.state.country}
temp_max={this.state.temp_max}
temp_min={this.state.temp_min}
temp_celsius={this.state.temp_celsius}
description={this.state.description}
weatherIcon={this.state.icon}
/>
</div>
);
}
}
export default App;