Build a RegEx Sandbox - Build a RegEx Sandbox

JavaScript
1

Tell us what’s happening:

I thought I set the function getFlags() in place.

The results of tests 8 through 10 are fails.

    1. The getFlags function should return "i" if the #i checkbox is checked.
    1. The getFlags function should return "g" if the #g checkbox is checked.
    1. The getFlags function should return either "ig" or "gi" if both checkboxes are checked.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Regex Sandbox</title>

</head>

<body>
    <h1>Regex Sandbox</h1>
    <main>
        <div id="regex-container">
            <label for="pattern">Regex Pattern:
                <div id="pattern-container">/<input type="text" id="pattern" name="pattern"
                        placeholder="Enter your regex pattern">/</div>
            </label>
            <div id="flags-container">
                <p>Flags: </p>
                <label for="i">
                    <input type="checkbox" name="flags" id="i"> i
                </label>
                <label for="g">
                    <input type="checkbox" name="flags" id="g"> g
                </label>
            </div>
        </div>
        <div id="test-container">
            <p>Test String:</p>
            <div id="test-string" placeholder="Enter your test string" contenteditable="true"></div>
        </div>
        <button class="btn" id="test-btn" type="button">Test Regex</button>
        <div id="result-container">
            <h2>Result:</h2>
            <p id="result">
            </p>
        </div>

    </main>
    <script src="script.js"></script>
</body>

</html>

/* file: styles.css */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --dark-grey: #1b1b32;
    --light-grey: #f5f6f7;
    --golden-yellow: #fecc4c;
    --yellow: #ffcc4c;
    --gold: #feac32;
    --orange: #ffac33;
    --dark-orange: #f89808;
    --border: 0.2rem solid darkgrey;
    --padding: 0.3rem;
}

body {
    background-color: var(--dark-grey);
    color: var(--light-grey);
    font-size: 20px;
    font-family: "Lato", Helvetica, Arial, sans-serif;
    padding: 5px;
}

h1 {
    margin: 5rem auto 2rem;
    text-align: center;
}

p {
    padding: var(--padding);
}

#regex-container {
    max-width: 680px;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border: var(--border);
}

#regex-container>label {
    padding: var(--padding);
    flex: 1 1 auto;
}

#pattern-container {
    display: inline-block;
    color: var(--dark-grey);
    background-color: var(--light-grey);
    margin: 5px;
    border: var(--border);
}

#pattern {
    margin: 0.2rem;
    border: 0;
    font-size: 1rem;
    width: calc(100% - 1.2rem);
}

#pattern:focus {
    outline: none;
}

#flags-container {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
}

#flags-container>label {
    padding: var(--padding);
    margin-right: 0.3rem;
}

#test-container {
    max-width: 680px;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    border: var(--border);
}

#test-string {
    background-color: var(--light-grey);
    min-height: 5rem;
    color: var(--dark-grey);
    border-top: var(--border);
    font-size: 1.2rem;
}

[contenteditable=true]:empty:before {
    content: attr(placeholder);
    pointer-events: none;
    color: var(--dark-grey);
}

::placeholder {
    color: var(--dark-grey);
}


button {
    display: block;
    cursor: pointer;
    width: 8rem;
    margin: 0.2rem auto;
    color: var(--dark-grey);
    background-color: var(--gold);
    background-image: linear-gradient(var(--golden-yellow), var(--orange));
    border-color: var(--gold);
    border-width: 0.2rem;
    font-size: 1.1rem;
}

.btn:hover {
    background-image: linear-gradient(var(--yellow), var(--dark-orange));
}

#result-container {
    max-width: 680px;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

h2 {
    align-self: flex-start;
    margin: 0.4rem 0.2rem 0.2rem;
    flex: 0 1 auto;
}

#result {
    color: var(--dark-grey);
    background-color: var(--light-grey);
    font-size: 1.5rem;
    flex: 1 1 auto;
    margin: 0.2rem;
    border: var(--border);
    min-height: 3rem;
}

.highlight {
    background-color: lightgreen;
}

/* file: script.js */
const regexPattern = document.getElementById("pattern");
const stringToTest = document.getElementById("test-string");
const testButton = document.getElementById("test-btn");
const testResult = document.getElementById("result");
const caseInsensitiveFlag = document.getElementById("i");
const globalFlag = document.getElementById("g");

regexPattern.addEventListener("input", () => {});
testButton.addEventListener("click", () => {});

let isFlagIClicked = false;
let isFlagGClicked = false;

caseInsensitiveFlag.addEventListener("input", () => {
  isFlagIClicked = caseInsensitiveFlag.checked;
});

globalFlag.addEventListener("input", () => {
  isFlagGClicked = globalFlag.checked;
});

const getFlags = () => {
  let flagString = "";
  isFlagIClicked ? (flagString += "i") : flagString;
  isFlagGClicked ? (flagString += "g") : flagString;
  return flagString;
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:145.0) Gecko/20100101 Firefox/145.0

Challenge Information:

Build a RegEx Sandbox - Build a RegEx Sandbox

2

Hmm, do you think it would be possible to do this without additional event listeners for the i/g?

1 Like
3

By the way, I tried it the way you described and it worked — no need for anything involving addEventListener on flagI or flagG.

const getFlags = () => {
  let flagString = "";
  globalFlag.checked ? (flagString += "g") : flagString;
  caseInsensitiveFlag.checked ? (flagString += "i") : flagString;
  return flagString;
};

The code above does pass tests 8 to 10.

But I’m still curious why the other approach didn’t work. Can you explain what was going wrong under the hood?

When caseInsensitiveFlag.checked and globalFlag.checked are both assigned outside of getFlags(), tests 8 to 10 still fail.

The code below doesn’t pass tests 8 to 10 either.

let isFlagIClicked = caseInsensitiveFlag.checked;
let isFlagGClicked = globalFlag.checked;

const getFlags = () => {
  let flagString = "";
  isFlagIClicked ? (flagString += "i") : flagString;
  isFlagGClicked ? (flagString += "g") : flagString;
  return flagString;
};

It turns out that once the default values are set to false, tests 8 to 10 pass.

const regexPattern = document.getElementById("pattern");
const stringToTest = document.getElementById("test-string");
const testButton = document.getElementById("test-btn");
const testResult = document.getElementById("result");
const caseInsensitiveFlag = document.getElementById("i");
const globalFlag = document.getElementById("g");

regexPattern.addEventListener("input", () => {});

const getFlags = () => {
  let flagString = "";
  let isFlagIClicked = false;
  let isFlagGClicked = false;

  isFlagIClicked = caseInsensitiveFlag.checked;
  isFlagGClicked = globalFlag.checked;

  isFlagIClicked ? (flagString += "i") : flagString;
  isFlagGClicked ? (flagString += "g") : flagString;
  return flagString;
};
4

That’s a bit of combination of code and how tests were written. Event listener requires… well event, but if test is only changing ie. caseInsensitiveFlag.checked value, the event will not trigger.

This isn’t to say your initial approach is completely wrong, it was doing what it should be doing to make it work (the result-wise), but with additional, not expected by test, step. With function like getFlags, which specifically is tracking the values of both flag inputs, adding additional external dependencies (other than required dependencies of caseInsensitiveFlag and globalFlag) is adding complication.

This is because of the assignments in the global scope. These are executed when code is loaded for the first time. When, later, getFlags function is called, isFlagIClicked and isFlagGClicked are not updated.

1 Like