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

JavaScript
1

Tell us what’s happening:

I have tried a couple of ways but couldn’t pass my code, I hope my understanding of regex is correct, even so had used alternative measures to directly convert the mobiles to a regex function just so to be sure, I need help with pls.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTf-8">

    <title>Telephone Number Validator</title>

<link rel="stylesheet" href="styles.css">

    </head>

    <body>
      <img src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
      <h1>Telephone Number Validator</h1>
      
      <div class="design-container">
        <div class="greylayer">
          </div>
          <div class="camera-shape"></div>
      <input id="user-input">
      <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 input = document.getElementById("user-input");

const result = document.getElementById("results-div");

const checkBtn = document.getElementById("check-btn");

const clearBtn = document.getElementById("clear-btn");

checkBtn.addEventListener("click", () => {
  if (input.value === "") {
    alert("Please provide a phone number")
  }
})

clearBtn.addEventListener("click", () => {
  result.textContent = "";
})

const valid = [
 /^1\s\d{3}-\d{3}-\d{4}$/,
 /^1\s?\(\d{3}\)\s?\d{3}-\d{4}$/,
/^5555555555$/,
 /^\d{3}-\d{3}-\d{4}$/,
 /^\(\d{3}\)\d{3}-\d{4}$/,
 /^1\s?\(\d{3}\)\s?\d{3}-\d{4}$/ ];

const invalid = valid.some(valid => valid.test(input));

function verify() {
  
if (valid) { checkBtn.addEventListener("click", () => {
  result.textContent = `Valid US number: ${input}`;
})
}
else {
  result.textContext = `Invalid US number: ${input}`;
}
}

/* file: styles.css */
body {
  background-color: #3b3b4f;
}
main {
  align-content:center;
}

img {
  height: 30;
  width: 100%;
}

h1 {
  color: #ffffff;
}

.design-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: colon;
  background-color: #000000;
  height: 350;
  width: 200;
  align-content: center;
  justify-content: center;
  margin: auto;
}
.greylayer {
  display: flex;
  background-color: grey;
  height: 300;
  width: 180;
  margin: auto;
}
.camera-shape {
  display: flex;
  height: 10;
  width: 10;
  border-radius: 50%;
  background-color: #ffffff;
}

Your browser information:

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

Challenge Information:

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

2

this function should called within checkBtn click event listener .

remove the event listener from that function, leave the other if else code.

3

Thank you for your feedback, updated code is provided below but cant pass the code yet.

function verify() {

if (valid) { checkBtn.addEventListener("click", () => {
  result.textContent = `Valid US number: ${input}`;
verify();
})

}
else {
  result.textContext = `Invalid US number: ${input}`;
}
}
4

Please don’t post snippets. Post the entire code.

You should also explain what testcase is failing, and what debugging steps you’ve attempted including the output from any logs you’ve generated.

Thanks

1 Like
5

nice to meet you, my brother

1 Like
6

Please don’t spam other people’s threads. Any response posted to a thread should be either in reply to the OP’s question or to support the original topic in some way.

2 Likes
7

My entire code is provided below:

const input = document.getElementById("user-input");

const result = document.getElementById("results-div");

const checkBtn = document.getElementById("check-btn");

const clearBtn = document.getElementById("clear-btn");

checkBtn.addEventListener("click", () => {
  if (input.value === "") {
    alert("Please provide a phone number")
  }
})

clearBtn.addEventListener("click", () => {
  result.textContent = "";
})

const valid = [
 /^1\s\d{3}-\d{3}-\d{4}$/,
 /^1\s?\(\d{3}\)\s?\d{3}-\d{4}$/,
/^5555555555$/,
 /^\d{3}-\d{3}-\d{4}$/,
 /^\(\d{3}\)\d{3}-\d{4}$/,
 /^1\s?\(\d{3}\)\s?\d{3}-\d{4}$/ ];

const invalid = valid.some(valid => valid.test(input));

function verify() {

if (valid) { checkBtn.addEventListener("click", () => {
  result.textContent = `Valid US number: ${input}`;
verify();
})

}
else {
  result.textContext = `Invalid US number: ${input}`;
}
}
```
8

we can’t write the code for you so please provide more information on what it is you need help with.
If you need to make sure your regex is working then use this website:

(set the ‘flavor’ option on the left side of the page to “ECMAScript” in order for the regex to be parsed with a javascript engine)
You write your regex in the top Regular Expression input area (the symbols between the left and right slash) and then write the test strings to see if it will match them or not

1 Like
9

Thank you for your feedback, it certainly was helpful to crosscheck with my regex , however i have attempted to implement the code task in a number of ways. i think my current function verify, should test all mobile number input and sort a result with a textContent value. The function seems not to implement the task requested of it.

10

Please share the testing and debugging you have done for the function you need help with.

(Including logs gathered for the testcase(s) you used)

11

I have not done any testing or debugging with the function of mention, save for the fact that i can’t pass the code.
i thought of doing it over after understanding regex a little better, yet not pass.
update provided below:

const input = document.getElementById("user-input");

const result = document.getElementById("results-div");

const checkBtn = document.getElementById("check-btn");

const clearBtn = document.getElementById("clear-btn");

checkBtn.addEventListener("click", () => {
  if (input.value === "") {
    alert("Please provide a phone number")
  }
});

clearBtn.addEventListener("click", () => {
  result.textContent = "";
});

function verify(str) {

  const validPattern = [
    /^1 \d{3}-\d{3}-\d{4}$/,
    /^1 \(\d{3}\) \d{3}-\d{4}$/,
    /^1\(\d{3}\)\d{3}-\d{4}$/,
    /^1 \d{3} \d{3} \d{4}$/,
    /^\d{10}$/,
    /^\d{3}-\d{3}-\d{4}$/,
    /^\(\d{3}\)\d{3}-\d{4}$/]

checkBtn.addEventListerner("click", verify(str));

if (input.value === validPattern) {
  result.textContent = `"Valid US number: ${input.value}"`
}

else {
  result.textContent = `"Invalid US number: ${input.value}"`
}

return validPattern.some((pattern)=>pattern.test(str));
}
12

this is a certification project so you’ll need to do some testing and figure out if your code works or not yourself before relying on the test suite.

When posting on the forum, we do expect you to have done that at a minimum and to be able to show your thinking in terms of what issues you’ve encountered and what you’ve tried to solve them.

You should be passing a reference to a function to the addEventListener here.
(you should not call the function as that will invoke it before the actual event happens)

Also I notice that this line of code is sitting inside the verify function itself, so that verify(str) calls verify(str). Did you mean to make it recursive like that?

13

Thank you for your feeback, at this stage things are a bit foggy, i confuse reference for a recursive function, if the function is the event intend the code to run, cant it be passed as so, or i declare the eventlisterner outside the scope of the function then followed by the function?

14

if you’re unsure about the usage of something, you should try to look it up.
there are multiple places to help you with that online (you could for example google: how to add an event listener on a button in javascript) or you could click on the last step of one of the projects you’ve done in fcc (like the decimal to binary converter maybe?) and read the code to recall how they wrote the event listeners.

recursion is when a function calls itself. I don’t think you wanted to do that here unless you planned it in your algorithm.

15

Thank you , i will see through google for testing my code units and as well look up the addEventListerner.

1 Like