jQuery HOME

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        body { font-family: sans-serif; text-align: center; padding: 30px; background: #f8fafc; }
        .kotak { background: #0d2e5c; color: white; padding: 25px; border-radius: 12px; max-width: 380px; margin: auto; }
        button { background: #fca311; color: #0d2e5c; border: none; padding: 10px 20px; font-weight: bold; border-radius: 6px; cursor: pointer; margin-top: 15px; }
    </style>
</head>
<body>
    <div class="kotak">
        <h3 id="pesan">Halo dari jQuery Skillance! ⚡</h3>
        <p>Klik tombol di bawah untuk mengubah tampilan teks secara instan!</p>
        <button id="btnAksi">Ubah Teks & Warna</button>
    </div>

    <script>
        $(document).ready(function() {
            $('#btnAksi').click(function() {
                $('#pesan').text("Berhasil dimanipulasi dengan jQuery! 🚀").css('color', '#4ade80');
            });
        });
    </script>
</body>
</html>