Build a Telephone Number Validator

Tell us what’s happening:

Describe your issue in detail here.

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>US Phone Number Checker</title>
</head>
<body>
    <div class="container">
        <label for="user-input">Enter a US phone number:</label>
        <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;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    text-align: center;
}

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

/* file: script.js */
document.getElementById('check-btn').addEventListener('click', function () {
    const userInput = document.getElementById('user-input').value;
    const resultsDiv = document.getElementById('results-div');
    resultsDiv.innerText = '';

    if (userInput === '') {
        alert('Please provide a phone number');
    } else {
        const isValid = validateUSPhoneNumber(userInput);

        if (isValid) {
            resultsDiv.innerText = `Valid US number: ${userInput}`;
        } else {
            resultsDiv.innerText = `Invalid US number: ${userInput}`;
        }
    }
});

document.getElementById('clear-btn').addEventListener('click', function () {
    document.getElementById('results-div').innerText = '';
    document.getElementById('user-input').value = '';
});

function validateUSPhoneNumber(phoneNumber) {
    // Updated regex to handle various formats with optional spaces, hyphens, and parentheses
    const regex = /^1?[\s\-]?\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/;
    return regex.test(phoneNumber);
}



Your browser information:

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

Challenge Information:

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

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.