<!DOCTYPE html>
<html lang="ar" dir="rtl"> <!-- 🔹 HTML: Arah tulisan Arab kanan-ke-kiri -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Lengkap 3 Bagian</title>
<!-- ==========================================
🎨 BAGIAN CSS: PENGATUR TAMPILAN / HIASAN ========================================== -->
<style>
/* Dasar teks */
.kata {
cursor: pointer; /* Tangan saat diarahkan */
font-size: 18px; /* Ukuran huruf */
padding: 4px 8px; /* Jarak dalam */
color: #1a1a1a; /* Warna teks biasa */
}
/* Gaya saat TANDA BINTANG MUNCUL */
.kata.aktif::after {
content: " *"; /* Munculkan tanda bintang */
color: red; /* Warna merah */
font-weight: bold; /* Tebal */
}
</style>
</head>
<body>
<!-- ==========================================
🦴 BAGIAN HTML: STRUKTUR / ISI / TULISAN
========================================== -->
<div class="wadah">
<h3>صفحة التجربة</h3>
<p>
بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ.
<span class="kata">الْحَمْدُ لِلَّهِ</span> رَبِّ الْعَالَمِينَ.
<span class="kata">الرَّحْمَٰنِ الرَّحِيمِ</span> مَالِكِ يَوْمِ الدِّينِ.
</p>
</div>
<!-- ====================
⚡ BAGIAN JAVASCRIPT: PENGGERAK / AKSI
===================== -->
<script>
// 1. CARI: Cari semua elemen yang punya kelas "kata"
const semuaKata = document.querySelectorAll('.kata');
// 2. ULANGI: Kasih perintah ke masing-masing kata
semuaKata.forEach( fungsi => {
// 3. DENGARKAN: Kalau diklik...
fungsi.addEventListener('click', function() {
// 4. KERJAKAN: Tambah/Hapus kelas "aktif"
this.classList.toggle('aktif');
});
});
</script>
</body>
</html>