CARA MEMBUAT KOTAK KOMENTAR DENGAN JAVASCRIPT

Membuat kotak komentar dengan JavaScript, HTML, dan CSS bukanlah tugas yang sulit. Artikel ini akan membantu kamu memahami cara membuat kotak komentar dengan JavaScript. Sebelum memulai, pastikan kamu sudah memiliki pengetahuan dasar tentang HTML dan CSS.

Struktur HTML

Kotak komentar biasanya terdiri dari beberapa bagian. Bagian utamanya adalah area di mana pengguna dapat mengetikkan komentar mereka dan tombol untuk mengirimkan komentar tersebut.

Berikut ini adalah struktur HTML dasar yang kita butuhkan:

<div id="kotakKomentar">
    <textarea id="inputKomentar"></textarea>
    <button id="tombolKirim">Kirim Komentar</button>
    <div id="daftarKomentar"></div>
</div>

Memformat Tampilan Dengan CSS

Sekarang, kita akan menggunakan CSS untuk membuat kotak komentar dan tombolnya terlihat lebih menarik. Tambahkan kode CSS ke dalam file CSS kamu:

#kotakKomentar {
    width: 300px;
    height: auto;
    padding: 10px;
    border: 1px solid #ddd;
    margin: 0 auto;
}

#inputKomentar {
    width: 100%;
    height: 60px;
    padding: 5px;
    margin-bottom: 10px;
}

#tombolKirim {
    border: none;
    padding: 5px 10px;
    background-color: #007BFF;
    color: white;
    cursor: pointer;
}

#tombolKirim:hover {
    background-color: #0056b3;
}

Menggunakan JavaScript Untuk Mengatur Komentar

Langkah terakhir ini adalah bagian yang paling penting. Pada kode JavaScript, kita akan membuat fungsi untuk menambahkan komentar baru ke dalam daftar komentar setiap kali pengguna mengklik tombol kirim.

Berikut kode JavaScript yang kita perlukan:

var tombolKirim = document.getElementById('tombolKirim');
var inputKomentar = document.getElementById('inputKomentar');
var daftarKomentar = document.getElementById('daftarKomentar');

tombolKirim.onclick = function() {
    var paragraf = document.createElement('p');
    var komentar = document.createTextNode(inputKomentar.value);
    
    paragraf.appendChild(komentar);
    daftarKomentar.appendChild(paragraf);
    
    inputKomentar.value = '';
}

Dengan kode di atas, setiap kali pengguna menekan tombol kirim, teks yang mereka masukkan ke dalam kotak input akan ditambahkan ke dalam daftar komentar dan kotak input akan dikosongkan.

Sekarang kamu sudah berhasil membuat kotak komentar sederhana dengan JavaScript! Tentu saja, ini hanya bagian dasar. Ada banyak improvement yang bisa kamu tambahkan sesuai kebutuhan projek mu. Misalnya, melakukan validasi pada input untuk mencegah komentar tanpa isi, atau merancang cara untuk menyimpan komentar ke server. Selamat mencoba!