Display Color From User Hex Input

scrimba

Watch in fullscreen

by James Q Quick

Build a Color Tool in Vanilla JavaScript

About

Comments

Notes

Convert Hex Color to RGB6:46

Display Color From User Hex Input

by James Q Quick

Build a Color Tool in Vanilla JavaScript

Expand for more info

Convert Hex Color to RGB6:46

index.js

run

preview

console

//CHALLENGE
//Get a reference to hexInput and inputColor DOM elements
//Create a keyup event handler for hexInput
//Check if hex color is valid
//If hex color is valid, update the background color of inputColor

const isValidHex = (hex) => {
    if(!hex) return false;
    
    const strippedHex = hex.replace('#', '');
    return strippedHex.length === 3 || strippedHex.length === 6;
}

//CHALLENGE

//Get a reference to hexInput and inputColor DOM elements

//Create a keyup event handler for hexInput

//Check if hex color is valid

//If hex color is valid, update the background color of inputColor

const isValidHex = (hex) => {

if(!hex) return false;

const strippedHex = hex.replace('#', '');

return strippedHex.length === 3 || strippedHex.length === 6;

}

›

true

›

false

›

true

›

true

›

true

›

false

-4:18