OneCompiler

Color name / code

208


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Color Boxes</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; margin: 0; flex-direction: column; } 
    .color-grid {
        display: grid;
        grid-template-columns: repeat(5, 50px);
        grid-gap: 10px;
    }

    .color-box {
        width: 50px;
        height: 50px;
        border-radius: 8px;
        cursor: pointer;
    }

    .color-box:hover {
        opacity: 0.8;
    }

    .color-output {
        margin-top: 20px;
        font-size: 20px;
    }

    #changeColorButton {
        background-color: #007BFF;
        border: none;
        color: white;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin-top: 20px;
        cursor: pointer;
        border-radius: 8px;
        transition: background-color 0.3s ease;
    }

    #colorInput {
        width: 300px; /* Increased width */
        padding: 8px;
        margin-top: 20px;
        border-radius: 8px;
        border: 1px solid #ccc;
        box-sizing: border-box;
    }

    #submitButton {
        background-color: #4CAF50;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        margin-top: 10px;
        transition: background-color 0.3s ease;
    }

    #submitButton:hover {
        background-color: #45a049;
    }
</style>
</head> <body> <div class="color-grid" id="colorGrid"> <!-- Color boxes will be inserted here by JavaScript --> </div> <div class="color-output" id="colorOutput">Tap on a box to see the color</div>

<button id="changeColorButton">Change All Colors</button>

<input type="text" id="colorInput" placeholder="Enter color code (e.g., #ff5733 or rgb(255,87,51))" /> <button id="submitButton">Submit</button> <script> const colorGrid = document.getElementById('colorGrid'); const colorOutput = document.getElementById('colorOutput'); const changeColorButton = document.getElementById('changeColorButton'); const colorInput = document.getElementById('colorInput'); const submitButton = document.getElementById('submitButton'); function createColorBoxes() { colorGrid.innerHTML = ''; // Clear any existing boxes for (let i = 0; i < 20; i++) { const colorBox = document.createElement('div'); colorBox.classList.add('color-box'); const randomColor = getRandomColor(); colorBox.style.backgroundColor = randomColor.rgb; colorBox.setAttribute('data-color-rgb', randomColor.rgb); colorBox.addEventListener('click', () => { const rgb = colorBox.getAttribute('data-color-rgb'); colorOutput.textContent = `Color: ${rgb}`; colorInput.value = rgb; // Set the color code to the input box }); colorGrid.appendChild(colorBox); } } function getRandomColor() { const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const b = Math.floor(Math.random() * 256); return { rgb: `rgb(${r}, ${g}, ${b})` }; } changeColorButton.addEventListener('click', createColorBoxes); function handleColorInput() { const colorCode = colorInput.value.trim(); if (/^#[0-9A-F]{6}$/i.test(colorCode)) { document.body.style.backgroundColor = colorCode; colorOutput.textContent = `Background Color: ${colorCode}`; } else if (/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/i.test(colorCode)) { const rgbValues = colorCode.match(/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/i); const r = parseInt(rgbValues[1]); const g = parseInt(rgbValues[2]); const b = parseInt(rgbValues[3]); if (r <= 255 && g <= 255 && b <= 255) { document.body.style.backgroundColor = colorCode; colorOutput.textContent = `Background Color: ${colorCode}`; } else { alert('Please enter a valid RGB color code'); } } else { alert('Please enter a valid color code in the format #RRGGBB or rgb(R,G,B)'); } } submitButton.addEventListener('click', handleColorInput); // Initial call to create color boxes createColorBoxes(); </script> </body> </html>