Project Custom CAPTCHA Generator in HTML CSS & JavaScript

CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) adalah sistem keamanan penting untuk mencegah spam dan bot. Dalam tutorial ini, kita akan membangun CAPTCHA Generator kustom dengan fitur:
✅ Generate kode acak
✅ Tombol refresh CAPTCHA
✅ Validasi input user
✅ Desain responsif

Kenapa Membuat CAPTCHA Custom?

Kontrol Desain: Sesuaikan tampilan dengan tema website
Ringan: Tidak perlu library eksternal
Pembelajaran: Memahami logika keamanan dasar
Kustomisasi: Bisa dikembangkan dengan fitur tambahan

Persiapan

Sebelum mulai, pastikan Anda memiliki:

Text Editor (VS Code, Sublime Text, dll)
Browser modern (Chrome, Firefox)
Basic pengetahuan HTML, CSS, & JavaScript

Struktur Project

Buat folder dengan 3 file utama:

captcha-generator/  
├── index.html 
├── style.css 
└── script.js

Langkah 1: Membuat Struktur HTML

Salin kode berikut ke index.html:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom CAPTCHA Generator - Azroi</title>
    <link rel="stylesheet" href="style.css">
    <!-- Ikon dari FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
</head>
<body>
    <div class="container">
        <header>CAPTCHA Generator</header>
        
        <!-- Box CAPTCHA -->
        <div class="input_field captch_box">
            <input type="text" id="captchaText" disabled>
            <button class="refresh_button">
                <i class="fa-solid fa-rotate-right"></i>
            </button>
        </div>
        
        <!-- Input User -->
        <div class="input_field captch_input">
            <input type="text" id="userInput" placeholder="Masukkan CAPTCHA">
        </div>
        
        <!-- Pesan Validasi -->
        <div class="message"></div>
        
        <!-- Tombol Submit -->
        <div class="input_field button">
            <button id="submitBtn">Verifikasi</button>
        </div>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

Run HTML

Penjelasan Komponen:

captch_box: Menampilkan kode CAPTCHA yang di-generate
refresh_button: Untuk generate CAPTCHA baru
captch_input: Tempat user menginput jawaban
message: Menampilkan hasil validasi

Langkah 2: Styling dengan CSS

Tambahkan styling di style.css:

/* Reset default styling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(#f1fff4, #cbfff4);
}

.container {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    width: 90%;
    max-width: 450px;
}

header {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}

.input_field {
    margin: 15px 0;
    position: relative;
}

.captch_box input {
    width: 100%;
    height: 45px;
    padding: 0 15px;
    font-size: 22px;
    letter-spacing: 3px;
    color: #666;
    border: 1px solid #ddd;
    border-radius: 8px;
    pointer-events: none;
}

.refresh_button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: #826afb;
    color: white;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.refresh_button:active {
    transform: translateY(-50%) scale(0.95);
}

.captch_input input {
    width: 100%;
    height: 45px;
    padding: 0 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.message {
    text-align: center;
    margin: 15px 0;
    font-size: 14px;
    display: none;
}

.message.active {
    display: block;
}

.button button {
    width: 100%;
    height: 45px;
    background: #826afb;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
}

.button.disabled button {
    opacity: 0.6;
    cursor: not-allowed;
}

Fitur CSS Penting:

Desain responsif dengan max-width
Efek hover dan active untuk interaktivitas
Posisi absolut untuk tombol refresh
Animasi transisi halus

Langkah 3: Implementasi JavaScript

Tambahkan logika CAPTCHA di script.js:

// DOM Elements
const captchaText = document.getElementById('captchaText');
const refreshBtn = document.querySelector('.refresh_button');
const userInput = document.getElementById('userInput');
const message = document.querySelector('.message');
const submitBtn = document.getElementById('submitBtn');

let currentCaptcha = '';

// Generate CAPTCHA acak
function generateCaptcha() {
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let captcha = '';
    
    // Generate 6 karakter acak
    for(let i = 0; i < 6; i++) {
        captcha += chars[Math.floor(Math.random() * chars.length)];
    }
    
    currentCaptcha = captcha;
    captchaText.value = captcha.split('').join(' '); // Tambah spasi antar karakter
}

// Validasi input
function validateCaptcha() {
    const userAnswer = userInput.value.replace(/ /g, ''); // Hapus spasi
    message.classList.add('active');
    
    if(userAnswer === currentCaptcha) {
        message.textContent = 'CAPTCHA benar!';
        message.style.color = '#28a745';
    } else {
        message.textContent = 'CAPTCHA salah, coba lagi!';
        message.style.color = '#dc3545';
        generateCaptcha();
        userInput.value = '';
    }
}

// Event Listeners
refreshBtn.addEventListener('click', () => {
    generateCaptcha();
    userInput.value = '';
    message.classList.remove('active');
});

submitBtn.addEventListener('click', (e) => {
    e.preventDefault();
    validateCaptcha();
});

// Inisialisasi pertama
generateCaptcha();

Penjelasan Fungsi:

generateCaptcha():
- Membuat string 6 karakter acak (huruf besar/kecil + angka)
- Menambahkan spasi antar karakter untuk meningkatkan kesulitan
validateCaptcha():
- Membandingkan input user dengan CAPTCHA asli
- Menampilkan feedback warna (hijau/merah)

Saran Pengembangan

Tingkatkan Kompleksitas:

// Tambahkan simbol
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()';

Tambahkan Batas Percobaan:

let attemptCount = 0;
const maxAttempts = 3;

function validateCaptcha() {
    if(attemptCount >= maxAttempts) {
        alert('Terlalu banyak percobaan!');
        return;
    }
    attemptCount++;
}

Timer Auto-Refresh:

setInterval(generateCaptcha, 30000); // Refresh setiap 30 detik

Kesimpulan

Dalam tutorial ini, Anda telah belajar:
Membuat generator CAPTCHA dari nol
Mengimplementasikan logika validasi
Mendesain UI yang user-friendly
Menambahkan fitur refresh CAPTCHA

Manfaat CAPTHA Custom:

Mengurangi spam form
Meningkatkan keamanan website
Bisa dikustomisasi sesuai kebutuhan

Custom CAPTCHA Generator dengan HTML, CSS, & JavaScript