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: 20px; background: #f8fafc; } .playground { background: white; padding: 20px; border-radius: 8px; border: 1px solid #cbd5e1; max-width: 480px; } input, select { padding: 8px; margin: 6px 0; border: 1px solid #cbd5e1; border-radius: 6px; } #canvasHasil { margin-top: 15px; padding: 25px; border-radius: 8px; background: #0d2e5c; color: white; text-align: center; } </style> </head> <body> <div class="playground"> <h3>Ubah Properti Elemen Real-Time</h3> <label>Teks Judul:</label><br> <input type="text" id="inTeks" value="Skillance Academy Keren!" style="width:100%; box-sizing:border-box;"><br> <label>Warna Latar:</label> <select id="selWarna"> <option value="#0d2e5c">Biru Navy</option> <option value="#00758f">Cyan Emerald</option> <option value="#fca311">Kuning Oranye</option> <option value="#ef4444">Merah Cerah</option> </select> <div id="canvasHasil"> <h4 id="teksHasil" style="margin:0;">Skillance Academy Keren!</h4> </div> </div> <script> $(document).ready(function() { $('#inTeks').on('input', function() { $('#teksHasil').text($(this).val()); }); $('#selWarna').change(function() { $('#canvasHasil').css('background-color', $(this).val()); }); }); </script> </body> </html>
Hasil Tampilan (Browser Preview)
Muat Ulang