diff --git a/index.html b/index.html
index 51cf7bbdf..ab61e279e 100644
--- a/index.html
+++ b/index.html
@@ -753,7 +753,40 @@ <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 =34976b1839311bc9dfa5f1327d36a06b; // << 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 => {
+            if (!response.ok) {
+                // Memberi pesan kesalahan jika API Key/Kota salah
+                throw new Error(`HTTP error! Status: ${response.status}. Cek kembali API Key dan nama kota.`);
+            }
+            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>
\ No newline at end of file
+</html>