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

JavaScript
1

Tell us what’s happening:

Please try to find what is wrong with the code? And, inbox me

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">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <div class="container">
      <div class="form">
      <h1>Telephone Number Validator</h1>
        <form class="form-container">
          <input id="user-input" name="input" type="text">
          <button id="check-btn" class="btn" >Check</button>
          <button id="clear-btn" class="btn" >Clear</button>

        </form>
      
    <div id="results-div">

        </div>
      
    </div>
    </div> 
    <script src="script.js"></script>   
</body>

</html>

/* file: styles.css */


/* file: script.js */
const userInput=document.getElementById("user-input")
const checkBtn=document.getElementById("check-btn")
const clearBtn=document.getElementById("clear-btn")
const result=document.getElementById("results-div");

function isValid(telephone){
 const pattern = /^1?\s*(\(\d{3}\)|\d{3})[\s\-]?\d{3}[\s\-]?\d{4}$/;
 if(pattern.test(telephone)){
   return true
 }
 else{
   return false;
 }
}
checkBtn.addEventListener("click",(event)=>{
  event.preventDefault()
  if(userInput.value===""){
    alert("Please provide a phone number");
  } 
  else{ 
    
    let item=document.createElement("p");
    if(isValid(userInput.value)){
      item.textContent=`Valid US number: ${userInput.value}`;
      result.appendChild(item);
      // result.textContent=`Valid US number: ${userInput.value}`;
    }
    else{
      item.textContent=`Invalid US number: ${userInput.value}`;
       result.appendChild(item);
// result.textContent=`Valid US number: ${userInput.value}`;
    }
  }
})
clearBtn.addEventListener("click",(event)=>{
  event.preventDefault()
  result.remove()
  userInput.value="";
})

Your browser information:

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

Challenge Information:

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

2

Which tests are failing? How did you get stuck debugging?

3

Hi there!

Please review again User Story #6:

  1. When you click on the #clear-btn element, the content within the #results-div element should be removed.

Notice that is says you should just remove the content. But what does the remove() method do? Also, you are doing something in that event listener that was not asked. Did you notice that if you clear and then click check again, nothing happens? Start there.

Happy coding!