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

JavaScript
1

Tell us what’s happening:

Don’t understand why it won’t pass 36. I think it might be due to my conditions being too restrictive with the dashes and bracket counter. I added console.log() statements to try and find where it fails but can’t find anything. Would appreciate a hint and not a straight up answer.

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>Basic HTML Template</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h2 id="title">Phone Number Validator<h2>
    <div class="container">
        <input id="user-input" placeholder="Phone Number">
        <button id="check-btn" type="button">Check</button>
        <button id="clear-btn">Clear</button>
    <div id="results-div">
    </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

/* file: styles.css */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px; 
  padding: 20px;
  border: 1px solid #ccc;
  width: 25vw;
  height: 50vh;
  margin: 50px auto; 
 text-align: center;
 min-width: 150px;
 min-height: 250px;
 max-width: 150px;
 max-height: 250px;
 margin-top: 15vh;
}
#title {
  text-align: center;
}

#results-div {
  font-size: 17px;
}

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

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

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

const checkValid = (value) => {
  const regex = /[\s\-\(\)]/g;

    if (dashAndBracketCounter(value)) {
    resultsDiv.textContent += `Invalid US Number: ${value}`;
    console.log(`Invalid US Number: ${value}`);
    return;
  } else if (value[value.length - 1].match(/[\s\-\(\)]/) || value[0] === "-") {
    resultsDiv.textContent += `Invalid US Number: ${value}`;
    console.log(`Invalid US Number: ${value}`);
    return;
  }

  const cleanValue = value.replace(regex, "");

  if (cleanValue.length === 10 || (cleanValue.length === 11  && cleanValue[0] === "1")) {
    resultsDiv.textContent += `Valid US Number: ${value}`;
    console.log(`Valid US Number: ${value}`);
    return;
  } else {
    resultsDiv.textContent += `Invalid US Number: ${value}`;
    console.log(`Invalid US Number: ${value}`);
    return;
  }
}

function dashAndBracketCounter(value) {
  let bracketCount = 0;
  let dashCount = 0;

    for(let i = 0; i < value.length; i++) {
      if (value[i].match(/[\(\)]/)) {
        bracketCount++;
      }
      if (value[i].match(/[\-]/)) {
        dashCount++;
      }
    }

    if (bracketCount === 1 || bracketCount > 2) {
      return true;
    } else if (dashCount > 2) {
      return true;
    }
}

Your browser information:

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

Challenge Information:

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

2

Hi @antondurov

When I tested with an invalid, then valid phone number.

image
image335×165 7.26 KB

Happy coding

3

Sorry, didn’t understand the answer

4

the responses keep piling up in the same element instead of showing only one response