Build a Telephone Number Validator Project - Test 36

JavaScript
1

Tell us what’s happening:

Everything works correctly except test 36 with the message: " 36. When the #user-input element contains an invalid US number and the #check-btn element is clicked, the #results-div element should contain the text “Invalid US number: " followed by the number. // tests completed”.
I added the userInput, checkBtn, clearBtn, and resultsDiv constants to the global scope as suggested in previous posts, but it does not work.

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" />
    <link href="styles.css" rel="stylesheet" />
    <title>Telephone Number Validator</title>
  </head>
  <body>
    <main>
      <h1>Telephone Number Validator</h1>
      <div class="main-container">
        <div class="input-container">
          <p class="text">Enter a Phone Number:</p>
          <input id="user-input" />
        </div>
        <div id="results-div"></div>
        <button id="check-btn" type="submit" onclick="checkNumber()">
          Check
        </button>
        <button id="clear-btn" type="submit" onclick="clearButton()">
          Clear
        </button>
      </div>
    </main>
    <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");

function checkNumber() {

  // Remove punctuation and white spaces from inputNumber
  let noSpaces = userInput.value.replace(/ /g, "");
  let valuesOnly = noSpaces.replace(/[-()]/g, "");

  // String to array
  let stringToArray = valuesOnly.split("");
  let length = stringToArray.length;

  // Function to check round brackets
  function bracketsCheck(str) {
    let count = 0;
    if (userInput.value.includes("(")) {
      count++;
    }
    if (userInput.value.includes(")")) {
      count--;
    }
    if (count == 0) {
      return true;
    } else {
      return false;
    }
  }

  // Function to check start and end brackets
  let arrayBrackets = noSpaces.split("");
  function checkStartEndBracket(str) {
    if (
      isNaN(arrayBrackets[0]) == true &&
      isNaN(arrayBrackets[arrayBrackets.length - 1]) == true
    )
      return true;
  }

  // Function to check valid dash
  let fullArray = userInput.value.split("");
  function dashCheck(array) {
    let dashCount = fullArray.filter((x) => x == "-").length;
    if (dashCount >= 3) return false;
  }

  // Invalid and valid numbers
  if (userInput.value == "") {
    alert("Please provide a phone number");
  } else if (
    (length != 10 && length != 11) ||
    stringToArray.some(isNaN) == true ||
    bracketsCheck(userInput.value) == false ||
    checkStartEndBracket(userInput.value) == true ||
    (length == 11 && stringToArray[0] != 1) ||
    arrayBrackets[0] == "-" ||
    dashCheck(fullArray) == false
  ) {
    resultsDiv.textContent +=
      "Invalid US number: " + userInput.value + "\n";
  } else {
    resultsDiv.textContent +=
      "Valid US number: " + userInput.value + "\n";
  }
}

// Clear button
function clearButton() {
  resultsDiv.innerHTML = "";
}


/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:144.0) Gecko/20100101 Firefox/144.0

Challenge Information:

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

2

add a console.log to check the value of the user input right at the beginning of this, then run the tests with the browser console open and see which is the last number logged before the error, that is the one that is making your app fail

3

Fixed it! Thank you very much!