In this challenge you'll write a validator for a hexadecimal string used to set a CSS color. Hexadecimal values for css

Question

In this challenge you'll write a validator for a hexadecimal string used to set a CSS color. Hexadecimal values for css colors start with a pound sign, or hash (#), then six characters that can either be a numeral or a letter between A and F, inclusive. Two examples of these strings would be #FF4569 and #578E9A. For this step of the challenge, write a regular expression that will match any hexadecimal string and store it in a variable named hexRegEx. The regex should be case-insensitive. Assume that the string will always be 7 characters.

app.js

// Type inside this function 
function isValidHex(text) { const hexRegEx = /^#[\da-f]{7}/i; }

const hex = document.getElementById("hex"); const body = document.getElementsByTagName("body")[0];

hex.addEventListener("input", e => { const text = e.target.value; const valid = isValidHex(text); if (valid) { body.style.backgroundColor = "rgb(176, 208, 168)"; } else { body.style.backgroundColor = "rgb(189, 86, 86)"; } });

const hex = document.getElementById("hex");
const body = document.getElementsByTagName("body")[0];

hex.addEventListener("input", e => {
  const text = e.target.value;
  const valid = isValidHex(text);
  if (valid) {
    body.style.backgroundColor = "rgb(176, 208, 168)";
  } else {
    body.style.backgroundColor = "rgb(189, 86, 86)";
  }
});

index.html

<!DOCTYPE html>
<html>

<head>
    <title>DOM Manipulation</title>
</head>
<link rel="stylesheet" href="style.css" />

<body>
    <div id="content">
        <p>Enter a valid hex value below to make the screen turn green.</p>
        <input type="text" id="hex">
    </div>
    <script src="app.js"></script>
</body>

</html>

Answer 1 · 2021-12-28T20:13:23Z

December 28, 2021 8:13pm

You're close, but there's two issues:

the total string length is 7 characters, but there are only 6 hex digits
you anchored your string on the left (with ^), but you also need to anchor it on the right

Welcome to the Treehouse Community

Looking to learn something new?

Arya G

Arya G

In this challenge you'll write a validator for a hexadecimal string used to set a CSS color. Hexadecimal values for css

1 Answer

Steven Parker

Steven Parker