What am I doing wrong here? /[#][a-f]{6}/i

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 = /[#][a-f]{6}/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)";
  }
});

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 · 2020-01-18T23:13:24Z

January 18, 2020 11:13pm

You're close, here's a few hints:

you'll need to anchor the regex at the start (^) and the end ($)
the character class for a hex digit must include numeric digits as well as A-F
you don't need to enclose a specific character in brackets (to make a character class)

Welcome to the Treehouse Community

Looking to learn something new?

harshayraipancholi

harshayraipancholi

What am I doing wrong here? /[#][a-f]{6}/i

1 Answer

Steven Parker

Steven Parker