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

JavaScript
1

Tell us what’s happening:

  1. When the #user-input element contains a valid US number and the #check-btn element is clicked, the #results-div element should contain the text "Valid US number: " followed by the number.
  2. When the #user-input element contains an invalid US number and the #check-btn element is clicked, the #results-div element should contain the text "Invalid US number: " followed by the number.

Everything works fine but this 2 are not checked as correct.

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">
  <title>Telephone Number Validator</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Telephone Number Validator</h1>
    <input type="text" id="user-input" placeholder="Enter a US phone number">
    <button id="check-btn">Check</button>
    <button id="clear-btn">Clear</button>
    <div id="results-div"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

/* file: styles.css */
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

h1 {
  margin-bottom: 20px;
}

input {
  width: 80%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 10px 20px;
  margin: 5px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#check-btn {
  background-color: #28a745;
  color: white;
}

#clear-btn {
  background-color: #dc3545;
  color: white;
}

#results-div {
  margin-top: 20px;
  font-size: 1.2em;
}

/* file: script.js */
document.addEventListener("DOMContentLoaded", () => {
  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 validatePhoneNumber = (phoneNumber) => {
    // Regex to match valid US phone numbers
    const regex = /^(1\s?)?(\(\d{3}\)|\d{3})[\s\-]?\d{3}[\s\-]?\d{4}$/;
    return regex.test(phoneNumber);
  };

  checkBtn.addEventListener("click", () => {
    const inputValue = userInput.value.trim();

    if (!inputValue) {
      alert("Please provide a phone number");
      return;
    }

    if (validatePhoneNumber(inputValue)) {
      resultsDiv.textContent = `Valid US number: ${inputValue}`;
      resultsDiv.style.color = "#28a745"; // Green color for valid
    } else {
      resultsDiv.textContent = `Invalid US number: ${inputValue}`;
      resultsDiv.style.color = "#dc3545"; // Red color for invalid
    }
  });

  clearBtn.addEventListener("click", () => {
    userInput.value = "";
    resultsDiv.textContent = "";
  });
});

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) 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

these needs to go in the global scope for the bug in the tests to be overcome

3

To add to that, here’s what @lasjorg had to say about using document.addEventListener("DOMContentLoaded"...

If your script element is after the page content, wrapping the code in a DOMContentLoaded event doesn’t really do much, other than create a function scope, which you may or may not want or need.

Variables declared using const and let never end up on the global object, so the function scope created by the event listener isn’t super useful.

4

It was so simple I couldnt see :joy: