Membuat Aplikasi Kode Warna dengan JavaScript

Membuat Aplikasi Kode Warna dengan JavaScript

—

by

Webbiz.ID
in

Berikut adalah contoh kode untuk membuat aplikasi kode warna lengkap dengan JavaScript yang menampilkan nama dan kode warna yang lengkap beserta CSS dan penerapannya ke dalam form HTML.

Aplikasi Kode Warna Lengkap

Aplikasi Kode Warna Lengkap

HTML
<!DOCTYPE html>
<html>
<head>
    <title>Aplikasi Kode Warna Lengkap</title>
    <style>
        .color-box {
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 10px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <h1>Aplikasi Kode Warna Lengkap</h1>
    
    <form>
        <label for="color">Pilih Warna:</label>
        <input type="color" id="color" name="color">
        <button type="button" onclick="addColor()">Tambahkan</button>
    </form>
    
    <div id="colorList"></div>
    
    <script>
        function addColor() {
            var colorInput = document.getElementById("color");
            var color = colorInput.value;
            
            var colorBox = document.createElement("div");
            colorBox.className = "color-box";
            colorBox.style.backgroundColor = color;
            
            var colorName = document.createElement("span");
            colorName.textContent = color;
            
            var colorList = document.getElementById("colorList");
            colorList.appendChild(colorBox);
            colorList.appendChild(colorName);
        }
    </script>
</body>
</html>
HTML

Silakan gunakan kode di atas untuk membuat aplikasi kode warna lengkap yang Anda inginkan. Jika Anda memiliki pertanyaan lebih lanjut, jangan ragu untuk bertanya.

Artikel Terbaru ⭐