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

JavaScript
1

Tell us what’s happening:

Please i’m stuck here, my code don’t seem to pass… What could i be doing wrong??

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Telephone Number Validator</title>
<link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main>
      <h1>Telephone Number Validator</h1>
      <div class="phone-container"></div>
      <div class="phone-background"></div>
      <div class="phone-camera"></div>
      <label for="user-input">Enter a Phone Number:</label>
      <input id="user-input" type="text" maxlength="20" />
      <div id="results-div"></div>
      <div class="phone-footer">
        <button class="btn-styles" id="check-btn">Check</button>
        <button class="btn-styles" id="clear-btn">Clear</button>
      </div>
    </main>
    <script src="script.js"></script>
  </body>
  </html>

/* file: styles.css */
.phone-container {
background-color: rgb(59, 59, 79);
align-items: center;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
h1 {
color: blue;
font-family: verdana;
font-size: 200%;
align-items: center;
text-align: center;
}
title {
align-items: center;
text-align: center;
}
h1 {
align-items: center;
text-align: center;
}
.phone-background {
align-items: center;
text-align: center;
}
.phone-camera {
align-items: center;
text-align: center;
}
label {
align-items: center;
text-align: center;
}
input {
align-items: center;
text-align: center;
}
.btn-styles {
align-items: center;
text-align: center;
background-color: silver;
cursor: pointer;
}

/* file: script.js */
const checkBtn = document.getElementById("check-btn");
const clearBtn = document.getElementById("clear-btn");
const userInput = document.getElementById("user-input");
const results = document.getElementById("results-div");
const regex = /^1?[\s\-]?\(?\d{3}\)?[\s\-]?\d{3}[\s\-]?\d{4}$/;

clearBtn.addEventListener("click", (clear) => {
  results.innerText = "";
});

checkBtn.addEventListener("click", (check) => {
  alert("Please provide a phone number");
  if (userInput.value.match(regex)) {
results.innerText = "Valid US number: " + "userInput.value";
} else {
  results.innerText = "Invalid US number: " + "userInput.value";
}
});

Your browser information:

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

Challenge Information:

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

2

Console.log() this bit: userInput.value.match(regex). It probably isn’t returning what you think it does.

Also, is your code fully implementing this? Aren’t you missing something?

  1. When you click on the #check-btn element without entering a value into the #user-input element, an alert should appear with the text "Please provide a phone number".
3

I don’t know if i’m missing anything there… A little explanation would help please

4

did you try the console.log? what does it print?

when does the alert happen? only sometimes? or always?

5

I already figured it out, thank you