T

index.html

@@ -753,7 +753,44 @@ <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
     <!-- Page level custom scripts -->
     <script src="js/demo/chart-area-demo.js"></script>
     <script src="js/demo/chart-pie-demo.js"></script>
-
+<div>
+    <h3>Data Sensor Cuaca Kota Cerdas</h3>
+    <p id="cuaca">Memuat data...</p>
+</div>
+<script>
+    // --- GANTI NILAI INI ---
+    const apiKey = 'c8072928c19d23b1978759c3c681f81e'; // << HARUS DIGANTI!
+    const city = 'Bandung'; // << GANTI NAMA KOTA ANDA
+    // Konstruksi URL yang BENAR menggunakan Template Literal (backtick: `)
+    const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
+  fetch(apiUrl)
+    .then(response => {
+        console.log("Status:", response.status);
+        if (!response.ok) {
+            throw new Error(`Status: ${response.status}`);
+        }
+        return response.json();
+    })
+
+        .then(data => {
+            // Ambil data yang diperlukan
+            const suhu = data.main.temp;
+            const kelembapan = data.main.humidity;
+            const namaKota = data.name;
+            // Update elemen HTML menggunakan Template Literal yang BENAR
+            document.getElementById("cuaca").innerText =
+                `Lokasi: ${namaKota} | Suhu: ${suhu}°C | Kelembapan: ${kelembapan}%`;
+        })
+        .catch(error => {
+            // Tampilkan pesan kesalahan jika fetch gagal
+            document.getElementById("cuaca").innerText = `Gagal mengambil data. (${error.message})`;
+            console.error(error);
+        });
+
+</script>
+
+
+
 </body>
 
-</html>
+</html>