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

Tell us what’s happening:

Please I’m stuck
checkBtn.addEventListener(“click”, () => {
if(userInput.value === “1 555-555-5555”){
resultsDiv.textContent = ‘Valid US number: 1 555-555-5555’;
}
})

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF_8">
    <meta name="viewwport" content="width=device-width, initial-scale=1">
  <title>Telephone Number Validator</title>
  <link rel="stylesheet" href="styles.css">  
  </head>
  <body>
    <header>
      <h1 id="heading">Telephone Number Validator</h1>
    </header>
    <main>
      <div class="phone">
        <div class="hole"></div>
<div id="results-div">
  <label for="user-input">Enter a Phone Number:<input id="user-input" type="number"></label>
</div>
<div id="btns">
<button id="check-btn">Check</button>
<button id="clear-btn">Clear</button>
</div>
      </div>
    </main>
    <script src="./script.js"></script>
  </body>
</html>
/* file: styles.css */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
:root{
  --dark-blue: #AEC6CF;
  --gray: #808080;
  --black: #000;
  --ash: #B2BEB5;
  --white: #fff;
}
body{
  background-color: var(--dark-blue);
  color: var(--black);
  text-align: center;
}
#heading{
  margin: 25px 0; 
}
.phone{
  width: 350px;
  height: 600px;
  margin: 0 auto;
  border-radius: 25px;
  padding: 30px 20px 60px 20px;
  background-color: var(--black);
}
#results-div {
  background-color: var(--ash);
  width: 100%;
  height: 440px;
  margin-bottom: 5px;

}
.hole{
  width: 5%;
  height: 3%;
  background-color: var(--ash);
border-radius: 90px;
margin: 0 auto; 
margin-bottom: 20px;
}
#results-div input, #results-div label{
  width: 200px;
  height: 45px;
  font-size: 20px;
  border-radius: 5px;
}
#check-btn, #clear-btn{
  width: 120px;
  height: 45px;
  border: 5px groove var(--dark-blue);
  background-color: var(--white);
  font-size: 20px;
}

#btns{
  display: flex;
  justify-content: space-evenly;
   width: 100%;
  height: 90px;
  padding-top: 9px;
}
/* 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");

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

clearBtn.addEventListener('click', () => {
  resultsDiv.innerHTML = '';
});

checkBtn.addEventListener("click", () => {
  if(userInput.value === "1 555-555-5555"){
resultsDiv.textContent = 'Valid US number: 1 555-555-5555';
  }
})

Your browser information:

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

Challenge Information:

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

Hi @megacartenterprises

Your code does not have any logical flow after the if condition the input is not empty.

How will you validate the other phone numbers?

Happy coding

In addition to Teller’s advice, I see you have defined a result element in your JavaScript, but I don’t see that element in you html. How will you display the result to the user?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.