JS Fetch API

<!DOCTYPE html>
<html>
<body style="font-family: sans-serif; padding: 20px;">
    <h2>Mengambil Data API Publik</h2>
    <button onclick="ambilData()" style="padding:10px 18px; font-weight:bold; cursor:pointer;">Tarik Data Pengguna &raquo;</button>
    <div id="hasilFetch" style="margin-top:15px; background:#f8fafc; padding:15px; border-radius:8px; border:1px solid #e2e8f0;">Menunggu tombol diklik...</div>

    <script>
        async function ambilData() {
            const out = document.getElementById('hasilFetch');
            out.innerText = "Memuat data dari server...";
            try {
                const respon = await fetch('https://jsonplaceholder.typicode.com/users/1');
                const user = await respon.json();
                out.innerHTML = 
                    "Nama: <strong>" + user.name + "</strong><br>" +
                    "Email: " + user.email + "<br>" +
                    "Kota: " + user.address.city;
            } catch (err) {
                out.innerText = "Gagal memuat API: " + err.message;
            }
        }
    </script>
</body>
</html>