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

JavaScript
1

Tell us what’s happening:

I’m unable to pass any of the tests, it looks like there is a technical glitch cause I can’t view the CSS sheet as well.

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" />
    <link rel="stylesheet" href="./styles.css" />
    <script src="./script.js"></script>
    <title>Telephone number validator</title>
  </head>
  <body>
    <h1>Telephone number validator</h1>
    <div class="container">
      <div class="phone-background">
          <div class="phone-camera"></div>
        </div>
    <div class="phone-no">
      <label>Enter a phone no:</label>
      <input maxlength="20" type="text" id="user-input" value=""></input>
      </div>
      <div id="results-div"></div>
      <div class="phone-footer">
      <button id="check-btn">Check</button>
      <button id="clear-btn">Clear</button>
      </div>
      </div>
      
    </body>
    </html>


/* file: script.js */
document.getElementById('check-btn')
document.getElementById('clear-btn')

function validateNum(event){
  event.preventDefault();
  const userInput = document.getElementById('user-input').value.trim();
  const result = document.getElementById('result');

if(!userInput){
  alert("Please provide a phone number");
  return;
}

const valid = isValidNum(userInput)
result.textContent = valid? `Valid US number: ${userInput}`:`Invalid US number:${userInput}`
}

function clearResult() {
  document.getElementById('results-div').textContent = '';
}


function isValidUSPhoneNumber(phoneNumber) {
  const regex = /^(1\s?)?(\(\d{3}\)|\d{3})([\s-])?\d{3}([\s-])?\d{4}$/;
  return regex.test(phoneNumber);
}
function clearResult() {
  document.getElementById('results').textContent = '';
}

/* file: styles.css */
.container{
  display:flex;
  background-color: grey;
  width: 250px;
  height: 460px;
  margin:40px auto;
  position: relative;
  flex-direction:column;
  align-items:center;
  border: 12px black solid;
  border-radius:2%;
}

button{
  padding: 8px;
  margin: 12px;
  cursor: pointer;
  font-size: 18px;
    background-color: #ffffff;
    background-image: linear-gradient(#ffffff, #928d86);
    border-color: #ffffff;
    border-width: 3px; 
}
input[type="text"] {
    padding-block: 5px;
    padding-inline: 15px;
    margin:10px;
}
.phone-camera{
  background-color:white;
  width:10px;
  height:10px;
  border-radius:50%;
  align-items:center;
  margin:auto;
}

.phone-background {
    background-color: black;
    width: 100%;
    height: 25px;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
h1 {
    display: block;
    font-size: 2em;
    color: white;
    padding: 10px 25px;
    margin:20px;
}
body {
    background-color: #3b3b4a;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: #0a0a23;
}
#results {
    overflow-y: auto;
    height: 265px;
    width: 100%;
}
.phone-footer {
    background-color: black;
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

label {
  display: block;
  margin-bottom: 10px;
  font-size: 1.2em;
}

Your browser information:

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

Challenge Information:

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

2

remember that the js has to be the last line in your body because it has to load after your page is there already.

I’ll test your code to see why the css is not working…

Edit: i can definitely see the styling when I paste only the html and css in.
You can see none of it?
I also passed the first 4 tests without even pasting in your js code.

3

what will you do with these lines of code? They’re not being stored anywhere and they’re not being listened to?

4

also just saw that you have two functions called clearResult. You should erase the bottom one as it is broken.

1 Like
5

hey, yes I’m working on the js code, I panicked when suddenly the style sheet disappeared

6

I am able to see your styles so is that still a problem.

7

I modified and passed the test!!

2 Likes