Tell us what’s happening:
My code works perfectly. I am so confused as to why it won’t let me pass. Every single test is successful except the final one ‘When the #user-input element contains an invalid US number and the #check-btn element is clicked, the #results-div element should contain the text "Invalid US number: " followed by the number’. My code has exactly that. And it passes the valid check so, what is happening here?
Your code so far
<!DOCTYPE html>
<html lang='en'>
<main>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Telephone Number Validator</title>
</main>
<body>
<div id="logo-container">
<img src="https://i.ibb.co/mG8y443/the-MEGA-company-black-font.png" alt="the-MEGA-company-black-font" border="0" />
</div>
<h2>Telephone Number Validator</h3>
<div id="phone-container" class="phone">
<div id="phone-camera" class="phone"></div>
<form>
<label>Enter a Phone Number:</label>
<input id="user-input" type="text"></input>
<div id="results-div">
<p></p>
</div>
</form>
<button id="check-btn">Check</button>
<button id="clear-btn">Clear</button>
</div>
<script src="./script.js"></script>
</body>
</html>
const userInput = document.getElementById('user-input');
const clearBtn = document.getElementById('clear-btn');
const checkBtn = document.getElementById('check-btn');
const results = document.getElementById('results-div');
let singleParentheses = false;
let pairParentheses = false;
let validNumber = false;
clearBtn.addEventListener('click', () => {
results.innerText = '';
userInput.value = '';
})
const cleanInputStr = (str) => {
const regex = /\(\s*\)|[^\d\(\)]/gu;
return str.replace(regex, '');
}
const checkFalseStart = () => {
if (userInput.value.split('')[0] === '-') {
return true;
}
}
const checkSingleParentheses = () => {
const numberArray = cleanInputStr(userInput.value).split('');
if (numberArray.some(number => number === ')') && numberArray.some(number => number === '(')) {
return false;
} else if (numberArray.some(number => number === '(') && numberArray.some(number => number !== ')')) {
return true;
} else if (numberArray.some(number => number === ')') && numberArray.some(number => number !== '(')) {
return true;
} else {
return false;
}
}
const checkPairParentheses = () => {
const numberArray = cleanInputStr(userInput.value).split('');
if (numberArray.some(number => number === ')') && numberArray.some(number => number === '(')) {
return true;
} else {
return false;
}
}
const checkWrappedParentheses = () => {
const numberArray = cleanInputStr(userInput.value).split('');
if (numberArray[0] === '(' && numberArray[numberArray.length - 1] === ')') {
return true;
}
}
const checkHyphens = (value) => {
return userInput.value.split(value).length - 1;
}
const checkNumber = () => {
const numberArray = cleanInputStr(userInput.value).split('');
if (checkSingleParentheses() === true || checkWrappedParentheses() === true || checkFalseStart() === true || checkHyphens('-') > 2) {
return false;
}
if (checkPairParentheses() === false && checkSingleParentheses() === false) {
if (numberArray.length === 11 && numberArray[0] === '1') {
return true;
} else if (numberArray.length === 10) {
return true
} else {
return false;
}
}
if (checkPairParentheses() === true) {
if (numberArray.length === 13 && numberArray[0] === '1') {
return true;
} else if (numberArray.length === 12) {
return true;
} else {
return false;
}
}
}
checkBtn.addEventListener('click', () => {
checkNumber();
if (userInput.value === '') {
alert('Please provide a phone number');
return;
}
if (checkNumber() === true) {
results.innerText += `Valid US number: ${userInput.value}`;
userInput.value = '';
return;
} else {
results.innerText = `Invalid US number: ${userInput.value}`;
userInput.value = '';
return;
}
});
*, :before, :after {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: sans-serif;
}
body {
background-color: #708090;
}
main {
margin: 5% auto 0;
}
#logo-container {
margin: auto auto 2%;
text-align: center;
}
#logo-container img {
width: 40%;
max-width: 120rem;
}
h2 {
text-align: center;
margin: auto auto 3%;
font-size: 2rem;
}
#phone-container {
border: 1px solid;
width: 35%;
max-width: 17rem;
margin: auto;
height: 22rem;
display: block;
text-align: center;
border-radius: 8%;
background-color: black;
}
#phone-camera {
background-color: white;
height: 0.5rem;
width: 0.5rem;
border-radius: 50%;
position: absolute;
left: 50%;
margin: 5px auto;
}
form {
background-color: #F5F5DC;
margin: 20px auto 5px;
width: 90%;
height: 18rem;
border-radius: 5%;
padding: 20px 0 0;
}
button {
width: 5rem;
height: 2rem;
border-radius: 5px;
font-weight: bold;
background-image: linear-gradient(#F5F5DC, grey);
cursor: pointer;
border: none;
}
button:hover {
background-image: linear-gradient(#eeeec3, #808080)
}
label {
font-size: 1.15rem;
}
#user-input {
margin: 10px auto 15px;
width: 70%;
height: 2rem;
border-radius: 5px;
text-align: center;
font-size: 1rem;
border: 0.5px solid;
}
#results-div {
overflow: auto;
height: 10rem;
width: 90%;
}
#results-div p {
font-size: 1.15rem;
margin: 5px auto;
}
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
Challenge Information:
Build a Telephone Number Validator Project - Build a Telephone Number Validator