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

JavaScript
1

Tell us what’s happening:

I can’t pass the last two Javascript tests (35&36) and I don’t know why. Can someone help please?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <h1>Nick's Telephone Number Validator</h1>
    <div class="firstDiv">
      <div class="secondDiv">
        <input id="user-input">
      </div>
      <button id="check-btn">Check</button>
      <button id="clear-btn">Clear</button>
    </div>
    <div id="results-div"></div>
    <script src="./script.js"></script>
  </body>
</html>

/* file: script.js */
const checkButton = document.getElementById("check-btn");
const clearButton = document.getElementById("clear-btn");
const userInput = document.getElementById("user-input");
const userResults = document.getElementById("results-div");
const firstRegex = /^(1\s?)?(\(\d{3}\)|\d{3})[\s-]?\d{3}[\s-]?\d{4}$/;

checkButton.addEventListener("click", () => {
  const inputValue = userInput.value.trim();

  if (!inputValue) {
    alert("Please provide a phone number");
    return;
  }

  if (firstRegex.test(inputValue)) {
    userResults.textContent = "Valid US number: " + inputValue;
  } else {
    userResults.textContent = "Invalid US number: " + inputValue;
  }
});

clearButton.addEventListener("click", () => {
  userInput.value = "";
  userResults.textContent = "";
});


/* file: styles.css */
*{
box-sizing:border-box;
}

body{
background-color:#FFB612;
}

.firstDiv {
  border: 1px black solid;
  width: 65%;
  height: 325px;
  margin: 0 auto;
}

.secondDiv {
  display: flex;
  width: 80%;
  height: 50%;
  border: 1px black solid;
  margin: 20px auto;
}

#user-input {
  margin: 30px auto;
  height: 30%;
  width: 70%;
  border-radius: 10px;
}

#clear-btn {
  border: 1px solid black;
  margin-left: 50%;
  width: 25%;
  height: 10%;
  border-radius: 10px;
}

#check-btn {
  border: 1px solid black;
  margin-left: 20%;
  width: 25%;
  height: 10%;
  border-radius: 10px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36

Challenge Information:

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

2

there is a bug with the randomized tests, you will need to use resultsDiv for this variable here to make your project work with this bug

and checkBtn for this one

3

Thank you for your help. I’m guessing I’ll have to change the html ID’s as well? Also should I make this change to all of the variables I have?

4

why do you want to change the html ids? I did not mention any issue with the html ids

not all the variables, you need to have resultsDiv instead of userResults and checkBtn instead of checkButton, that’s only two variabkles

5

Hi,
Was scratching my head failing the last 2 tests… even broad scoped the regex to include more number formats outside the given samples.

Thanks… very wierd bug, but nothing mentioned anywhere.

Anyway, I did what u said → resultsDiv and checkBtn.

Test 36 passed but 35 did not! :expressionless:

Even changed clearButton to clearBtn.

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

Maybe there’s more to the bug? :frowning:

8

Check this solution

9

Are these declared globally?

10

@pkdvalis
Yes, they are, that’s why all tests pass except 35! :frowning:
Here’s my script.js file:
freeCodeCamp - Telephone Number Validator

11

do you get in the console an error for an undefined variable?

12

There is a bug in these tests and a fix is in the works.

If you are passing tests 16 and 17 (which is also for valid US numbers) I would skip over this for now and wait until the tests are fixed.

13

@ILM
If you mean the editor console, then Nope.
It only shows 35 didn’t pass.

// running tests
35. When the #user-input element contains a valid US number and the #check-btn element is clicked, the #results-div element should contain the text "Valid US number: " followed by the number.
// tests completed

14

@pkdvalis
Yes, thanks for the info.
All case passes except 35.
Just kept my observation here, in case it helps with the fix.

15

@raqib.bjit I’d say it might have more to do with using non-exhaustive list of phone number patterns to determine whether number is valid. Please for convenience create separate thread for your problem.

16

that means it is not the bug for missing variables, you may be missing a correct number format. Those two tests are quite throughout

17

@sanity @ILM
You were right.
Using the exhaustive pattern worked, and passed all tests.
Thank you.