jQuery Editor

<!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; }
        .playground { background: white; padding: 20px; border-radius: 8px; border: 1px solid #cbd5e1; max-width: 480px; }
        input, select { padding: 8px; margin: 6px 0; border: 1px solid #cbd5e1; border-radius: 6px; }
        #canvasHasil { margin-top: 15px; padding: 25px; border-radius: 8px; background: #0d2e5c; color: white; text-align: center; }
    </style>
</head>
<body>
    <div class="playground">
        <h3>Ubah Properti Elemen Real-Time</h3>
        <label>Teks Judul:</label><br>
        <input type="text" id="inTeks" value="Skillance Academy Keren!" style="width:100%; box-sizing:border-box;"><br>
        <label>Warna Latar:</label>
        <select id="selWarna">
            <option value="#0d2e5c">Biru Navy</option>
            <option value="#00758f">Cyan Emerald</option>
            <option value="#fca311">Kuning Oranye</option>
            <option value="#ef4444">Merah Cerah</option>
        </select>

        <div id="canvasHasil">
            <h4 id="teksHasil" style="margin:0;">Skillance Academy Keren!</h4>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $('#inTeks').on('input', function() {
                $('#teksHasil').text($(this).val());
            });
            $('#selWarna').change(function() {
                $('#canvasHasil').css('background-color', $(this).val());
            });
        });
    </script>
</body>
</html>