Tell us what’s happening: I can’t pass one only test.
Describe your issue in detail here.
I’ve one only problem, and with the following test:
When the #user-input element contains 1 456 789 4444 and the #check-btn element is clicked, the #results-div element should contain the text Valid US number: 1 456 789 4444 .
If I run the test on my personal IDE all works fine, on the other hand I’m sure that the following regex matches perfectly the test (const regex4 = /^[1][\s][\d]{3}[\s][\d]{3}[\s][\d]{4}$/g). It’s the unique test that I haven’t completed, it’s so strange.
What’s going on here? Thx for reply
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.0"/>
<meta name="description" content="certification_telNumber" />
<title>certification no.3</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>US Phone Number Validator</h1>
<div class="input-container">
<label for="user-input">Phone:</label>
<input
id="user-input"
/>
<button id="check-btn">Check</button>
<button id="clear-btn">Clear</button>
</div>
<div id = 'results-div'>
<output for="results-div"></output>
</div>
</body>
<script src="script.js"></script>
</html>
/* file: styles.css */
body {
width: 100%;
height: 100%;
min-width: 400px;
margin: 0;
background-color: blanchedalmond;
font-family: 'Menlo', Times, serif;
font-size: 16px;
}
h1,p{
margin: 1em auto;
text-align: center;
}
.input-container{
text-align: center;
}
#results-div{
margin: 2rem 12rem 2rem 12rem;
min-width: 6rem;
padding: 1rem;
text-align: center;
border-style: inset;
background-color: azure;
}
/* file: script.js */
const input = document.getElementById('user-input');
const checkBtn = document.getElementById('check-btn');
const clearBtn = document.getElementById('clear-btn');
const textResult = document.getElementById('results-div');
const regex1 = /^[1][\s][\d]{3}[-][\d]{3}[-][\d]{4}$/g;
const regex2 = /^[1][\s][\(][\d]{3}[\)][\s][\d]{3}[-][\d]{4}$/g;
const regex3 = /^[1][\(][\d]{3}[\)][\d]{3}[-][\d]{4}$/g;
const regex4 = /^[1][\s][\d]{3}[\s][\d]{3}[\s][\d]{4}$/g
const regex5 = /^[\d]{10}$/g;
const regex6 = /^[\d]{3}[-][\d]{3}[-][\d]{4}$/g
const regex7 = /^[\(][\d]{3}[\)][\d]{3}[-][\d]{4}$/g
const arrayRegex = [regex1,regex2,regex3,regex4,regex5,regex6,regex7];
const evalPhoneNum = input => arrayRegex.some(regex => regex.test(input));
clearBtn.addEventListener('click', () =>
(input.value = '')(textResult.textContent = ''));
checkBtn.addEventListener('click', () => {
console.log(`clicked! input: ${input.value}`);
if (input.value === ''){
alert('Please provide a phone number');
return;
}
evalPhoneNum(input.value)?
textResult.textContent = `Valid US number: ${input.value}` :
textResult.textContent = `Invalid US number: ${input.value}`;
});
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1 Safari/605.1.15
Challenge Information:
Build a Telephone Number Validator Project - Build a Telephone Number Validator
