Masukkan Password

44 Membuat Jendela Modal Kustom

Akhlis 05 September 2026

12 Min Read

Lecture ini melanjutkan langsung dari materi DOM manipulation + event listener + function yang sebelumnya kita bahas.

Kalau lecture sebelumnya fokus pada “bagaimana menangani event pada elemen DOM”, lecture kali ini mulai menggabungkan beberapa konsep menjadi fitur nyata:

Mengganti alert() bawaan browser dengan custom modal yang dibuat dari HTML + CSS + JavaScript.

1. Gambaran besar lecture

Sebelumnya, ketika user menekan tombol Calculate EMI, program melakukan:

User klik Calculate EMI
        ↓
calculateEmi()
        ↓
Hitung EMI
        ↓
alert(...)
        ↓
Browser menampilkan alert bawaan

Contohnya:

alert(`EMI: $500
Total Payable: $60,000`);

Masalahnya, alert() adalah UI bawaan browser. Kita tidak punya banyak kontrol terhadap tampilannya.

Sekarang kita ingin membuat sendiri:

User klik Calculate EMI
        ↓
calculateEmi()
        ↓
Hitung EMI
        ↓
Tampilkan custom modal
        ↓
Modal menampilkan:
  EMI = $500
  Total Payable = $60,000
        ↓
User klik OK
        ↓
Modal disembunyikan

Jadi inti lecture ini sebenarnya adalah:

JavaScript mengubah class CSS dan isi HTML secara dinamis berdasarkan interaksi user.

Modal adalah sebuah kotak/dialog yang muncul di atas halaman untuk memberikan informasi atau meminta interaksi user.

Contoh sederhananya:

┌───────────────────────────────┐
│        EMI DETAILS            │
│                               │
│ Monthly EMI     $500.25       │
│ Total Payable   $60,030.00    │
│                               │
│                    [ OK ]     │
└───────────────────────────────┘

Disebut custom modal karena tampilannya dibuat oleh kita menggunakan:

HTML → struktur
CSS → tampilan
JavaScript → perilaku

Pada lecture ini, instructor tidak membuat modal dari JavaScript.

HTML-nya sudah ada di index.html.

Misalnya secara sederhana:

<div id="calculate-emi-modal" class="modal-overlay hide">
    ...
    
    <button class="close-modal-button">
        OK
    </button>
</div>

Perhatikan dua hal penting:

id="calculate-emi-modal"

dan:

class="modal-overlay hide"

id digunakan JavaScript untuk menemukan modal.

Sedangkan:

hide

digunakan CSS untuk menyembunyikan modal.

4. Bagaimana class `hide` bekerja?

Di style.css terdapat sesuatu seperti:

.hide {
    display: none;
}

Artinya:

Kalau sebuah elemen memiliki class hide, jangan tampilkan elemen tersebut di UI.

Misalnya:

<div class="modal-overlay hide">

Browser melihat:

display: none;

Akibatnya modal tidak terlihat.

Secara visual:

HTML ada
   ↓
<div class="modal-overlay hide">
   ↓
CSS display: none
   ↓
Tidak terlihat

Ini penting:

Elemen sebenarnya masih ada di DOM. Hanya saja tidak ditampilkan.

Ini berbeda dengan menghapus elemen menggunakan JavaScript.

5. Ada perbedaan antara “disembunyikan” dan “dihapus”

Ini konsep yang sangat penting.

Disembunyikan

display: none;

Elemen:

DOM
 ↓
masih ada
 ↓
tidak terlihat

Dihapus

Misalnya:

element.remove();

atau:

container.innerHTML = "";

Elemen:

DOM
 ↓
dihapus
 ↓
sudah tidak ada

Jadi pada lecture ini kita memilih:

Modal tetap ada di DOM, tetapi kita mengontrol apakah dia terlihat atau tidak menggunakan class hide.

Saat awal:

<div id="calculate-emi-modal" class="modal-overlay hide">

Ada:

modal-overlay
hide

Ketika user klik Calculate EMI, kita ingin menghilangkan:

hide

Sehingga menjadi:

<div id="calculate-emi-modal" class="modal-overlay">

Karena class hide sudah tidak ada:

.hide {
    display: none;
}

tidak berlaku lagi.

Modal akhirnya muncul.

7. Menggunakan `classList`

JavaScript menyediakan property:

element.classList

untuk mengelola class pada sebuah element.

Misalnya:

<div class="box hide"></div>

Kita bisa melakukan:

box.classList.remove("hide");

Artinya:

Hapus class hide dari element.

Dan:

box.classList.add("hide");

artinya:

Tambahkan class hide ke element.

Jadi:

classList.add()
       ↓
menambahkan class

classList.remove()
       ↓
menghapus class

8. Membuat function `showModal()`

Instructor kemudian membuat function:

function showModal(emi, payableAmount) {
    ...
}

Kenapa menggunakan function?

Karena kita ingin memisahkan tanggung jawab.

Function:

calculateEmi()

bertugas:

Menghitung EMI.

Sedangkan:

showModal()

bertugas:

Menampilkan hasil perhitungan dalam modal.

Ini desain yang lebih bagus daripada menaruh semua kode di satu tempat.

9. Mengakses modal menggunakan `getElementById()`

Modal diberikan ID:

id="calculate-emi-modal"

Kemudian JavaScript:

let modalDiv = document.getElementById("calculate-emi-modal");

Mari kita pecahkan.

`document`

Mewakili halaman HTML saat ini.

`.getElementById()`

Mencari element berdasarkan ID.

`"calculate-emi-modal"`

ID yang ingin dicari.

Hasilnya

JavaScript mendapatkan object DOM:

document
   ↓
getElementById()
   ↓
"calculate-emi-modal"
   ↓
DOM element

Kemudian disimpan:

let modalDiv = ...

Sehingga:

modalDiv
   ↓
menunjuk ke <div id="calculate-emi-modal">

10. Menampilkan modal dengan `classList.remove()`

Setelah mendapatkan modal:

let modalDiv =
    document.getElementById("calculate-emi-modal");

kita lakukan:

modalDiv.classList.remove("hide");

Artinya:

Modal punya:
"modal-overlay hide"

        ↓ remove("hide")

Modal punya:
"modal-overlay"

Karena hide hilang:

.hide {
    display: none;
}

tidak lagi berlaku.

Modal muncul.

Karena showModal() dipanggil dari calculateEmi().

Kurang lebih:

function calculateEmi() {

    // ambil input

    // hitung EMI

    // hitung payable amount

    showModal(emi, payableAmount);
}

Jadi alurnya:

Klik Calculate EMI
        ↓
calculateEmi()
        ↓
ambil input
        ↓
hitung EMI
        ↓
hitung payable amount
        ↓
showModal()
        ↓
remove("hide")
        ↓
Modal muncul

12. Kenapa `showModal()` menerima parameter?

Perhatikan:

function showModal(emi, payableAmount) {

Ada dua parameter:

emi
payableAmount

Karena modal perlu tahu:

“Berapa hasil perhitungannya?”

Misalnya:

showModal(500.25, 60030);

Maka:

emi = 500.25
payableAmount = 60030

Ini memanfaatkan konsep parameter dan argument yang kita pelajari di function.

Di HTML terdapat table cell untuk EMI.

Misalnya:

<td id="calculated-emi-cell">
    $100
</td>

Awalnya nilainya masih hardcoded:

$100

Kemudian kita ingin menggantinya dengan hasil sebenarnya.

JavaScript:

let calculatedEmiCell =
    document.getElementById("calculated-emi-cell");

Sekarang:

calculatedEmiCell
        ↓
< td id="calculated-emi-cell">

14. Mengubah isi menggunakan `textContent`

Kita bisa melakukan:

calculatedEmiCell.textContent = "$" + emi;

Misalnya:

emi = 500.25;

hasilnya:

"$" + 500.25

menjadi:

"$500.25"

Kemudian isi <td> berubah.

15. Hal yang sama untuk payable amount

HTML:

<td id="calculated-payable-amount-cell">
    $1000
</td>

JavaScript:

let calculatedPayableAmountCell =
    document.getElementById(
        "calculated-payable-amount-cell"
    );

Kemudian:

calculatedPayableAmountCell.textContent =
    "$" + payableAmount;

Jadi modal sekarang menampilkan data sebenarnya.

16. Kenapa menggunakan `textContent`?

Karena yang ingin dimasukkan adalah teks biasa.

Misalnya:

cell.textContent = "$500.25";

Browser menampilkan:

$500.25

Kalau kita memasukkan:

cell.textContent = "<b>Hello</b>";

browser akan menampilkan teks:

<b>Hello</b>

bukan membuatnya menjadi bold.

Ini berbeda dengan:

cell.innerHTML = "<b>Hello</b>";

yang akan menghasilkan:

Hello

Untuk kasus lecture ini, textContent adalah pilihan yang tepat karena kita hanya ingin memasukkan angka/teks hasil perhitungan.

17. Sekarang masalah berikutnya: tombol OK

Modal sudah bisa muncul.

Tapi kita punya masalah:

Bagaimana cara menutup modal?

Di HTML terdapat:

<button class="close-modal-button">
    OK
</button>

Kita ingin:

User klik OK
      ↓
hapus class hide? ❌
      ↓
tambahkan class hide ✅
      ↓
modal hilang

Jadi kali ini kebalikannya.

18. Akses tombol OK dengan `querySelector()`

Karena tombol memiliki class:

class="close-modal-button"

kita bisa:

let closeModalButton =
    document.querySelector(".close-modal-button");

Ingat:

Kalau menggunakan class pada querySelector(), kita harus menggunakan:

".close-modal-button"

bukan:

"close-modal-button"

Karena:

# = ID
. = class
tag = element

Contoh:

document.querySelector("#myButton");
document.querySelector(".my-button");
document.querySelector("button");

19. Pasang event listener pada tombol OK

Sekarang:

closeModalButton.addEventListener(
    "click",
    function () {
        ...
    }
);

Artinya:

“Kalau tombol OK diklik, jalankan function ini.”

Strukturnya:

addEventListener(
    "click",       ← event
    function () {} ← handler
)

Ini sama dengan konsep event yang sudah kita pelajari sebelumnya.

20. Apa yang dilakukan ketika OK diklik?

Di dalam callback:

function () {
    modalDiv.classList.add("hide");
}

Artinya:

Tambahkan kembali class hide.

Sebelumnya:

modal-overlay

Setelah klik OK:

modal-overlay hide

CSS:

.hide {
    display: none;
}

Akibatnya:

Modal
 ↓
display: none
 ↓
tidak terlihat

21. Jadi kita punya dua operasi yang berlawanan

Ini inti lecture.

Untuk membuka:

modalDiv.classList.remove("hide");

Untuk menutup:

modalDiv.classList.add("hide");

Mental model-nya:

             MODAL
               │
        ┌──────┴──────┐
        ↓             ↓
      BUKA           TUTUP
        ↓             ↓
remove("hide")   add("hide")
        ↓             ↓
     terlihat      tersembunyi

22. Flow lengkap program

Sekarang kita gabungkan semuanya.

                    USER
                      │
                      ↓
             Klik Calculate EMI
                      │
                      ↓
               calculateEmi()
                      │
             ┌────────┴────────┐
             ↓                 ↓
       Hitung EMI        Hitung payable
             │                 │
             └────────┬────────┘
                      ↓
               showModal(emi,
               payableAmount)
                      │
                      ↓
          Ambil modal DOM element
                      │
                      ↓
          classList.remove("hide")
                      │
                      ↓
                MODAL MUNCUL
                      │
                      ↓
       Tampilkan EMI + payable amount
                      │
                      ↓
                User klik OK
                      │
                      ↓
          classList.add("hide")
                      │
                      ↓
                MODAL HILANG

Kalau kamu memahami flow ini, sebenarnya kamu sudah memahami inti lecture.

23. Bagian yang sangat penting: modal berada di luar `main-section-area`

Ini sengaja dilakukan instructor karena ada hubungannya dengan lecture sebelumnya.

Kita sebelumnya punya:

<div class="main-section-area">
    <!-- homepage -->
    <!-- EMI calculator -->
    <!-- apply loan -->
</div>

Dan JavaScript melakukan:

mainSectionArea.innerHTML = "";

Artinya semua isi main-section-area bisa dihapus.

Tetapi modal dibuat di luar:

<div class="main-section-area">
    ...
</div>

<div id="calculate-emi-modal">
    ...
</div>

Jadi ketika:

mainSectionArea.innerHTML = "";

yang dihapus adalah:

homepage
EMI calculator
apply loan

tetapi modal tidak ikut terhapus.

24. Kenapa ini penting?

Ingat masalah lecture sebelumnya.

Kalau kita punya:

let button = document.querySelector(".calculate-emi");

lalu button tersebut dihapus dari DOM dan dibuat ulang, button baru tidak otomatis memiliki event listener lama.

Sekarang modal tidak ikut berada di area yang sering dihancurkan.

Strukturnya:

BODY
│
├── main-section-area
│      │
│      ├── Homepage
│      ├── EMI Calculator
│      └── Apply Loan
│
└── calculate-emi-modal

Ketika:

mainSectionArea.innerHTML = "";

yang terjadi:

BODY
│
├── main-section-area
│      └── kosong
│
└── calculate-emi-modal  ← TETAP ADA

Ini adalah alasan penting kenapa instructor menjelaskan posisi HTML modal.

25. Perhatikan perbedaan dengan lecture sebelumnya

Sebelumnya kita punya:

EMI button
    ↓
berada di main-section-area
    ↓
main-section-area dikosongkan
    ↓
EMI button lama hilang
    ↓
EMI button baru dibuat
    ↓
listener lama hilang

Sekarang:

Modal
    ↓
berada di luar main-section-area
    ↓
main-section-area dikosongkan
    ↓
modal tetap ada
    ↓
DOM object modal tetap sama

Ini sebenarnya masih menggunakan konsep yang sama:

Lifecycle DOM object sangat penting.

Instructor mengatakan:

Pada lecture berikutnya kita akan belajar membuat HTML element secara dinamis menggunakan JavaScript.

Artinya sekarang HTML modal sudah tersedia.

JavaScript hanya mengontrolnya.

HTML
 ↓
Modal sudah ada

JavaScript
 ↓
show/hide modal
 ↓
ubah isi modal

Nanti akan dipelajari pendekatan:

JavaScript
 ↓
createElement()
 ↓
buat HTML element
 ↓
masukkan ke DOM

Jadi ada dua konsep yang berbeda:

Lecture sekarang

HTML sudah ada → JavaScript memanipulasi.

Lecture mendatang

JavaScript → membuat HTML element baru.

27. Gambaran kode secara keseluruhan

Secara konsep, kode akhirnya kurang lebih seperti ini:

function showModal(emi, payableAmount) {

    let modalDiv =
        document.getElementById("calculate-emi-modal");

    let calculatedEmiCell =
        document.getElementById("calculated-emi-cell");

    let calculatedPayableAmountCell =
        document.getElementById(
            "calculated-payable-amount-cell"
        );

    calculatedEmiCell.textContent = "$" + emi;

    calculatedPayableAmountCell.textContent =
        "$" + payableAmount;

    modalDiv.classList.remove("hide");
}

Kemudian tombol OK:

let closeModalButton =
    document.querySelector(".close-modal-button");

closeModalButton.addEventListener(
    "click",
    function () {
        let modalDiv =
            document.getElementById("calculate-emi-modal");

        modalDiv.classList.add("hide");
    }
);

Dan di function perhitungan:

function calculateEmi() {

    // ambil input
    // hitung EMI
    // hitung payable amount

    showModal(emi, payableAmount);
}

28. Ada pola penting di sini: READ → MODIFY → DISPLAY

Coba lihat apa yang dilakukan JavaScript.

1. READ

Ambil element dari DOM:

document.getElementById(...)

2. MODIFY

Ubah class:

classList.remove("hide");

Ubah teks:

textContent = ...

3. DISPLAY

Browser otomatis merender perubahan tersebut.

Jadi:

DOM API
   ↓
ambil element
   ↓
ubah property/class/content
   ↓
browser update UI

Ini adalah salah satu pola dasar ketika bekerja dengan DOM.

29. Hubungan dengan materi `classList`

Kita sudah belajar sebelumnya:

element.classList.add("className");
element.classList.remove("className");

Lecture ini menunjukkan penggunaan nyata.

Misalnya:

modalDiv.classList.remove("hide");

bukan sekadar teori.

JavaScript benar-benar bisa mengubah CSS secara dinamis.

Contohnya:

User klik
   ↓
JavaScript
   ↓
class berubah
   ↓
CSS rule berubah efeknya
   ↓
UI berubah

Jadi JavaScript tidak harus selalu melakukan:

element.style.display = "none";

Kita juga bisa mengontrol UI melalui class.

30. Kenapa menggunakan class lebih bagus daripada langsung `style`?

Misalnya kita bisa saja melakukan:

modalDiv.style.display = "none";

dan:

modalDiv.style.display = "block";

Tetapi pendekatan class:

modalDiv.classList.add("hide");
modalDiv.classList.remove("hide");

sering lebih rapi.

Karena aturan tampilan tetap berada di CSS:

.hide {
    display: none;
}

Sedangkan JavaScript hanya mengatakan:

“Tambahkan class hide.”

Jadi tanggung jawabnya lebih jelas:

HTML       → struktur
CSS        → tampilan
JavaScript → behavior/perilaku

31. Perhatikan penggunaan `textContent`

Kita punya:

calculatedEmiCell.textContent = "$" + emi;

Ini juga mengingatkan kita pada materi DOM sebelumnya.

Ada dua cara populer:

element.textContent = ...

dan:

element.innerHTML = ...

Untuk hasil angka seperti:

$500.25

kita cukup menggunakan:

textContent

Tidak perlu innerHTML.

32. Satu detail kecil: `toFixed(2)`

Pada lecture sebelumnya, kemungkinan perhitungan EMI menggunakan:

emi.toFixed(2)

Misalnya:

500.256789

menjadi:

"500.26"

Perhatikan hasil toFixed() adalah String, bukan Number.

let result = 500.256789.toFixed(2);

console.log(result);
console.log(typeof result);

Hasil:

500.26
string

Untuk ditampilkan di modal, ini justru tidak masalah karena kita memang sedang membuat teks:

"$" + result

menjadi:

$500.26

33. Jangan tertukar `add()` dan `remove()`

Ini gampang membingungkan di awal.

Ingat logika sederhananya:

`add("hide")`

Artinya:

Tambahkan sesuatu yang membuat elemen tersembunyi.

modalDiv.classList.add("hide");

→ tutup modal

`remove("hide")`

Artinya:

Hilangkan sesuatu yang membuat elemen tersembunyi.

modalDiv.classList.remove("hide");

→ buka modal

Mental shortcut:

ADD hide    = sembunyikan
REMOVE hide = tampilkan

34. Hubungkan dengan event listener

Tombol OK:

closeModalButton.addEventListener(
    "click",
    function () {
        ...
    }
);

Di sini kita bisa mengidentifikasi tiga hal:

Bagian	Artinya
`click`	Event
`addEventListener()`	Mekanisme listener
`function () { ... }`	Event handler

Ketika user klik:

Click
 ↓
Event terjadi
 ↓
Listener mendeteksi
 ↓
Callback dijalankan
 ↓
classList.add("hide")
 ↓
Modal hilang

Ini persis konsep event yang sudah kita pelajari sebelumnya.

35. Kenapa callback-nya anonymous function?

Kode:

closeModalButton.addEventListener(
    "click",
    function () {
        modalDiv.classList.add("hide");
    }
);

Function tersebut tidak memiliki nama.

Kenapa?

Karena function tersebut hanya dibutuhkan untuk satu event:

Ketika tombol OK diklik → sembunyikan modal.

Kita juga bisa saja membuat function terpisah:

function closeModal() {
    modalDiv.classList.add("hide");
}

Kemudian:

closeModalButton.addEventListener(
    "click",
    closeModal
);

Secara konsep sama.

36. Jangan melakukan kesalahan ini

Jangan:

closeModalButton.addEventListener(
    "click",
    closeModal()
);

Kalau:

closeModal()

maka function langsung dijalankan saat JavaScript membaca baris tersebut.

Yang benar:

closeModalButton.addEventListener(
    "click",
    closeModal
);

Artinya:

“Tolong jalankan function ini nanti ketika click terjadi.”

Ini sama dengan konsep callback yang sudah kita pelajari.

37. Analogi sederhana: lampu kamar

Bayangkan modal adalah lampu.

Class:

hide

adalah seperti tombol OFF.

Awalnya:

hide = ON
→ lampu mati

Ketika Calculate EMI:

classList.remove("hide");

seperti:

OFF dibuang
→ lampu menyala

Ketika OK:

classList.add("hide");

seperti:

OFF dipasang kembali
→ lampu mati

Jadi JavaScript sebenarnya hanya mengubah status class.

38. Analogi lain: tirai jendela

Bayangkan modal adalah sebuah ruangan kecil di balik tirai.

hide
 ↓
tirai tertutup
 ↓
modal tidak terlihat

Calculate EMI:

remove("hide")

→ tirai dibuka.

Klik OK:

add("hide")

→ tirai ditutup kembali.

HTML modalnya tidak perlu dibuat ulang.

Kita hanya mengatur apakah dia terlihat.

39. Hal paling penting dari lecture ini

Jangan hanya mengingat:

classList.add()
classList.remove()

Yang lebih penting adalah memahami cara JavaScript mengontrol UI.

Pola besarnya:

HTML
 ↓
Element berada di DOM
 ↓
JavaScript mendapatkan element
 ↓
JavaScript mengubah DOM
 ↓
CSS menentukan bagaimana perubahan itu terlihat
 ↓
User melihat UI baru

Contohnya:

<div class="modal-overlay hide">
              ↓
      JavaScript menghapus
          class "hide"
              ↓
<div class="modal-overlay">
              ↓
       CSS display:none
          tidak berlaku
              ↓
         MODAL MUNCUL

40. Cheat sheet lecture

Mendapatkan element

document.getElementById("myId");

atau:

document.querySelector(".my-class");

Menambahkan class

element.classList.add("hide");

Menghapus class

element.classList.remove("hide");

Mengubah teks

element.textContent = "Hello";

Event listener

button.addEventListener("click", function () {
    // lakukan sesuatu
});

modal.classList.remove("hide");

modal.classList.add("hide");

41. Kesimpulan besar

Lecture ini sebenarnya menggabungkan 4 materi yang sudah kita pelajari sebelumnya:

1. Function
       ↓
calculateEmi()
showModal()

2. DOM
       ↓
getElementById()
querySelector()

3. Event
       ↓
addEventListener("click", ...)

4. DOM Manipulation
       ↓
classList
textContent

Semuanya kemudian digabung menjadi satu fitur:

                 CALCULATE EMI
                       │
                       ↓
                calculateEmi()
                       │
                       ↓
                hasil perhitungan
                       │
                       ↓
              showModal(emi, amount)
                       │
              ┌────────┴─────────┐
              ↓                  ↓
       textContent         remove("hide")
              ↓                  ↓
      isi hasil berubah      modal muncul
              │
              ↓
           user klik OK
              │
              ↓
       add("hide")
              │
              ↓
          modal hilang

🧠 Kalimat yang paling penting untuk diingat:

JavaScript dapat mengubah tampilan halaman dengan memanipulasi DOM, misalnya menambah/menghapus class CSS dan mengubah textContent.

Dan untuk lecture ini secara khusus:

classList.remove("hide") digunakan untuk menampilkan modal, sedangkan classList.add("hide") digunakan untuk menyembunyikannya.

Satu hal lagi yang sangat penting dari sisi arsitektur:

Modal diletakkan di luar main-section-area supaya tidak ikut terhapus ketika mainSectionArea.innerHTML = "" dijalankan.

Jadi lecture ini bukan sekadar belajar membuat popup. Sebenarnya kamu sedang belajar pola fundamental “user melakukan sesuatu → event terjadi → JavaScript memanipulasi DOM → CSS membuat perubahan itu terlihat di UI.”

1. Gambaran besar lecture

2. Apa itu Modal?

3. HTML modal sebenarnya sudah dibuat

4. Bagaimana class hide bekerja?

5. Ada perbedaan antara “disembunyikan” dan “dihapus”

Disembunyikan

Dihapus

6. Bagaimana cara menampilkan modal?

7. Menggunakan classList

8. Membuat function showModal()

9. Mengakses modal menggunakan getElementById()

document

.getElementById()

"calculate-emi-modal"

Hasilnya

10. Menampilkan modal dengan classList.remove()

11. Kenapa modal muncul setelah Calculate EMI?

12. Kenapa showModal() menerima parameter?

13. Mengisi hasil EMI ke dalam modal

14. Mengubah isi menggunakan textContent

15. Hal yang sama untuk payable amount

16. Kenapa menggunakan textContent?

17. Sekarang masalah berikutnya: tombol OK

18. Akses tombol OK dengan querySelector()

19. Pasang event listener pada tombol OK

20. Apa yang dilakukan ketika OK diklik?

21. Jadi kita punya dua operasi yang berlawanan

Untuk membuka:

Untuk menutup:

22. Flow lengkap program

23. Bagian yang sangat penting: modal berada di luar main-section-area

24. Kenapa ini penting?

25. Perhatikan perbedaan dengan lecture sebelumnya

26. Mengapa tidak membuat modal dengan JavaScript?

Lecture sekarang

Lecture mendatang

27. Gambaran kode secara keseluruhan

28. Ada pola penting di sini: READ → MODIFY → DISPLAY

1. READ

2. MODIFY

3. DISPLAY

29. Hubungan dengan materi classList

30. Kenapa menggunakan class lebih bagus daripada langsung style?

31. Perhatikan penggunaan textContent

32. Satu detail kecil: toFixed(2)

33. Jangan tertukar add() dan remove()

add("hide")

remove("hide")

34. Hubungkan dengan event listener

35. Kenapa callback-nya anonymous function?

36. Jangan melakukan kesalahan ini

37. Analogi sederhana: lampu kamar

38. Analogi lain: tirai jendela

39. Hal paling penting dari lecture ini

40. Cheat sheet lecture

Mendapatkan element

Menambahkan class

Menghapus class

Mengubah teks

Event listener

Menampilkan modal

Menyembunyikan modal

41. Kesimpulan besar

🧠 Kalimat yang paling penting untuk diingat:

4. Bagaimana class `hide` bekerja?

7. Menggunakan `classList`

8. Membuat function `showModal()`

9. Mengakses modal menggunakan `getElementById()`

`document`

`.getElementById()`

`"calculate-emi-modal"`

10. Menampilkan modal dengan `classList.remove()`

12. Kenapa `showModal()` menerima parameter?

14. Mengubah isi menggunakan `textContent`

16. Kenapa menggunakan `textContent`?

18. Akses tombol OK dengan `querySelector()`

23. Bagian yang sangat penting: modal berada di luar `main-section-area`

29. Hubungan dengan materi `classList`

30. Kenapa menggunakan class lebih bagus daripada langsung `style`?

31. Perhatikan penggunaan `textContent`

32. Satu detail kecil: `toFixed(2)`

33. Jangan tertukar `add()` dan `remove()`

`add("hide")`

`remove("hide")`