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

JavaScript
1

Tell us what’s happening:

I can’t pass any tests except first 8 for some reason. My code is weird and inefficient (I’ll improve that later), but it seems to work for me so I can’t find the problem

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="styles.css"/>
    <meta charset="utf-8"/>
    <title>Number Validator</title>
  </head>
  <body>
    <div id="container">
      <h1>Number Validator</h1>
      <input id="user-input"/>
      <div id="buttons">
        <button id = "check-btn">CHECK!</button>
        <button id = "clear-btn">CLEAR</button>
      </div>
      <div id="results-div">resultGoesHere</div>
    </div>
  </body>
</html>
<script src="script.js"></script>

/* file: styles.css */
div {
  border: 1px solid black;
  display:flex;
  width: 300px;
  overflow:column;
  padding:25px;
  justify-content:space-evenly;
}
#container{flex-direction:column;
  width:350px;
  position: absolute; 
  left: 0; 
  right: 0; 
  margin-inline: auto; 
} 
button{width:100px;height:50px; margin:auto;}
h1{margin: auto auto 25px auto}
input{height:60px; font-size:35px;width:344px;}
#buttons{height:50px;}



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

function clearCharacters(input){
  const regex = /[0-9]/;
  let output = "";
  for (let i = 0; i < input.length; i++){
    if (regex.test(input[i])){
      output += input[i];
    }
  }
  return output;
}
function isCleanValid(input){
  const clean = clearCharacters(input);
  if (clean[0] === "1" && clean.length === 11){
    return true;
  } else if (clean.length === 10){
    return true;
  } else {
    return false;
  }
}
function isDirtyValid(input){
  const mainRegex = /[0-9\-\(\)\s]/g;
  const regex2 = /[\(\)]/g;
  const regex3 = /1?\s?\(\d\d\d\).+/;
  if (input.match(/-/g) && input.match(/-/g).length>2){
    return false;
  }
  for (let i = 0; i<input.length; i++){
    if (!input[i].match(mainRegex)){
      return false
    }
  }
  if (input.match(regex2)&& !input.match(regex3)){
    return false;
  } else {
    return true;
  }
}
function isValid(input){
  if (isDirtyValid(input) && isCleanValid(input)){
    return true;
  } else {
    return false;
  }
}

function check (){
  if (!userInput.value){
    alert("Please provide a phone number")
  } else if (isValid(userInput.value)){
    results.push(`Valid US number: ${userInput.value}`);
    update();
  } else {
    results.push(`Invalid US number: ${userInput.value}`);
    update();
  }
}
function update () {
  resultsDiv.innerHTML = "";
  for (let i = results.length - 1; i >= 0; i--){
    resultsDiv.innerHTML += results[i];
    resultsDiv.innerHTML += "<br>";}
  console.log(resultsDiv.innerHTML);
  userInput.value = "";
}
function clear(){
  results = [];
  update();
}

Your browser information:

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

Challenge Information:

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

2

There’s slight detail caused by using global variable to keep the results. Tests are clearing the results div, before trying another number. However, since previous checks are kept in the global variable and are all re-added to the results div after each check, test finds in the result div also other things.

3

Thanks a lot! It solved it.
I wanted to make it save the results array to localStorage but the tests didn’t let me do it. Sad.
EDIT: I closed the tab after running the tests but the code wasn’t saved. Ugh