Build a Telephone Number Validator

JavaScript
1

I tested my clear button, and it works, but the overall test failed. Could anyone please let me know what I might be missing?

6. When you click on the #clear-btn element, the content within the #results-div element should be removed.

***HTML***
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a Telephone Number Validator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Telephone Number Validator</h1>
        <div class="mobile">
            <div class="front_camera"></div>
            <div class="screen">
                <label for="user-input">Enter a Phone Number:</label>
                <input type="text" id="user-input">
                <div class="button__container">
                    <button id="check-btn" class="buttons">Check</button>
                    <button id="clear-btn" class="buttons">Clear</button>
                </div>
                <div id="results-div">

                </div>
            </div>
            <div class="home_button"></div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

***CSS***
* {
    box-sizing: border-box;
    font-family: "Poppins", Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;

    min-height: 100vh;
}

.container {
    width: clamp(40%, 550px, 90%);
}

.container > h1 {
    text-align: center;
    margin-bottom: 2rem;
}

.mobile {
    width: 42%;
    height: 420px;

    border-radius: 35px;
    background: #000;

    margin: 0 auto;
    padding: 1rem;
}

.front_camera {
    width: .8rem;
    height: .8rem;

    border-radius: 50%;
    background: #fff;

    margin: 0 auto 1rem auto;
}

.screen {
    overflow-y: auto;

    width: 100%;
    height: 80%;
    
    background: #dfdfe2;

    margin-bottom: 1rem;
    padding: 1rem 1rem 0 1rem;
}

.screen > label {
    display: block;

    font-weight: bold;
    text-align: center;
    letter-spacing: .6px;

    margin-bottom: 1rem;
}

#user-input {
    font-size: 1rem;
    letter-spacing: 1px;

    width: 100%;

    outline: none;
    border: none;
    border-radius: 10px;
    
    margin-bottom: 1rem;
    padding: .2rem 2rem .2rem 2rem;
}

.button__container {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 1rem;
}

.buttons {
    font-size: .7rem;

    width: 4.5rem;
    height: 1.3rem;
}

p {
    font-size: .9rem;
    text-align: center;
    letter-spacing: .5px;
    
    margin: 1rem 0;
}

.home_button {
    width: 2rem;
    height: 2rem;

    border: 1px solid #fff;
    border-radius: 50%;

    margin: 0 auto;
}

***JavaScript***
const inputElem = document.querySelector("#user-input");
const resultsElem = document.querySelector("#results-div");
const checkButtonELem = document.querySelector("#check-btn");
const clearButtonElem = document.querySelector("#clear-btn");

function showResult(result) {
    clearInput();

    const pElem = document.createElement("p");

    pElem.classList.add("result");
    pElem.textContent = result;
    resultsElem.appendChild(pElem);
}

function validatePhoneNumber(phoneNumber) {
    const validate = /^(1\s?)?(\d{3}|\(\d{3}\))(-|\s)?\d{3}(-|\s)?(\d{4})$/;
    return validate.test(phoneNumber);
}

function clearInput() {
    if (inputElem.value === "") return
    inputElem.value = "";
}

function clearResults() {
    const pElems = document.querySelectorAll(".result");

    if (pElems) {
        pElems.forEach(pElem => resultsElem.removeChild(pElem));
    }
}

function checkPhoneNumber() {
    const phoneNumber = inputElem.value;

    if (phoneNumber === "") return alert("Please provide a phone number");
    if (validatePhoneNumber(phoneNumber)) return showResult(`Valid US number: ${phoneNumber}`);
    showResult(`Invalid US number: ${phoneNumber}`);
}

function onKeyUp(event) {
    const phoneNumber = inputElem.value;

    if (event.key === "Enter") {
        if (phoneNumber === "") return alert("Please provide a phone number");
        if (validatePhoneNumber(phoneNumber)) return showResult(`Valid US number: ${phoneNumber}`);
        showResult(`Invalid US number: ${phoneNumber}`);
    };
}

function run() {
    inputElem.addEventListener("keyup", onKeyUp);
    checkButtonELem.addEventListener("click", checkPhoneNumber);
    clearButtonElem.addEventListener("click", clearResults);
}

run();
2

Please edit the post to include a link to the challenge

1 Like
3

Hi. You have lot of unnecessary code in your clearResults function. I changed your function to 2 lines and it passed. I changed the Input value and the results div element inner HTML. Change both to empty strings.

1 Like
4

The test doesn’t add elements using the UI, it just adds some text to the results-div element. Your clear code depends on elements with a class.

It would be easier anyway to just clear everything inside results-div by setting its HTML content to an empty string.

1 Like
6

Challenge Information:

Build a Telephone Number Validator Project

7

Sorry, this is my first time creating a post. I’ve attached the link for you to review.

8

Thank you very much. I tried doing what you told me and it worked.

9

That’s clear, thank you very much! I tried changing it to innerHTML, and it worked with just one line.

10

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