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

JavaScript
1

Tell us what’s happening:

i have a problem with the last two tasks, i think that the phone number validator functions correctly, it gets all the other tasks but i have tried many to pass the last two and nothing works. can you help me with this ?

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">
    <link rel="stylesheet" href="styles.css">
    <title>Telephone Number Validator</title>
  </head>
  <body>
    <h1>Telephone Number Validator</h1>
    <div id="phone">
      <div id="cam"></div>
      <div id="screen">
        <label for="user-input">Enter a Phone Number:</label>
        <input id="user-input" type="text">
        <div id="results-div"></div>
      </div>
      <div id="buttons">
      <button id="check-btn">Check</button>
      <button id="clear-btn">Clear</button>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

/* file: styles.css */
:root {
  --color-1: #19a677;
  --color-2: #0eeda3;
  --color-3: #242329;
  --color-4: #d0d1d6;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background-color: var(--color-3); 
  color: linen;
  font-family: helvetica, sans-serif;
}

h1 {
  text-align: center;
  width: 350px;
  margin: 50px auto 0 auto;
  font-size: 38px;
}

#phone {
  width: 250px;
  height: 420px;
  margin: 100px auto 50px auto;
  background-color: black;
  border-radius: 30px;
  padding-top: 0.1px; 
  border: 1px solid linen;
  box-shadow: 0 0 100px 10px var(--color-4);
}

#cam {
  width: 50px;
  height: 10px;
  background-color: var(--color-4);
  margin: 20px auto;
  border-radius: 50px;
}

#screen {
  width: 90%;
  height: 300px;
  margin: 0 auto;
  background-color: var(--color-4);
  color: black;
  padding: 0.1px;
}

#buttons {
  display: flex;
  justify-content: space-evenly;
  margin-top: 15px;
}

button {
  font-size: 18px;
  width: 35%;
  padding: 2px;
  color: linen;
  border: 2px solid linen;
  border-color: linen #626266
  #626266 linen;
  background-color: #6b6b73;
  border-radius: 10px;
  cursor: pointer;
}

button:active {
  border-color: #626266 linen
  linen #626266;
}

label {
  display: block;
  text-align: center;
  margin: 15px 0;
}

#user-input {
  width: 90%;
  height: 40px;
  border-radius: 10px;
  text-align: center;
  font-size: 18px;
  margin: 0 5%;
}

#results-div {
  overflow: auto;
  height: 200px;
  margin: 5px;
}

#valid, #invalid {
  width: 80%;
  font-size: 20px;
  margin: 20px auto;
  text-align: center;
}

#valid {
  color: #08703a;
}

#invalid {
  color: #9e0b1f;
}

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

const phoneNumberChecker = () => {
  if (!userInput.value) {
    alert("Please provide a phone number");
    return;
  }
  const phoneRegex = /^(1|1\s)?(\(\d{3}\)(\s)?|\d{3}(\-|\s)?)\d{3}(\-|\s)?\d{4}$/;
  if (userInput.value.match(phoneRegex)) {
    results.innerHTML += `<p id="valid">Valid US number: ${userInput.value}</p>`;
  } else {
    results.innerHTML += `<p id="invalid">Invalid US number: ${userInput.value}</p>`;
  }
}

checkButton.addEventListener("click", phoneNumberChecker);

clearButton.addEventListener("click", () => {
  results.innerText = "";
});

document.addEventListener("keydown", event => {
  if (event.key === "Enter") {
    phoneNumberChecker();
  }
});

Your browser information:

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

Challenge Information:

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

2

There is a bug in the tests, to overcome it you need to have these four variables in the global scope:

  const userInput = document.getElementById("user-input");
  const checkBtn = document.getElementById("check-btn");
  const clearBtn = document.getElementById("clear-btn");
  const resultsDiv = document.getElementById("results-div");
1 Like