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

JavaScript
1

Tell us what’s happening:

hey, my code is not passing and i dont know where the problem is!! it should pass but 35 and 36 tests are not ! here is my js code:

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">
    <meta name="description" content="Build a Telephone Number Validator">
    <link rel="stylesheet" href="styles.css">
    <title>Build a Telephone Number Validator</title>
  </head>
  <body>
    <h1 class="title">Telephone Number Validator</h1>
    <div id="container">
      <div class="user-input-wrap">
      <label class="user-label" for="user-input">Enter a Phone Number:</label> 
      <input type="text" id="user-input" 
class="user-input" required>
</div>
     
<div id="results-div"></div>
      <div class="button-wrap">
      <button id="check-btn" class="btn">Check</button>
      <button id="clear-btn" class="btn">Clear</button>
      </div>
    </div>
    <script src="./script.js"></script>
  </body>
</html>

/* file: script.js */

const checkbtn = document.getElementById('check-btn');
const clearbtn = document.getElementById('clear-btn');
const userInput = document.getElementById('user-input');
const resultsDiv = document.getElementById("results-div");

// formatted-number
function formattedNum(num){
 const regex = /^(1\s?)?(\(\d{3}\)|\d{3})([\s-]?)\d{3}([\s-]?)\d{4}$/;
  return regex.test(num);
}

// input-validation
function inputValidation() {

  const input = userInput.value;
  if (!input) {
     alert('Please provide a phone number');
     return;
     }

const formatted = formattedNum(input);
const newParagraph = document.createElement('p');
newParagraph.className = 'results-p';


if (formatted) {
 newParagraph.style.color = 'rgb(0, 128, 0)';
 newParagraph.innerText = "Valid US number: " + input;
} else {
newParagraph.style.color = 'rgb(255, 0, 0)';
newParagraph.innerText = "Invalid US number: " + input;
  }
  resultsDiv.appendChild(newParagraph);
  
}
// check-button-event
checkbtn.addEventListener('click',inputValidation);

userInput.addEventListener('keydown', e =>{
  if(e.key === 'Enter'){
    inputValidation();
    userInput.value = '';
}
  
})
// clear-button-event
clearbtn.addEventListener('click', ()=>{
  resultsDiv.innerHTML ='';
  userInput.value= '';
} );

/* file: styles.css */
body{
  background-color:rgb(52, 52, 73);
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
  color:#fff;
  font-family:arial;

}
.title{
  font-size:40px;
  text-align:center;
}
#container{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  max-width:290px;
  background-color:#fff;
  padding:20px;
  border-radius:15px;
  min-height:390px;
  border:20px solid #000;
  border-bottom-width: 50px;
}
.user-input-wrap{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.user-label{
  color:#000;
  text-align:center;
  font-size:15px;
}
.user-input{
  border-radius:8px;
  padding:8px 0px;
  text-align:center;
  font-size: 18px;
}
#results-div{
font-size:16px;
max-width:200px;
text-align:center;
font-weight:bold;
color:#000;
margin:18px 0;
}
.btn{
padding:8px 12px;
margin:0 6px;
width:100px;
font-size:15px;
background-image:  linear-gradient(#fff, rgb(185, 183, 183));
border: 1px solid #000;
cursor:pointer;
}

Your browser information:

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

Challenge Information:

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

2

Can you say which are tests 35 and 36 and how you got stuck figuring out what is wrong with the code? Did you try those two tests manually? What happened if you tried them manually?

1 Like
3

As per the solution below, try changing your global variables checkbtn and clearbtn to checkBtn and clearBtn respectively.
There appears to be an issue with the tests, but a fix is in the works I think.

2 Likes