Alert Html Css Js

MUAZHAN

4 min read

·

Jun 28, 2024

17

Share

Membuat Alert Sederhana dengan HTML, CSS, dan JavaScript

Alert adalah elemen penting dalam desain web untuk memberikan informasi atau peringatan kepada pengguna. Dengan HTML, CSS, dan JavaScript, kita dapat membuat alert yang sederhana dan menarik.

1. Struktur HTML

Pertama, kita buat struktur dasar alert dengan HTML. Kita akan menggunakan div sebagai wadah utama dan menambahkan elemen-elemen lainnya di dalamnya:

    
    
    
    


    

        ×
        

            
Ini adalah pesan alert!
        
    
    

2. Styling dengan CSS

Selanjutnya, kita tambahkan gaya dengan CSS untuk membuat alert terlihat menarik. Berikut adalah contoh sederhana:

.alert {
    background-color: #f44336;
    color: white;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 4px;
    position: relative;
}

.close-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
}

.message {
    margin-left: 30px;
}

3. Menambahkan Fungsionalitas dengan JavaScript

Terakhir, kita tambahkan JavaScript untuk membuat alert muncul dan menghilang. Berikut contohnya:

const alert = document.querySelector('.alert');
const closeBtn = document.querySelector('.close-btn');

closeBtn.addEventListener('click', () => {
    alert.style.display = 'none';
});

Kode JavaScript di atas mencari elemen alert dan closeBtn di halaman. Kemudian, ketika tombol close diklik, alert akan disembunyikan.

Contoh Lengkap

Berikut adalah contoh lengkap kode HTML, CSS, dan JavaScript untuk membuat alert sederhana:

index.html:

    
    
    
    


    

        ×
        

            
Ini adalah pesan alert!
        
    
    

style.css:

.alert {
    background-color: #f44336;
    color: white;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 4px;
    position: relative;
}

.close-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
}

.message {
    margin-left: 30px;
}

script.js:

const alert = document.querySelector('.alert');
const closeBtn = document.querySelector('.close-btn');

closeBtn.addEventListener('click', () => {
    alert.style.display = 'none';
});

Anda dapat memodifikasi kode HTML, CSS, dan JavaScript di atas untuk membuat alert sesuai dengan kebutuhan Anda.

Kesimpulan

Membuat alert sederhana dengan HTML, CSS, dan JavaScript adalah proses yang mudah dan dapat dilakukan dengan beberapa baris kode. Anda dapat menyesuaikan tampilan dan fungsionalitas alert sesuai dengan desain web Anda.