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

JavaScript
1

Tell us what’s happening:

I have my user input on the global scale and the code is working fine, but I can’t pass the last two objectives that require either the valid or invalid message to be followed by the number. This is for the telephone number validator project.

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">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Anton&family=Raleway:ital,wght@0,100..900;1,100..900&family=Titan+One&display=swap" rel="stylesheet">
    <title>Telephone Number Validator</title>
  </head>
  <body>
    <header>
      <h1>Telephone Number Validator</h1>
    </header>
    <div class="user-container">
      <label for="user-input">
        <input id="user-input" />
      </label>
      <button id="check-btn">Check</button><button id="clear-btn">Clear</button>
      <div id="results-div" class="results-div hide"></div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

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

const validator = input => {
  const regex = /(^\d{3}(\s|-)?\d{3}(\s|-)?\d{4}$)|(^\(\d{3}\))(\s|-)?\d{3}(\s|-)?\d{4}$/g;
  
  return regex.test(input);
}

const telephoneChecker = input => {
  if (input.startsWith("1")) {
    const newInput = input.replace("1", "").trim();
    return valid = validator(newInput);
  } else {
    return valid = validator(input);
  }
}

const cleanInputString = (str) => {
  const regex = /[^\d\s\(\)-]+/g;
  return str.replace(regex, "");
}

const clearResults = () => {
  results.textContent = "";
  results.classList.add('hide');
}

const isValidInput = (input) => {
  const cleanedStr = cleanInputString(input);

  results.textContent = telephoneChecker(cleanedStr) ? `Valid US number: ${userInput.value}` : `Invalid US number: ${userInput.value}`;
  results.classList.remove('hide');
}

checkBtn.addEventListener("click", () => {
  userInput.value === "" ? alert("Please provide a phone number") : isValidInput(userInput.value)
});

clearBtn.addEventListener("click", clearResults);

userInput.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    isValidInput(userInput.value)
  }
})

/* file: styles.css */
*, 
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --background: #3a4b51;
  --container: #ffff;
  --button: #63828d;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Raleway;
  padding: 100px 50px;
  width: 100vw;
  font-size: 25px;
  text-align: center;
  background-color: var(--background);
}

header {
  width: 400px;
  min-width: 350px;
}

.user-container {
  background-color: white;
  margin: 50px;
  padding: 10px;
  width: 500px;
  min-width: 40%;
  border: 3px solid red;
  border-radius: 15px;
}

h1 {
  font-size: 40px;
  text-align: center;
}

input {
  display: block;
  background-color: var(--background);
  width: 90%;
  margin: 30px auto;
  height: 50px;
  font-size: 40px;
}

button {
  display: inline-block;
  width: 150px;
  height: 35px;
  margin: 0 25px;
  min-width: 100px;
  font-size: 30px;
  font-family: inherit;
  background-color: var(--button);
  border-radius: 10px;
}

button:hover {
  transform: scale(1.2)
}

#results-div {
  font-size: 35px;
  margin: 10px auto;
  padding: 10px;
  min-width: 90%;
}

#hide {
  display: none;
}

header,
.input-container,
#output {
  background-color: var(--secondary);
  border-radius: 4px;
}

Your browser information:

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

Challenge Information:

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

2

you are using “results” for “#result-div” but i suspect code checker is expecting this to be named “something different”, in console it shows its “missing a variable called resultsDiv”, when i changed “results to resultsDiv” that eroor goes away but other “reference based errors pops up”

perhaps looking into that would be useful, happy coding :slight_smile:

3

Check out this forum post

4

Thank you but this only cleared up only one of the issues but not the other for some reason even though it should’ve done both. I’ve tried copying the text as is but the last test won’t clear.

5

I have the exact same variables as global variables.

6

can you share your updated code?

the 4 global variables are needed to overcome the bug in the tests, but they are not able to do much if there are issues with your code, but now the tests work so your code can be tested

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

const validator = input => {
  const regex = /(^\d{3}(\s|-)?\d{3}(\s|-)?\d{4}$)|(^\(\d{3}\))(\s|-)?\d{3}(\s|-)?\d{4}$/g;
  
  return regex.test(input);
}

const telephoneChecker = input => {
  if (input.startsWith("1")) {
    const newInput = input.replace("1", "").trim();
    return validator(newInput);
  } else {
    return validator(input);
  }
}

const cleanInputString = (str) => {
  const regex = /[^\d\s\(\)-]+/g;
  return str.replace(regex, "");
}

const clearResults = () => {
  resultsDiv.textContent = "";
  resultsDiv.classList.add('hide');
}

const isValidInput = (input) => {
  const cleanedStr = cleanInputString(input);

  /*resultsDiv.textContent = telephoneChecker(cleanedStr) ? `Valid US number: ${userInput.value}` : `Invalid US number: ${userInput.value}`;*/
  resultsDiv.textContent = `${telephoneChecker(cleanedStr) ? `Valid` : `Invalid`} US number: ${userInput.value}`;
  resultsDiv.classList.remove('hide');
}

checkBtn.addEventListener("click", () => {
  userInput.value === "" ? alert("Please provide a phone number") : isValidInput(userInput.value)
});

clearBtn.addEventListener("click", clearResults);

userInput.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    isValidInput(userInput.value)
  }
})
8

I have added a couple console logs to check what numbers are being tested and how your code classify them
this doesn’t seem correct:

Valid US number: 1!(772)657-9539
1 Like
9

Thanks for this, I’ve figured out the issue!!!