-
Notifications
You must be signed in to change notification settings - Fork 0
/
Ana Nurfaridah_quiz8_await-wheater.html
116 lines (94 loc) · 3.74 KB
/
Ana Nurfaridah_quiz8_await-wheater.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
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
114
115
116
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>quiz8 Wheater</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container mt-3">
<h1>Data Cuaca Daerah : <span id="name_city"></span></h1>
<table class="table table-hover table-bordered table-striped">
<thead>
<th>No</th>
<th>Date Time</th>
<th>Wheater</th>
<th>Wheater Desc</th>
<th>Wind Spend</th>
<th>Temperature</th>
<th>Humidity</th>
<th>Rain</th>
<th>Clouds</th>
</thead>
<tbody id="myTbody">
</tbody>
</table>
</div>
<script>
function getWeather() {
const request = new Request("https://api.openweathermap.org/data/2.5/forecast?lat=-7.7214217&lon=110.4138864&appid=ab0072a2ae28523c5680187db1669d43", {
method: "GET"
});
const response = fetch(request);
return response.then((response) => response.json());
}
async function getResponseWeather() {
try {
return await getWeather();
} catch (e) {
return "Data Not Found";
} finally { }
}
getResponseWeather()
.then(function (data) {
console.info(data);
console.info(data.city);
console.info(data.city.name);
console.info(data.list);
document.getElementById("name_city").textContent = data.city.name;
let no = 1;
// for (v of data.list) {
// console.info(v);
// // console.info(v.rain.3h);
// // console.info(Object.values(v.rain)[0]);
// if (typeof v.rain !== 'undefined') {
// var rain = Object.values(v.rain)[0];
// } else {
// var rain = "no data";
// }
// console.info(rain);
// // code taruh data ke tr / row table
let text = "<table border='1'>"
for (let v of data.list) {
console.info(v);
if (typeof v.rain !== 'undefined') {
var rain = Object.values(v.rain) [0];
} else {
var rain = "no data";
}
console.info(rain);
// for (var i = 1; i < 1; i++) {
// console.info(i)};
text += "<tr>"
text += "<td>" + no + "</td>"; //no
text += "<td>" + v.dt_txt + "</td>";
text += "<td>" + v.weather[0].main + "</td>"; //
text += "<td>" + v.weather[0].description + "</td>"; //desc
text += "<td>" + v.wind.speed + "</td>";
text += "<td>" + v.main.temp + "</td>";
text += "<td>" + v.main.humidity + "</td>";
text += "<td>" + (rain)+ "</td>"; //
text += "<td>" + v.clouds.all + "</td>";
text += "</tr>"
text += "</table>"
no++;
}
document.getElementById('myTbody').innerHTML = text;
}
)
</script>
</body>
</html>