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

JavaScript
1

Tell us what’s happening:

Hello, i finished the project and the code passed all the tests and i submited it. And latter when i added some css styles and some js updates the code does not pass any test even tho when i enter the US numbers in the validator it works.
I would be grateful if someone can check and find what is making this problem, poblably something i added in JS but i cant find what it is. Thanks in advance for the help!

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>US Telephone Number Validator</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main>
      
        <h1>US Telephone Number Validator</h1> 
        <div id="wrap">
       <form>
         <p>Enter a phone number</p> 
         <input id="user-input" type=""><br>
         <div id="results-div"></div>
       </form>
         <button id="check-btn">Check</button>
          <button id="clear-btn">Clear</button>
          </div> 
    </main>
    <script src="script.js"></script>
  </body>
</html>

const input = document.getElementById("user-input");
const checkBtn = document.getElementById("check-btn")
const clearBtn = document.getElementById("clear-btn")
const result = document.getElementById("results-div")

checkBtn.addEventListener("click", () => {
  if (input.value === '') {
    return alert("Please provide a phone number");
  } else {
    return update(), input.value = '';
  }
})

clearBtn.addEventListener("click", () =>
  result.innerHTML = '');

const numValidator = (num) => {
  const regex = /^(1[-\s]?)?(\(\d{3}\)|\d{3})[-\s]?\d{3}[-\s]?\d{4}$/;
  if (regex.test(num)) {
  return `<span style="color: #00FF40;">Valid US number: </span><br> ${num}`; 
} else {
  return `<span style="color: red;">Invalid US number: </span><br> ${num}`;
}

}

const update = () => {
  const number = input.value
  return result.innerHTML += (numValidator(number)) + '<br>';

}


*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Inter,-apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif; 
  }

  body {
    text-align: center;
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/221808/sky.jpg"); 
  background-size: cover; 
  background-position: center center;
  background-repeat: no-repeat;
  }

  html{
    height: 100%;
    
  }
  
  main {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  h1 {
    padding-bottom: 45px;
    color: white;
    text-shadow: rgba(0, 0, 0, 0.65) 0px 5px 15px;
  }

  form {
    border: 2px solid;
    border-radius: 15px;
    padding-top: 20px;
    height: 400px;
    width: 300px;
    background: rgba(3,0,9, 0.5);
    color: white;
    
    

  }

  #results-div {
    overflow-y: auto;
    height: 77%;
  }


#results-div::-webkit-scrollbar { 
  width: 8px; 
  
}

#results-div::-webkit-scrollbar-thumb {
  background-color: #555; 
  border-radius: 5px;
}

#results-div::-webkit-scrollbar-track {
  background-color: #ccc;
  border-radius: 5px;
  
}

  
  input {
    padding: 5px;
    border-radius: 10px;
    margin: 10px;
    border: none;

  }

  #wrap {
    background: rgba(19,50,105,1);
    padding: 20px;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.65) 0px 5px 15px;
  }
  
  
button {
  margin: 15px 5px;
  appearance: none;
  backface-visibility: hidden;
  background-color: #2f80ed;
  border-radius: 10px;
  border-style: none;
  box-shadow: none;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  font-family: Inter,-apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.5;
  outline: none;
  overflow: hidden;
  padding: 5px 30px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transform: translate3d(0, 0, 0);
  transition: all .3s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: top;
  white-space: nowrap;
}

button:hover {
  background-color: #1366d6;
  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
  opacity: 1;
  transform: translateY(0);
  transition-duration: .35s;
}

button:hover:after {
  opacity: .5;
}

button:active {
  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
  transform: translateY(2px);
  transition-duration: .35s;
}

button:active:after {
  opacity: 1;
}

Your browser information:

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

Challenge Information:

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

2

Hey there,

Please update the message to include your code. The code was too long to be automatically inserted by the help button.

When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
3

Hi there. double check the above return statement.

1 Like
4

Remove the span elements you are adding to the two DOM outputs.

As an aside, update is a function that preforms side effects, it does not need to return anything, and you can’t use its return for anything.

A function in JS can only return one value. JS does not support comma separated return values.

1 Like