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

JavaScript
1

Tell us what’s happening:

The clearBtn.addEventListener is working. I am able to remove the content within the result div.

However when I run the test, it does not qualify the number 6 requirement, which is to remove the content from the result div. Is my code not considered since it is quite different from the example project? Mine doesn’t store the numbers inputted, but mine clears the input when inputted once, even just putting string on the input w/out checking clears it.

Your code so far

/* file: script.js */
const clearBtn = document.getElementById('clear-btn');
clearBtn.addEventListener('click', clearFields);

function clearFields() {
  execTime = 0;
  const input = userInput.value.trim();
  if (!input) {
    return null
  } else if (execTime === 0){
    userInput.value = '';
    userInput.classList.remove('hidden')
  } else {
    toggleInputVisibility();
  }
  validatorText.textContent = 'ENTER A PHONE NUMBER:';
  userInput.value = '';
  resultDiv.textContent = '';
}


/* file: index.html */
<!DOCTYPE html>
<html>
  <head lang="en">
    <title>American Telephone Number Validator</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
  
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Doto:wght@900&display=swap" rel="stylesheet">
  </head>

  <body>
    <div class="head-container">
      <p>AMERICAN TELEPHONE NUMBER VALIDATOR</p>
    </div>
    <div class="main-container">

      <div class="phone-container"> 
          <div class="phone"></div>  
          <div class="top"></div>
          <div class="top2"></div>
          <div class="top3"></div>
          <div class="middle"></div>
          <div class="bottom"></div>
      </div>

      <div class="column-container">
        <div class="display-container">
          <div class="screen">
            <p id="validator">ENTER A PHONE NUMBER:</p>
            <input id="user-input">
            <div id="results-div">
            </div>    
          </div>
        </div>
        <div class="digits-container">
          <div class="keypad">
            <div class="upper-keypad">
              <button id="check-btn">Check</button>
              <button id="clear-btn">Clear</button>
            </div>
            <div class="numbers">
              <div class="keys">
                <!- Keypad Number Buttons -->
            </div>
          </div>
        </div>
        <div class="coin-container">
          <div class="dot"></div>
          <div class="coin-return"></div>
        </div>
      </div>
      
    </div>
    <script src="script.js"></script>
  </body>
</html>

Challenge Information:

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

2

Could you share your HTML as well? It’s required to accurately reproduce the state.

3

Where are you adding the event listener? I’m not seeing it in the shared code.

4

Can you post your variable declarations for results-div and userInput?

Assuming they are correctly done, I think you only need these 2 lines in your clearfields function to clear user story 6:

userInput.value = ‘’;
resultDiv.textContent = ‘’;

I can see an addEvent Listener with a click and linking to the function but it needs to be at the end of the code not the start. InnerHTML works also instead of textContent.
userInput.value = ‘’;
resultDiv.textContent = ‘’;

5 
const checkBtn = document.getElementById('check-btn');
const clearBtn = document.getElementById('clear-btn');
const resultDiv = document.getElementById('results-div');
const validatorText = document.getElementById('validator');
const userInput = document.getElementById('user-input');
const buttons = document.querySelectorAll('.numbers button');
let execTime = 0;

function validator() {
  const input = userInput.value.trim();
  const countryCode = '^(1\\s?)?';
  const areaCode = '(\\([0-9]{3}\\)|[0-9]{3})';
  const spacesDashes = '[\\s\\-]?';
  const phoneNumber = '[0-9]{3}[\\s\\-]?[0-9]{4}$';
  const phoneRegex = new RegExp(`${countryCode}${areaCode}${spacesDashes}${phoneNumber}`)

  if (!input) {
    alert('Please provide a phone number');
    return
  } else if (execTime === 1) {
    return null;
  } else {
    validatorText.textContent = `${phoneRegex.test(input) ? 'Valid' : 'Invalid'} US number:`;
    userInput.classList.toggle('hidden');
    resultDiv.innerHTML = `<p>${input}</p>`;
  }
}

function clearFields() {
  execTime = 0;
  const input = userInput.value.trim();
  if (!input) {
    return;
  }
  userInput.value = '';
  userInput.classList.remove('hidden')
  validatorText.textContent = 'ENTER A PHONE NUMBER:';
  resultDiv.innerHTML = '';
}

userInput.addEventListener("keydown", (e) => {
  if (e.key === "Enter"){
    if (execTime === 1){
      clearBtn.classList.add('active');
      clearFields();
      setTimeout(() => clearBtn.classList.remove('active'), 100);
      execTime = 0;
      console.log(execTime)
    } else if (execTime === 0) {
      checkBtn.classList.add('active');
      validator();  
      setTimeout(() => checkBtn.classList.remove('active'), 100);
      execTime = 1;
      console.log(execTime)
      }
    }
});

checkBtn.addEventListener('click', validator);
clearBtn.addEventListener('click', clearFields);
6

Can you please put 3 backticks before and after your code to format it. When I put your HTML and JS in it had a lot of formatting errors with the single quotes and backslashes.

However, your clearfields function only needs this for it to pass:

userInput.value = ‘’;
resultDiv.innerHTML = ‘’;

Can you remove everything else? it is possibly an issue that your existing function has a return within the first if statement so nothing is happening after that. I can also see there is a missing ; after (‘hidden’) but again the user story 6 doesn’t require that.

1 Like
7

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

You have a conditional inside clearFields that is preventing the test from passing. The clear button should not depend on the content of the input element.

2 Likes
8

Thanks to @lasjorg for formatting your code and explaining why it wasn’t working. Yes if you make the changes I suggested, story 6 should pass.