Latihan praktis menyelesaikan baris kode yang rumpang agar semakin percaya diri saat menulis logika JavaScript di proyek nyata.
jQuery Exercises
Latihan Lengkapi Baris Kode (Fill in the Blank):
<!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; }
.code-box { background: #0f172a; color: #38bdf8; padding: 18px; border-radius: 8px; font-family: monospace; font-size: 15px; }
input { font-family: monospace; padding: 4px 8px; border-radius: 4px; border: 1px solid #38bdf8; background: #1e293b; color: #4ade80; font-weight: bold; width: 80px; }
button { margin-top: 15px; background: #00758f; color: white; border: none; padding: 10px 18px; border-radius: 6px; cursor: pointer; font-weight: bold; }
</style>
</head>
<body>
<h3>Latihan: Event Klik Elemen</h3>
<p>Lengkapi kode berikut agar tombol dengan ID <code>#tombolAksi</code> bereaksi saat diklik:</p>
<div class="code-box">
$('#tombolAksi').<input type="text" id="jawabanInput" placeholder="???">(function() {<br>
alert('Halo Dunia!');<br>
});
</div>
<button id="btnPeriksa">Periksa Jawaban</button>
<div id="statusLatihan" style="margin-top:15px; font-weight:bold;"></div>
<script>
$(document).ready(function() {
$('#btnPeriksa').click(function() {
const jwb = $('#jawabanInput').val().trim().toLowerCase();
if(jwb === 'click' || jwb === 'on') {
$('#statusLatihan').css('color', '#15803d').html('🎉 Jawaban Anda TEPAT! Method <code>click()</code> atau <code>on()</code> berhasil!');
} else {
$('#statusLatihan').css('color', '#b91c1c').html('❌ Jawaban belum tepat. Petunjuk: nama event untuk ketukan mouse adalah "click".');
}
});
});
</script>
</body>
</html>Ketikkan jawaban Anda pada kotak input yang disediakan dan tekan 'Periksa Jawaban'.