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

JavaScript
1

Tell us what’s happening:

I don’t understand why the test checking if results-divs contains the appropriate text keep failing when when I tried for myself it actually has the correct output

Your code so far

<!-- file: index.html -->
 <!DOCTYPE html>
 <html lang="en">
 <style>
 *{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
.container{
   aspect-ratio: 9 / 16;
   margin: 1rem auto;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: auto 3rem 1fr 3rem;
   height: calc(100dvh - 2rem);
   border: 2px solid black;
   padding: .5rem;
}
input{
   display: block;
   width: 80%;
   height: 80%; 
   align-self: center;
   justify-self: center;
   grid-area: span 1 / span 2;
  text-align:  center;
  
}
h1{
    grid-area: span 1 / span 2;
    font-size: 0.7rem;
    text-align: center; 
}
#results-div{
   grid-area: span 1 / span 2;
   width: 100%;
   overflow: scroll;
}
button{
  display: block;
   grid-area: span 1 / span 1;
}
#results-div p{
    text-align: center
}  
 </style>
 <head>
 <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
 <body>
 <div class="container"> 
  <h1>Enter a Phone Number: </h1>
  <input type="text" maxlength="20" id="user-input"/>
  <div id="results-div"></div>
  <button id="check-btn">Add Number</button>
  <button id="clear-btn">Clear</button>
</div>
</body>
<script>
 const regex =/^(?:1[ ]?)?((\(\d{3}\))|(?<![()])\d{3})([ -])?\d{3}([ -])?\d{4}$/; 
const input = document.querySelector("input");
const clear = document.querySelector("#clear-btn");
const add = document.querySelector("#check-btn");
const result = document.querySelector("#results-div");
clear.addEventListener("click", () =>{result.innerHTML = ""})

function resolve(){
   const val = input.value;
   if (val == ""){
       alert("Please provide a phone number");
       return;
   }
   const pTag = document.createElement("p");
   const text = document.createTextNode(`${regex.test(val) ? "V" : "Inv"}alid US number: ${val}`);
    pTag.appendChild(text);
    
  result.appendChild(pTag);
  input.value = "";
} 
add.addEventListener("click", resolve) 
</script>
</html>

/* file: script.js */


/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/126.0.6478.153 Mobile/15E148 Safari/604.1

Challenge Information:

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

2

hi there, I copied the code you gave us above and it passed.
I’m not sure why it is not passing when you try?
How did you set it up on the editor?
(i just cleared the styles.css and script.js and then pasted your code into index.html)

1 Like
3

Hello there!
Your code passes on my side. Try clearing cache, history or blocking any pop-ups. If none of that work you can try restarting your device of switching browsers.

4

What do you mean you just clear the script.js and styles.css file

5

in the editor of fcc, I just erase any code that is there and copy yours to the index.html area

6

Im really confused it really doesn’t want me to pass the tests

7

Hmm.
Can I see a screenshot?

8

IMG_1570
IMG_15701062×1515 359 KB

9

Oh well, I meant your whole screen?