Tell us what’s happening:
I am lost on how to deal with this test
When the #user-input element contains 555)-555-5555 and the #check-btn element is clicked, the #results-div element should contain the text “Invalid US number: 555)-555-5555”…
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input id="user-input">
<button id="check-btn">check</button>
<button id="clear-btn">clear</button>
<div id="results-div"></div>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css */
/* file: script.js */
const userInput = document.getElementById("user-input");
const checkBtn = document.getElementById('check-btn');
const clearBtn = document.getElementById('clear-btn');
const results = document.getElementById('results-div');
const showAlert = () => userInput.value === '' ? alert('Please provide a phone number') : null;
clearBtn.addEventListener('click', () => {
results.innerHTML = '';
})
checkBtn.addEventListener('click', () => {
showAlert();
const usRegex = /^(?!.*\(\d{3}\)\d{3}|\d{3}\)\d{4}|\(\d{3}\)[^\d]).*$/;
if (usRegex.test(userInput.value))
{
results.innerHTML = `Valid US number: ${userInput.value}`;
}
else
{
results.innerHTML = `Invalid US number: ${userInput.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.0 Safari/605.1.15
Challenge Information:
Build a Telephone Number Validator Project - Build a Telephone Number Validator
