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

JavaScript
1

Tell us what’s happening:

Having an issue with step 35, I don’t understand what im doing wrong here.

Your code so far

<!-- file: index.html -->
<DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div id="root">
      <header><h2>FreeCodeCamp</h2></header>
      <main>
        <section class="phone">
          <article class="phone-ctn">
            <form class="input-form">
              <div class="input-ctn">
                <label>Enter your phone number:</label>
                <input id="user-input" type="text">
              </div>
              <div id="results-div"></div>
              <div class="btn-ctn">
                <button type="button" id="check-btn">Check</button>
                <button type="button" id="clear-btn">Clear</button>
              </div>              
            </form>

          </article>
        </section>
      </main>
    </div>
    <script src="script.js"></script>
  </body>
</html>

/* file: script.js */
const userInput = document.getElementById("user-input");
const checkBtn = document.getElementById("check-btn");
const clearBtn = document.getElementById("clear-btn");
const resultsDiv = document.getElementById("results-div");

const clearResult = () => {
  resultsDiv.textContent = '';
}

const clearInput = () => {
  userInput.value = '';
  clearResult();
}

clearBtn.addEventListener("click", clearInput);

const checkBrackets = (string) => {
  const stack = [];
  for (let i=0;i<string.length;i++) {
    if (string[i] === '(') {
      stack.push(string[i]);
    } else if (string[i] === ')' && stack[stack.length - 1] === '(') {
      stack.pop();
    } else if (string[i] === ')' && stack[stack.length -1] !== '(') {
      return false; 
    }
  }
  if (stack.length === 0) {
    return true;
  }
  return false;
}

const checkNumber = () => {
  clearResult();
  const value = userInput.value;
  if (!value || !value.trim()) {
    alert("Please provide a phone number");
    return false;
  } else if (value.startsWith('-') || !checkBrackets(value)) {
    resultsDiv.textContent = `Invalid US number: ${value}`;
    return false;
  }
  const sanitizedArr = value.replace(/([()-\s+])/g,'-').split('-').filter(Boolean);
  let sanitized = '';
  if (sanitizedArr.length > 4) {
    resultsDiv.textContent = `Invalid US number: ${value}`;
    return false;
  } else if ( sanitizedArr.length <= 4) {
    sanitized = sanitizedArr.join('');
  if ( sanitized.length < 10 || sanitized.length > 11 || isNaN(Number(sanitized))) {
    resultsDiv.textContent = `Invalid US number: ${value}`;
    return false;
  } else if (sanitized.length === 11 && sanitized[0] !== '1' || sanitized.length === 10 && sanitized[0] !== '5') {
    resultsDiv.textContent = `Invalid US number: ${value}`;
    userInput.value = "";
    return false;
  }
  }
  resultsDiv.textContent = `Valid US number: ${value}`;
  return false;
}

checkBtn.addEventListener("click", checkNumber);

/* file: styles.css */
#root {
  background-color: lightgreen;
  display:flex;
  flex-direction:column;
  min-height: 100vh;
  padding:0;
  margin: 0;
}
header > h2 {
  text-align: center;
}
.phone {
  width: fit-content;
  border-radius: 10px;
  background-color: black;
  margin-inline:auto;
}
.phone-ctn {
  padding-inline: 10px;
  padding-top: 40px;
  padding-bottom: 90px;
  border-radius: 10px;
}

.input-form {
  display:flex;
  padding: 10px;
  border-radius: 10px;
  background-color: lightgray;
  flex-direction: column;
  justify-content: between;
}

.input-ctn {
  display:grid;
}

.btn-ctn {
  padding-top: 200px;
  display:flex;
  align-items: center;
  justify-content:center;
  gap: 10px;
}

.input-ctn > label {
  text-align: center;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36

Challenge Information:

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

2

You can add code like this to the bottom of your script file to compare what your code is producing to what is expected:

document.getElementById("user-input").value = "1 555-555-5555";
document.getElementById("check-btn").click();
console.log("actual", document.getElementById("results-div").innerHTML);
console.log("expected", "Valid US number: 1 555-555-5555");
3

i have used this,
document.getElementById(“user-input”).value = “1 555-555-5555”;

document.getElementById(“check-btn”).click();

console.log(“actual”, document.getElementById(“results-div”).innerHTML);

console.log(“expected”, “Valid US number: 1 555-555-5555”);
after changing resultDiv.textContent, to resultDiv.innerHTML

5

Actually, textContent is a better choice since there are no HTML elements in the result. It’s just a string.

6

But I’m still seeing test no. 35 fail

7

post your updated code please

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

const clearResult = () => {
  resultsDiv.textContent = '';
}

const clearInput = () => {
  userInput.value = '';
  clearResult();
}

clearBtn.addEventListener("click", clearInput);

const checkBrackets = (string) => {
  const stack = [];
  for (let i=0;i<string.length;i++) {
    if (string[i] === '(') {
      stack.push(string[i]);
    } else if (string[i] === ')' && stack[stack.length - 1] === '(') {
      stack.pop();
    } else if (string[i] === ')' && stack[stack.length -1] !== '(') {
      return false; 
    }
  }
  if (stack.length === 0) {
    return true;
  }
  return false;
}

const checkNumber = () => {
  clearResult();
  const value = userInput.value;
  if (!value || !value.trim()) {
    alert("Please provide a phone number");
    return false;
  } else if (value.startsWith('-') || !checkBrackets(value)) {
    resultsDiv.textContent = `Invalid US number: ${value}`;
    return false;
  }
  const sanitizedArr = value.replace(/([()-\s+])/g,'-').split('-').filter(Boolean);
  let sanitized = '';
  if (sanitizedArr.length > 4) {
    resultsDiv.textContent = `Invalid US number: ${value}`;
    return false;
  } else if ( sanitizedArr.length <= 4) {
    sanitized = sanitizedArr.join('');
  if ( sanitized.length < 10 || sanitized.length > 11 || isNaN(Number(sanitized))) {
    resultsDiv.textContent = `Invalid US number: ${value}`;
    return false;
  } else if (sanitized.length === 11 && sanitized[0] !== '1' || sanitized.length === 10 && sanitized[0] !== '5') {
    resultsDiv.textContent = `Invalid US number: ${value}`;
    userInput.value = "";
    return false;
  }
  }
  resultsDiv.textContent = `Valid US number: ${value}`;
  return false;
}

checkBtn.addEventListener("click", checkNumber);

Here is my code.

9

Your code says this number is invalid: 310-555-9876.

11

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Get Help > Ask for Help button located on the challenge.

image
image493×196 5.09 KB

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

12

Hello thank you for your help I was able past the tests.

13

Glad you got it sorted. I learned something from your code! Had never seen this before so I googled it:

1 Like