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

JavaScript
1

Tell us what’s happening:

I’m testing hard my code, all valid/invalid numbers that I’m trying are getting the correct response from the application.

However, FCC tests keep mentioning that test-cases 35/36 aren’t fulfilled.

Could someone pls help me understand why it isn’t complying yet?

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="style.css">
</head>
<body>

    <h1>Telephone Number Validator</h1>
    <input type="text" id="user-input" placeholder="Enter US phone number">
    <br>
    <button id="check-btn">Check</button>
    <button id="clear-btn">Clear</button>
    <div id="results-div"></div>

    <script src="script.js"></script>
</body>
</html>


/* file: styles.css */
body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 50px;
}

input {
    padding: 10px;
    width: 250px;
    font-size: 16px;
    margin-bottom: 10px;
}

button {
    padding: 10px;
    font-size: 16px;
    margin: 5px;
    cursor: pointer;
}

#results-div {
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
}


/* file: script.js */
const resultsDiv = document.getElementById("results-div");  // Definido globalmente

document.getElementById("check-btn").addEventListener("click", function() {
    const userInput = document.getElementById("user-input").value.trim();

    if (userInput === "") {
        alert("Please provide a phone number");
        return;
    }

    const isValid = validateUSPhoneNumber(userInput);

    resultsDiv.textContent = `${isValid ? "Valid" : "Invalid"} US number: ${userInput}`;
});

document.getElementById("clear-btn").addEventListener("click", function() {
    document.getElementById("user-input").value = "";
    resultsDiv.textContent = "";
});

function validateUSPhoneNumber(number) {
    const regex = /^(\+?1\s?)?(\(\d{3}\)|\d{3})[\s\-]?\d{3}[\s\-]?\d{4}$/;
    return regex.test(number);
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:135.0) Gecko/20100101 Firefox/135.0

Challenge Information:

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

2

Welcome to the forum :wave:

There is a bug in these tests. Try this: