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.
    Failed:36. 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.

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>
    <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>
        <p id="results-div"></p>
    </div>
    <script>
        document.getElementById('check-btn').addEventListener('click', function() {
            const userInput = document.getElementById('user-input').value.trim();
            const resultDiv = document.getElementById('results-div');
            
            if (!userInput) {
                alert("Please provide a phone number");
                return;
            }
            
            const validPhoneRegex = /^(1\s?)?(\(\d{3}\)|\d{3})[\s-]?\d{3}[\s-]?\d{4}$/;
            
            if (validPhoneRegex.test(userInput)) {
                resultDiv.textContent = `Valid US number: ${userInput}`;
                resultDiv.style.color = "green";
            } else {
                resultDiv.textContent = `Invalid US number: ${userInput}`;
                resultDiv.style.color = "red";
            }
        });
        
        document.getElementById('clear-btn').addEventListener('click', function() {
            document.getElementById('results-div').textContent = "";
            document.getElementById('user-input').value = "";
        });
    </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: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 300px;
}

h2 {
    color: #333;
}

input {
    width: 100%;
    padding: 8px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

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

#check-btn:hover {
    background-color: #218838;
}

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

#clear-btn:hover {
    background-color: #c82333;
}

#results-div {
    margin-top: 15px;
    font-size: 14px;
    color: #333;
    font-weight: bold;
}


/* file: script.js */
document.getElementById("check-btn").addEventListener("click", function () {
    let userInput = document.getElementById("user-input").value;

    let resultsDiv = document.getElementById("results-div");

    if (!userInput.trim()) {
        alert("Please provide a phone number");
        return;
    }

    const validUSNumberPattern = /^(1\s?)?(\(\d{3}\)|\d{3})[\s-]?\d{3}[\s-]?\d{4}$/;

    if (validUSNumberPattern.test(userInput)) {
        resultsDiv.textContent = `Valid US number: ${userInput}`; // Keep userInput unchanged
    } else {
        resultsDiv.textContent = `Invalid US number: ${userInput}`;
    }
});

document.getElementById("clear-btn").addEventListener("click", function () {
    document.getElementById("results-div").textContent = "";
});

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

Check out this forum post