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

JavaScript
1

Tell us what’s happening:

My if statement changes from true to false with the same input? It’s a simple if statement and cannot find the reason. Any help would be great, thanks!

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

/* file: styles.css */
body{
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
    background-color: rgb(59, 59, 79);
}


.title{
    text-align: center;
    margin-top: 6rem;
    margin-bottom: 4rem;
    font-weight: 900;
    color: white;
}

main{
    display: flex;
    align-items: center;
    justify-content: center;
}

.phone{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 20%;
    min-width: 250px;
    height: 60vh;
    background-color: black;
    border-radius: 20px;
}

.camera{
    background-color: rgb(129, 125, 142);
    height: 12px;
    width: 12px;
    margin-bottom: 1rem;
    border-radius:50%;
}

.screen{
    background-color: rgb(129, 125, 142);
    height: 45vh;
    width: 80%;
    overflow: hidden;
}

.buttons{
    margin-top: 1rem;
    align-items: center;
    justify-content: space-between;
}

.input h2{
    text-align: center;
    color: white;
}

.input {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.input input{
    width: 80%;
    border-radius: 5px;
    height: 30px;
}

button{
    background-color: antiquewhite;
}

.results{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    margin-top: 1rem;
}

.result-text{
    display: flex;
    margin: 0;
    text-align: center;
    margin-bottom: 1rem;
}





/* file: script.js */
let input = document.getElementById("user-input");
const checkButton = document.getElementById("check-btn");
const clearButton = document.getElementById("clear-btn");
const results = document.getElementById("results-div");

const numberRegex = /^[+]*([1]{0,1})([(]{1}[0-9]{1,3}[)]{1})[-\s\./0-9]*$/g;
const numberRegex2 = /^[+]*([1]{0,1})([(]{0}[0-9]{1,3}[)]{0})[-\s\./0-9]*$/g;

const removeSpaces = (string) => {
    convertedString = String(string);
    array = convertedString.split(" ");
    return array.join("");
}

const check = () => {
    const number = numberRegex.test(removeSpaces(input.value));
    const number2 = numberRegex2.test(removeSpaces(input.value));
    if (number === true || number2 === true){
        return true;
    }
}

const showAnswer = () => {
    if (input.value === '')
        {return empty()}
    else if (check() === true)
        {return validNumber(input.value)}
    else {return invalidNumber(input.value)}
}

const clear = () => {results.innerHTML = ''
}

const empty = () => alert("Please provide a phone number")

const validNumber = (arg) => {results.innerHTML += `<p class=valid-result>Valid US Number: <br>
${arg}</p>`
input.value = ''}


const invalidNumber = (arg) => {results.innerHTML += `<p class=invalid-result>Invalid US Number: <br>
${arg}</p>`
input.value = ''
}

clearButton.addEventListener('click', clear)
checkButton.addEventListener('click', showAnswer)

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.1 Safari/605.1.15

Challenge Information:

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

2

don’t use the g flag with test

1 Like
3

Thanks Ilenia, you’re a legend :+1:

1 Like
4

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