Tryit Editor v1.0 - Skillance Academy

Editor Kode Sumber Tekan Ctrl + Enter untuk Menjalankan
<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        body { font-family: sans-serif; padding: 20px; background: #f8fafc; }
        .form-card { background: white; padding: 20px; border-radius: 8px; border: 1px solid #e2e8f0; max-width: 400px; }
        input { width: 100%; padding: 8px 12px; margin: 8px 0 15px; border: 1px solid #cbd5e1; border-radius: 6px; box-sizing: border-box; }
        button { width: 100%; background: #00758f; color: white; border: none; padding: 10px; border-radius: 6px; font-weight: bold; cursor: pointer; }
        .notif { margin-top: 15px; padding: 12px; border-radius: 6px; display: none; font-size: 14px; }
    </style>
</head>
<body>
    <div class="form-card">
        <h3 style="margin-top:0; color:#0d2e5c;">Kirim Pesan Cepat</h3>
        <label>Nama Lengkap:</label>
        <input type="text" id="txtNama" placeholder="Masukkan nama Anda...">
        <label>Pesan Masukan:</label>
        <input type="text" id="txtPesan" placeholder="Tuliskan pesan...">
        <button id="btnSubmit">Kirim via $.post()</button>
        <div id="hasilNotif" class="notif"></div>
    </div>

    <script>
        $(document).ready(function() {
            $('#btnSubmit').click(function() {
                const nama = $('#txtNama').val();
                const pesan = $('#txtPesan').val();

                if(!nama || !pesan) {
                    alert('Harap isi semua kolom formulir!');
                    return;
                }

                $('#hasilNotif').hide().text('Mengirim ke server...').css({'background':'#e2e8f0', 'color':'#334155'}).fadeIn();

                // Simulasi pemanggilan $.post("simpan_pesan.php", { nama: nama, pesan: pesan }, callback)
                setTimeout(function() {
                    $('#hasilNotif').css({'background':'#dcfce7', 'color':'#15803d'})
                        .html('<strong>✅ Pesan Terkirim!</strong><br>Terima kasih ' + nama + ', server merespons 200 OK.');
                    $('#txtNama, #txtPesan').val('');
                }, 500);
            });
        });
    </script>
</body>
</html>
Hasil Tampilan (Browser Preview)