produk - konter24

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Produk Digital</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .kategori {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .produk {
            margin: 10px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 10px;
            width: 200px;
        }
        .produk h2 {
            margin-top: 0;
        }
        .varian {
            margin-bottom: 10px;
        }
        .form {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Produk Digital</h1>
    <div class="kategori">
        <div class="produk">
            <h2>Produk Pulsa</h2>
            <ul>
                <li>Telkomsel</li>
                <li>Indosat</li>
                <li>XL</li>
                <li>Axis</li>
                <li>Smartfren</li>
                <li>Tri</li>
                <li>By.U</li>
            </ul>
            <div class="varian">
                <select>
                    <option>Pilih Varian</option>
                    <option>10 RB</option>
                    <option>20 RB</option>
                    <option>50 RB</option>
                </select>
            </div>
        </div>
        <div class="produk">
            <h2>Produk Data</h2>
            <ul>
                <li>Telkomsel</li>
                <li>Indosat</li>
                <li>XL</li>
                <li>Axis</li>
                <li>Smartfren</li>
                <li>Tri</li>
                <li>By.U</li>
            </ul>
            <div class="varian">
                <select>
                    <option>Pilih Varian</option>
                    <option>1 GB</option>
                    <option>5 GB</option>
                    <option>10 GB</option>
                </select>
            </div>
        </div>
        <div class="produk">
            <h2>Token Listrik</h2>
            <ul>
                <li>Prabayar</li>
                <li>Pascabayar</li>
            </ul>
            <div class="varian">
                <select>
                    <option>Pilih Varian</option>
                    <option>20 Token</option>
                    <option>50 Token</option>
                    <option>100 Token</option>
                </select>
            </div>
        </div>
        <div class="produk">
            <h2>Games</h2>
            <ul>
                <li>Mobile Legend</li>
                <li>Free Fire</li>
                <li>Ludo</li>
                <li>Joy Domino</li>
            </ul>
            <div class="varian">
                <select>
                    <option>Pilih Varian</option>
                    <option>10 Diamond</option>
                    <option>20 Diamond</option>
                    <option>50 Diamond</option>
                </select>
            </div>
        </div>
        <div class="produk">
            <h2>Masa Aktif</h2>
            <ul>
                <li>Telkomsel</li>
                <li>Indosat</li>
                <li>XL</li>
                <li>Axis</li>
                <li>Smartfren</li>
                <li>Tri</li>
                <li>By.U</li>
            </ul>
            <div class="varian">
                <select>
                    <option>Pilih Varian</option>
                    <option>7 Hari</option>
                    <option>14 Hari</option>
                    <option>30 Hari</option>
                </select>
            </div>
        </div>
    </div>
    <div class="form">
        <form>
            <label>Nomor Tujuan:</label>
            <input type="number" required>
            <label>Pembayaran:</label>
            <input type="number" required>
            <button type="submit">Bayar</button>
        </form>
    </div>
    <script>
        const form = document.querySelector('form');
        form.addEventListener('submit', (e) => {
            e.preventDefault();
            const produk = document.querySelector('select').value;

Untitled

Question

Submit

Untitled

Not Started

In Progress

Done

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Produk Digital</title> <style> body { font-family: Arial, sans-serif; } .kategori { display: flex; flex-wrap: wrap; justify-content: center; } .produk { margin: 10px; padding: 10px; border: 1px solid #ddd; border-radius: 10px; width: 200px; } .produk h2 { margin-top: 0; } .varian { margin-bottom: 10px; } .form { margin-top: 20px; } </style></head><body> <h1>Produk Digital</h1> <div class="kategori"> <div class="produk"> <h2>Produk Pulsa</h2> <ul> <li>Telkomsel</li> <li>Indosat</li> <li>XL</li> <li>Axis</li> <li>Smartfren</li> <li>Tri</li> <li>By.U</li> </ul> <div class="varian"> <select> <option>Pilih Varian</option> <option>10 RB</option> <option>20 RB</option> <option>50 RB</option> </select> </div> </div> <div class="produk"> <h2>Produk Data</h2> <ul> <li>Telkomsel</li> <li>Indosat</li> <li>XL</li> <li>Axis</li> <li>Smartfren</li> <li>Tri</li> <li>By.U</li> </ul> <div class="varian"> <select> <option>Pilih Varian</option> <option>1 GB</option> <option>5 GB</option> <option>10 GB</option> </select> </div> </div> <div class="produk"> <h2>Token Listrik</h2> <ul> <li>Prabayar</li> <li>Pascabayar</li> </ul> <div class="varian"> <select> <option>Pilih Varian</option> <option>20 Token</option> <option>50 Token</option> <option>100 Token</option> </select> </div> </div> <div class="produk"> <h2>Games</h2> <ul> <li>Mobile Legend</li> <li>Free Fire</li> <li>Ludo</li> <li>Joy Domino</li> </ul> <div class="varian"> <select> <option>Pilih Varian</option> <option>10 Diamond</option> <option>20 Diamond</option> <option>50 Diamond</option> </select> </div> </div> <div class="produk"> <h2>Masa Aktif</h2> <ul> <li>Telkomsel</li> <li>Indosat</li> <li>XL</li> <li>Axis</li> <li>Smartfren</li> <li>Tri</li> <li>By.U</li> </ul> <div class="varian"> <select> <option>Pilih Varian</option> <option>7 Hari</option> <option>14 Hari</option> <option>30 Hari</option> </select> </div> </div> </div> <div class="form"> <form> <label>Nomor Tujuan:</label> <input type="number" required> <label>Pembayaran:</label> <input type="number" required> <button type="submit">Bayar</button> </form> </div> <script> const form = document.querySelector('form'); form.addEventListener('submit', (e) => { e.preventDefault(); const produk = document.querySelector('select').value;