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

Tell us what’s happening:

my TP validation test cases keep failing I cannot figure out why, when I run this in vs code it works fine and gives the expected results. i checked the console there is no error either, please help

Your code so far

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Telephone Number Validator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
    <div id="top">
        <p>Telephone Number Validator</p>
    </div>
    <div id="middle">
        <label for="user-input">Enter Phone Number</label><input type="text" id="user-input">
        <button type="submit" id="check-btn">Check</button>
        <button type="reset" id="clear-btn" onclick="clearResult()">Clear</button>
    </div>
    <div id="results-div">

    </div>
</main>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css */
body{
    background-color: rebeccapurple;
    font-family: Bahnschrift, serif;

}
body:hover{
    cursor: default;
}
main{
    margin-top: 50px;
    display: grid;
    grid-template-rows:100px 1fr 1fr;
    justify-content: center;


}
#top{
    display: flex;
    font-size: 30px;
    color: white;
    font-weight: bolder;
    justify-content: center;
}

#middle{
    background-color: #a88fd3;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 30px;
    width: 600px;
    height: 220px;
    padding-top: 20px;
    border-style: solid;
    filter: drop-shadow(0 0 5px black);
}
#user-input{
    font-size: 20px;
    width: 500px;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 40px;
}
#user-input:hover{
    filter: drop-shadow(0 0 1px white);
}
#check-btn, #clear-btn{
    font-size: 16px;
    width: 510px;
    padding: 10px;
    background-color: orange;
    border: none;
}
#clear-btn{
    margin-top: 10px;
}
#check-btn:hover, #clear-btn:hover{
    cursor: pointer;
    filter: drop-shadow(0 0 2px orange);
    text-shadow: 0 0 1px black;
}

#result-div{
    align-items: center;
    font-size: 20px;
    color: white;
    margin-top: 20px;
    text-align: center;
}
/* file: script.js */
function renderArray() {
    let tpArray = JSON.parse(localStorage.getItem('tpArray')) || [];
    let resultsDiv = document.getElementById('results-div');
    resultsDiv.innerHTML = '';
    tpArray.forEach((entry) => {
        let result = document.createElement('p');
        result.textContent = `${entry.isValid ? 'Valid US Number' : 'Invalid US Number'} : ${entry.phoneNumber} `;
        resultsDiv.appendChild(result);
    });
}

window.onload = function () {
    renderArray();
};

function tpValidation() {
    let tpArray = JSON.parse(localStorage.getItem('tpArray')) || [];
    let phoneNumber = document.getElementById("user-input").value;
    let phonePattern = /^(1\s?)?(\(\d{3}\)|\d{3})[- .]?\d{3}[- .]?\d{4}$/;

    if (phonePattern.test(phoneNumber)) {
        tpArray.push({phoneNumber: phoneNumber, isValid: true});

    } else {
        tpArray.push({phoneNumber: phoneNumber, isValid: false});
    }

    document.getElementById('user-input').value = '';
    let resultsDiv = document.getElementById('results-div');
    resultsDiv.innerHTML = '';

    tpArray.forEach((entry) => {
        let result = document.createElement('p');
        result.textContent = `${entry.isValid ? 'Valid US number' : 'Invalid US number'} : ${entry.phoneNumber} `;
        resultsDiv.appendChild(result);
    });

    localStorage.setItem('tpArray', JSON.stringify(tpArray));
}

function clearResult() {
    document.getElementById('results-div').innerHTML = '';
    localStorage.removeItem('tpArray');
}

let checkButtonEvent = document.getElementById('check-btn');
let userInput = document.getElementById('user-input');
checkButtonEvent.addEventListener('click', (e) => {
    if (userInput.value === '') {
        alert("Please provide a phone number");
    } else {
        tpValidation();
    }
});

userInput.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
        if (userInput.value === '') {
            alert("Please provide a phone number");
        } else {
            tpValidation();
        }
    }
});

Your browser information:

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

Challenge Information:

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

What do the failing tests say?

  • When the #user-input element contains 1 555-555-5555 and the #check-btn element is clicked, the #results-div element should contain the text "Valid US number: 1 555-555-5555".

  • Failed:When the #user-input element contains 1 (555) 555-5555 and the #check-btn element is clicked, the #results-div element should contain the text "Valid US number: 1 (555) 555-5555".

  • Failed:When the #user-input element contains 5555555555 and the #check-btn element is clicked, the #results-div element should contain the text "Valid US number: 5555555555".

  • Failed:When the #user-input element contains 555-555-5555 and the #check-btn element is clicked, the #results-div element should contain the text "Valid US number: 555-555-5555".

  • Failed:When the #user-input element contains (555)555-5555 and the #check-btn element is clicked, the #results-div element should contain the text "Valid US number: (555)555-5555".

  • Failed:When the #user-input element contains 1(555)555-5555 and the #check-btn element is clicked, the #results-div element should contain the text "Valid US number: 1(555)555-5555".

  • Failed:When the #user-input element contains 555-5555 and the #check-btn element is clicked, the #results-div element should contain the text "Invalid US number: 555-5555".

  • Failed:When the #user-input element contains 5555555 and the #check-btn element is clicked, the #results-div element should contain the text "Invalid US number: 5555555".

  • Failed:When the #user-input element contains 1 555)555-5555 and the #check-btn element is clicked, the #results-div element should contain the text "Invalid US number: 1 555)555-5555".

  • Failed:When the #user-input element contains 1 555 555 5555 and the #check-btn element is clicked, the #results-div element should contain the text "Valid US number: 1 555 555 5555".

  • Failed:When the #user-input element contains 1 456 789 4444 and the #check-btn element is clicked, the #results-div element should contain the text "Valid US number: 1 456 789 4444".

  • Failed:When #user-input contains 123**&!!asdf# and #check-btn is clicked, #results-div should contain the text "Invalid US number: 123**&!!asdf#".

  • Failed:When the #user-input element contains 55555555 and the #check-btn element is clicked, the #results-div element should contain the text "Invalid US number: 55555555".

  • Failed:When the #user-input element contains (6054756961) and the #check-btn element is clicked, the #results-div element should contain the text "Invalid US number: (6054756961)".

  • Failed:When the #user-input element contains 2 (757) 622-7382 and the #check-btn element is clicked, the #results-div element should contain the text "Invalid US number: 2 (757) 622-7382".

  • Failed:When the #user-input element contains 0 (757) 622-7382 and the #check-btn element is clicked, the #results-div element should contain the text "Invalid US number: 0 (757) 622-7382".

  • Failed:When the #user-input element contains -1 (757) 622-7382 and the #check-btn element is clicked, the #results-div element should contain the text "Invalid US number: -1 (757) 622-7382".

  • Failed:When the #user-input element contains 2 757 622-7382 and the #check-btn element is clicked, the #results-div element should contain the text "Invalid US number: 2 757 622-7382".

  • Failed:When the #user-input element contains 10 (757) 622-7382 and the #check-btn element is clicked, the #results-div element should contain the text "Invalid US number: 10 (757) 622-7382".

  • Failed:When the #user-input element contains 27576227382 and the #check-btn element is clicked, the #results-div element should contain the text "Invalid US number: 27576227382".

  • Failed:When the #user-input element contains (275)76227382 and the #check-btn element is clicked, the #results-div element should contain the text "Invalid US number: (275)76227382".

  • Failed:When the #user-input element contains 2(757)6227382 and the #check-btn element is clicked, the #results-div element should contain the text "Invalid US number: 2(757)6227382".

  • Failed:When the #user-input element contains 2(757)622-7382 and the #check-btn element is clicked, the #results-div element should contain the text "Invalid US number: 2(757)622-7382".

  • Failed:When the #user-input element contains 555)-555-5555 and the #check-btn element is clicked, the #results-div element should contain the text "Invalid US number: 555)-555-5555".

  • Failed:When the #user-input element contains (555-555-5555 and the #check-btn element is clicked, the #results-div element should contain the text "Invalid US number: (555-555-5555".

  • Failed:When #user-input contains (555)5(55?)-5555 and #check-btn is clicked, #results-div should contain the text "Invalid US number: (555)5(55?)-5555".

  • Failed:When the #user-input element contains 55 55-55-555-5 and the #check-btn element is clicked, the #results-div element should contain the text "Invalid US number: 55 55-55-555-5".

  • Failed:When the #user-input element contains 11 555-555-5555 and the #check-btn element is clicked, the #results-div element should contain the text "Invalid US number: 11 555-555-5555".

these are the test cases that fail, in the console there is no error :frowning:

It looks like you might have an extra space before the colon in your rendered results.

1 Like

when i remove the extra space * When the #user-input element contains 1 555-555-5555 and the #check-btn element is clicked, the #results-div element should contain the text "Valid US number: 1 555-555-5555". this test cased passed but other remain the same. consol has no errors

Hey! Seems like I am having exactly same issue as you. Have you found a solution? Mine works when run from VSCode, all inputs for test cases return the expected value. However I am facing same issues when running test cases in FCC UI. Let me know please!