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

JavaScript
1

Tell us what’s happening:

My test never finishes. I can successfully test each test case manually however the “Run the Tests” button starts, and the console just shows “//running tests”

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, intial-scale=1.0">
  
    <title>Phone Validator</title>
    <link type="stylesheet" href="./styles.css"
    
  </head>
  <body>
    <main>
      <div class="flex-container">
       
        <h1>Telephone Number Validator</h1>
        
        <div class="iphone">
          <form>
            <div class="iphone-top">
            <div id="decoration"></div>
            </div>
            <div class="glass">
              <label for="user-input">Enter a Phone Number:</label>
              <input id="user-input"/>
            <div id="results-div">
            </div>
            </div>
            <div class="iphone-buttons">
              <button type="submit" id="check-btn">Check</button>
              <button type="reset" id="clear-btn">Clear</button>
            </div>
          </form>
      </div>
    </main>
    <script src=./script.js></script>
  </body>
<html>

/* file: script.js */
const input = document.getElementById("user-input");
const button = document.getElementById("check-btn");
const clrBtn = document.getElementById("clear-btn");
const results = document.getElementById("results-div");

const numberCheck = () => {
  if (input.value ===""){
    alert("Please provide a phone number")
  } else if (/^1?\s?\(?\d{3}\)?\-?\d{3}\-?\d{4}$/.test(input.value)) {
    results.innerHTML = `Valid US Number: ${input.value}`
  } else {
    results.innerHTML = `InValid US Number: ${input.value}`
  }
}

const reset =() => results.innerHTML = ""

button.addEventListener("click", numberCheck)
clrBtn.addEventListener("click", reset)





/* file: styles.css */
body {
  background: #3a3c50;
}

.flex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  text-align: center;
  color: #FFF;
  width: 80%;
}

.iphone {
  display: flex;
  justify-content: space-around;
  background: #000;
  width: 225px;
  height: 450px;
  border-radius: 10px;
}

#decoration {

  background: #dfdee1;
  width: 10px;
  height: 10px;
  border-radius: 10px
}

.iphone-top {
  display: flex;
  justify-content: space-around;
  margin: 10px;
}

.glass {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #dfdee1;
  width: auto;
  height: 80%;
}


label {
  text-align: center;
  margin: 10px;

}

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

}



.iphone-buttons {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
 

}
button {
 
  font-size: 18px;
  width: 80px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Challenge Information:

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

2

The tests run here. But I recommend double-checking your regex.