Tell us what’s happening:
Ive passed every test that doesn’t check for telephone number validation. I’ve only passed 1 telephone number validation, which is the first number to be tested. I’ve tested most of the other telephone numbers manually and it worked as expected. I don’t understand why the other tests still fail. Is it my formatting?
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Telephone number validator</title>
<link href="styles.css" rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
</head>
<body>
<div id="bezel">
<div id="screen">
<div id="sec">
<input id="user-input" placeholder="Number"></input>
<button id="check-btn">Check Number</button>
</div>
<div id="results-div"></div>
</div>
<button id="clear-btn">Clear History</button>
</div>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
const userInput = document.getElementById("user-input");
const checkBtn = document.getElementById("check-btn");
const clearBtn = document.getElementById("clear-btn");
const regex = /^1?\s?((\d{3})|\((\d{3})\))[-\s]?(\d{3})[-\s]?(\d{4})$/
const resultsDiv = document.getElementById("results-div");
let results = ''
const process = () => {
const input = userInput.value;
if (input) {
newEntry(regex.test(input), input);
userInput.value='';
return;
} else {
alert("Please provide a phone number")
}
}
const newEntry = (bool, number) =>{
results+=`
<p>${bool?"Valid US number: ":"Invalid US number: "} ${number}</p>`;
resultsDiv.innerHTML = results;
console.log(results);
}
checkBtn.addEventListener("click", process);
clearBtn.addEventListener("click", ()=>{
resultsDiv.innerHTML = '';
results = '';
})
/* file: styles.css */
*{
font-family: Montserrat;
}
#bezel {
background-color: rgba(57, 57, 57, 0.8);
width: 450px;
height: 800px;
margin: auto;
padding: 10px;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center; /* Center items horizontally */
}
#screen {
background-color: black;
width: 95%;
height: 90.5%;
border-radius: 5px;
padding: 5px;
justify-content: space-evenly;
}
#sec{
display:flex;
align-items: center;
height: 100px;
background-color: orange;
}
#user-input,
#check-btn {
height: 50%;
margin: 10px;
}
#clear-btn {
border-radius: 20px;
width: 20%;
align-self: center; /* Ensure it aligns within the flex container */
margin-top:14px;
}
#results-div>p{
color:white;
margin-left: 14%;
font-size: 30px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36 OPR/114.0.0.0
Challenge Information:
Build a Telephone Number Validator Project - Build a Telephone Number Validator
