-
Notifications
You must be signed in to change notification settings - Fork 0
/
exercise4p.html
51 lines (46 loc) · 1.61 KB
/
exercise4p.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React getting started</title>
</head>
<body>
<!-- Root container for react components -->
<div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
const HooksWeather = () => {
const [temperature, setTemperature] = React.useState(0);
const [weather, setWeather] = React.useState("");
const [img, setImg] = React.useState("");
const fetchData = () => {
fetch(
"https://openweathermap.org/data/2.5/weather?q=London,uk&appid=b6907d289e10d714a6e88b30761fae22"
)
.then(response => response.json())
.then(responseData => {
setTemperature(responseData.main.temp);
setWeather(responseData.weather[0].description);
setImg(responseData.weather[0].icon);
});
};
React.useEffect(() => {
fetchData();
}, []);
const url = "http://openweathermap.org/img/w/" + img + ".png";
if (url !== "") {
return (
<div>
<p> Temperature: {temperature}</p>
<p> Weather: {weather}</p>
<img src={url} />
</div>
);
}
};
ReactDOM.render(<HooksWeather />, document.getElementById("root"));
</script>
</body>
</html>