Skip to content

Instantly share code, notes, and snippets.

@razvanstatescu

razvanstatescu/color_checker.html

Created August 22, 2020 06:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save razvanstatescu/5da6491cce3a451a5d0a8fab2800c1ad to your computer and use it in GitHub Desktop.
Save razvanstatescu/5da6491cce3a451a5d0a8fab2800c1ad to your computer and use it in GitHub Desktop.
Download ZIP
Quick color checker. Validate and display a HEX color.
Raw
color_checker.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color checker</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#color {
height: 1.5rem;
width: 15rem;
border-radius: 1rem;
border: 3px solid rgb(226, 226, 226);
padding: .2rem 1rem;
font-size: .75rem;
outline: none;
}
</style>
</head>
<body>
<div class="container">
<div>
<input type="text" placeholder="#ffffff" id="color">
</div>
</div>
<script>
const colorInputEl = document.getElementById('color')
colorInputEl.addEventListener('input', event => {
const color = event.target.value
const hexColorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/
if( color.match(hexColorRegex) ) {
colorInputEl.style.borderColor = color
} else {
colorInputEl.style.borderColor = 'rgb(226, 226, 226)'
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment