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

JavaScript
1

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

2

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

3

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?

4

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