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

JavaScript
1

Tell us what’s happening:

My code works perfectly in the console and preview as well as my Vscode but the test don’t pass me after question number 7. I check all multiple times but it is the same.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Telephone Number Validator</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>USA Number Validator</h1>
    <div class="container">
    <input type="text" id="user-input">
    <button id="check-btn">Check</button>
    <button id="clear-btn">Clear</button>
    <p id="results-div"></p></div>
    <script src="script.js"></script>
  </body>
</html>

/* file: script.js */
const x = document.querySelector('#check-btn');
const c = document.querySelector('#clear-btn');
//CHECKING
x.addEventListener('click', 
function (){
const checker = /^(1\s?)?(\(\d{3}\)|\d{3})([-\s.]?\d{3})([-\s.]?\d{4})$/;
const y = document.querySelector('#user-input').value.trim();
const z = document.querySelector('#results-div');
  if(!y){
    alert('Please Provide a Phone number.');
  }
  if(checker.test(y)){
    z.innerHTML = `Valid US number : ${y}`;
  }else{
    z.innerHTML = `Invalid US number : ${y}`;
  }
}
);
//CANCELLING

c.addEventListener('click', 
function (){
  document.querySelector('#results-div').innerHTML = '';
}
);


/* file: styles.css */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
h1{
  text-align: center;
  color: orange;
}
.container{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 70%;
  height: 60vh;
  background: black;
  margin: 20px 80px;
  border-radius: 20%;
}
#user-input{
  position: absolute;
  top: 50px;
  width: 280px;
  height: 55px;
  font-size: 2em;
  border-radius: 10px;
}
#check-btn, #clear-btn{
  position: absolute;
  width: 70px;
  height: 50px;
  border-radius: 20%;
  font-weight: bold;
  color: brown;
}
#check-btn{
  top: 110px;
  left: 180px
}
#clear-btn{
  top: 110px;
  left: 260px;
}
#results-div{
  position: absolute;
  width: 250px;
  height: 150px;
  font-size: 1em;
  font-weight: bold;
  left: 70px;
  top: 200px;
  color: Yellow;
}

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 not expected space added to the output before the : character.

1 Like
3

I believe the test checker may be crashed. I test it many times with my own. Thank you so much for your solution, it perfectly works and passes all requirements.