Simple Background Color Changer


by Jeremy Caudle
links code

After trying to figure out if it was possible to extract and display an image's metadata in the browser with only JavaScript, I discovered it wasn't as easy as I hoped. So I built this instead. It's nothing special, just extra practice extracted values from inputs and concatenating them into something usable. I didn't do any checks on the values entered, but it won't work properly unless hex color values are used.

Current color: #999999

Alter the image's background color

All values must be hexadecimal numbers.

View the code:

HTML and JS 
<div class="code-block">
            
            <div id="main-img">
                <p>Current color: <span id="color-label">#999999</span></p>
            </div>
            <h4>Alter the image's background color</h4>
            <p>All values must be <a href="https://en.wikipedia.org/wiki/Hexadecimal">hexadecimal</a> numbers.</p>
            <ul>
                <li><label for="red-color-input">Red:</label> <input id="red-color-input" type="text" maxlength="2"></li>
                <li><label for="green-color-input">Green:</label> <input id="green-color-input" type="text" maxlength="2"></li>
                <li><label for="blue-color-input">Blue:</label> <input id="blue-color-input" type="text" maxlength="2"></li>
                <li><label for="opacity-input">Opacity:</label> <input id="opacity-input" type="text" maxlength="2"></li>
            </ul>
            <button id="update-color-button">Update Color</button>
        
        </div>
				
				<script>

            /* Variables */

            const redColor = document.getElementById('red-color-input');
            const blueColor = document.getElementById('blue-color-input');
            const greenColor = document.getElementById('green-color-input');
            const opacityColor = document.getElementById('opacity-input');
            const targetIMG = document.getElementById('main-img');
            const updateButton = document.getElementById('update-color-button');
            let colorLabel = document.getElementById('color-label');


            /* Function */

            function updateColor() {
                let colorValue = `#${redColor.value}${blueColor.value}${greenColor.value}${opacityColor.value}`;
                colorLabel.innerText = colorValue;
                targetIMG.style.backgroundColor = colorValue;
            }

            /* Events */

            updateButton.addEventListener('click', updateColor);    


        </script>
CSS 
.code-block {
                display: block;
                padding: 1rem;
                margin: 3rem auto;
                text-align: center;
                background-color: rgb(90, 90, 90);
                border-radius: 1rem;
                font-family: Helvetica, Arial, sans-serif;
                color: white;
                width: clamp(16em, 90vw, 60em);
            }

            .code-block button {
                display: block;
                margin: 1rem auto;
                height: 44px;
                border-radius: .5rem;
                border: solid 1px #eee;
                background: white;
                padding: 0 1rem;
                text-transform: uppercase;
            }

            .code-block ul {
                padding: 0;
                list-style: none;
                text-align: left;
            }

            .code-block ul li {
                padding: .5em 0;
            }
            
            .code-block ul li input{
                width: 5ch;
            }

            #main-img {
                background-image: url('https://www.jeremycaudle.com/floorshotJC.jpeg');
                background-clip: border-box;
                background-size: contain;
                height: 300px;
                width: 300px;
                background-blend-mode: lighten;
                background-color: #999999;
                display: block;
								margin: 0 auto;
            }

            @supports (display: flex) {

                #main-img {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-content: center;
                }

                .code-block ul {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-evenly;
                }

                .code-block ul li {
                    display: flex;
                    flex-grow: 1;
                    flex-direction: column;
                    justify-items: center;
                    align-items: center;
                    text-align: center;
                }

                .code-block ul li label {
                    margin-bottom: .5em;
                }

            }

Tags