Build a Telephone Number Validator Project - Build a Telephone Number Validator

JavaScript
1

Tell us what’s happening:

I’m having a hard time with the project “Build a Telephone Number Validator”. Everything passes except the last two user stories 35 & 36. How are these two user stories different from user stories 7-34? Is this a bug or something else?

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">
    <title>Document</title>
    <link rel="stylesheet" href="style.css"type="text/css">
</head>
<body>
    <main>
        <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" href="webapp_proj/style.css"type="text/css">
        
        <h1 style="color: red;">Telephone Number Validator</h1>
        <h2 class="blue-text">Enter a Phone Number:</h2>
        <input id="user-input"type="text" placeholder="Phone number" required>
        <br>
        <button id="check-btn"type="submit">Check</button>
        <button id="clear-btn"type="submit">Clear</button>
        <div id="results-div">
            
        </div>
    </main>
    <script src="script.js"></script>

</body>
</html>

/* file: script.js */
const checkBtn = document.getElementById("check-btn");
const clearBtn = document.getElementById("clear-btn");
const textInput = document.getElementById("user-input");
const divElement = document.getElementById("results-div")
const regex = /^(1\s?)?(\(\d{3}\)|\d{3})([\s-]?)\d{3}([\s-]?)\d{4}$/;

const checkUserInput = () => {
    if(!textInput.value) {
        return alert("Please provide a phone number");
    }else if (regex.test(textInput.value)) {
        divElement.innerText =(`Valid US number: ${textInput.value}`)
    }else {
        divElement.innerText =(`Invalid US number: ${textInput.value}`)
    }
    textInput.value = "";

}

checkBtn.addEventListener('click', checkUserInput);
textInput.addEventListener('keydown', (e) => {
    if(e.key === "Enter") {
        checkUserInput();
    }
});

clearBtn.addEventListener('click', () => divElement.innerHTML = "");

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Challenge Information:

Build a Telephone Number Validator Project - Build a Telephone Number Validator

2

there is a bug in the tests, you need to have these variables for the tests to work:

const userInput = document.getElementById("user-input");
const checkBtn = document.getElementById("check-btn");
const clearBtn = document.getElementById("clear-btn");
const resultsDiv = document.getElementById("results-div");

the bug has been fixed in the codebase, but the deplyment is taking longer for unrelated issues

3

Thanks for the swift response. I used the variables as suggested and it worked. I do hope the deployment issue is resolved as soon as possible. Thank you.