Materi
Roadmap
Proyek
Sertifikat
Skillance Code Lab
Jalankan »
Skillance Code Lab Editor
Editor
Hasil
Split
Editor Kode Sumber
Tekan
Ctrl + Enter
untuk Menjalankan
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <style> body { font-family: sans-serif; padding: 25px; background: #f8fafc; } .card { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); max-width: 480px; } button { background: #00758f; color: white; border: none; padding: 10px 18px; border-radius: 6px; cursor: pointer; font-weight: bold; } .badge { background: #22c55e; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; } .loading { color: #fca311; font-weight: bold; } </style> </head> <body> <div class="card"> <h3>Pembaruan Data AJAX Real-Time</h3> <p>Klik tombol di bawah untuk mengambil data kursus terbaru dari server secara asinkron tanpa refresh!</p> <button id="btnAmbil">Ambil Data Terbaru</button> <div id="statusArea" style="margin-top: 15px; min-height: 50px;"></div> </div> <script> $(document).ready(function() { $('#btnAmbil').click(function() { $('#statusArea').html('<p class="loading">⏳ Menghubungi server Skillance Academy...</p>'); // Simulasi pemrosesan AJAX 600ms setTimeout(function() { $('#statusArea').html(` <div style="background:#e0f2fe; padding:12px; border-radius:8px; border-left:4px solid #00758f;"> <span class="badge">Status: 200 OK</span> <h4 style="margin:8px 0 4px 0; color:#0d2e5c;">Skillance Academy Pro v2.4</h4> <p style="margin:0; font-size:13px; color:#475569;">Data berhasil diambil secara asinkron pada: ` + new Date().toLocaleTimeString() + `</p> </div> `); }, 600); }); }); </script> </body> </html>
Hasil Tampilan (Browser Preview)
Muat Ulang