Https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/build-a-telephone-number-validator-project/build-a-telephone-number-validator

JavaScript
1

I have a problem. I typed out my code for this project in VS Code since i like it more than the FCC editor, and i god the code to work. But, when i copied the code into FreeCodeCamp, it didn’t work. I am wondering if it’s a formatting issue or if my code might be wrong.

<!DOCTYPE html>
<html>
  <head>
    <title>Phone Number Validator</title>
    <link rel='stylesheet' href='styles.css'>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  </head>
  <body>
    <div id="container">
        <img src="./img/phone.png" alt="phone" id="icon">
        <h1>Phone Number Validator</h1>
        <input id='user-input'
        placeholder='Enter a phone number'><br>
        <button id='check-btn'>Check</button>
        <button id='clear-btn'>Clear</button>
        <div id='results-div'></div>
        <script src='script.js'></script>
    </div>
  </body>
</html>

* {
    margin: 0;
    padding: 0;
}

html {
    box-sizing: border-box;
}

body {
    background: burlywood;
}

#icon {
    width: 250px;
    height: 250px;
}

#container {
    width: 50%;
    height: 70%;
    text-align: center;
    position: absolute;
    left: 25%;
    margin-top: 10%;
}

h1 {
    font-weight: bold;
}

input {
    height: 30px;
    width: 225px;
    border-radius: 12rem;
    text-align: center;
    background: lightgray;
}

button {
    background: lightgray;
    width: 70px;
    border-radius: 12rem;
    margin-top: 2px;
    height: 30px;
}

#results-div {
    background: lightgray;
    height: 50px;
    width: 50%;
    margin-top: 5px;
    margin-left: 25%;
    border-radius: 12rem;
    border: 2px solid black;
}

const checkBtn = document.getElementById('check-btn');
const clearBtn = document.getElementById('clear-btn');
const output = document.getElementById('results-div');


const numberValidation = () => {         
    const userInput = document.getElementById('user-input').value;      /*is not declared at start, that mistake has been made...*/
    const regex = /(1\s)?(\(?555\)?)(-?\s?)(555)(-?\s?)(5555)/g;       /*regex for validating all forms of US phone numbers*/
    valid = regex.test(userInput);                                      /*returns true or false*/
    output.textContent = '';                                        /*tried to get rid of the .textContent everywhere, but failed*/

    
    if (userInput === '') {                                             
        output.textContent = 'Please provide a phone number';       
    } else if (valid) {
        output.textContent = `Valid US number: ${userInput}`
    } else if (valid === false) {
        output.textContent = `Invalid US number: ${userInput}`
    }
};


const clearFields = () => {                                 /*clears input and output boxes*/
    document.getElementById('user-input').value = '';
    output.textContent = '';
};

checkBtn.addEventListener('click', numberValidation);
clearBtn.addEventListener('click', clearFields);
2
  1. You must declare your variables
valid = regex.test(userInput);
  1. alert is a browser function, you call it alert("Some Message")

an alert should appear with the text “Please provide a phone number”.

  1. It looks like some of the tests are not passing with your regex.
3

Thank you so much! Managed to finish the project!

4

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