Tell us what’s happening:
Hi! Cant seem to pass step 35, even though the code seems to work just fine, any ideas?
Your code so far
<!-- file: index.html -->
<input id="user-input" />
<button id="check-btn" >Check</button>
<button id="clear-btn" >Clear</button>
<div id="results-div" >
Valid/Not valid shows here
</div>
<script src="script.js" >
</script>
/* file: script.js */
const userInput = document.getElementById("user-input");
const checkBtn = document.getElementById("check-btn");
const clearBtn = document.getElementById("clear-btn");
const resultsDiv = document.getElementById("results-div");
const validPhonePatterns = [
/^1 \d{3}-\d{3}-\d{4}$/,
/^1 \(\d{3}\) \d{3}-\d{4}$/,
/^1\(\d{3}\)\d{3}-\d{4}$/,
/^1 \d{3} \d{3} \d{4}$/,
/^\d{10}$/,
/^\d{3}-\d{3}-\d{4}$/,
/^\(\d{3}\)\d{3}-\d{4}$/,
];
function clearContent() {
resultsDiv.innerText = "";
}
clearBtn.addEventListener("click", () => clearContent())
checkBtn.addEventListener("click", () => {
const inputValue = userInput.value;
validNumber(inputValue);
userInput.value = "";
function validNumber(str) {
if (str === "") {
alert("Please provide a phone number");
resultsDiv.innerText = "No bueno";
return false;
}
const isValid = validPhonePatterns.some(pattern => pattern.test(str));
if (isValid) {
resultsDiv.innerText = `Valid US number: ${str}`;
} else {
resultsDiv.innerText = `Invalid US number: ${str}`;
}
return isValid;
}
});
/* file: styles.css */
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/18.3 Safari/605.1.15
Challenge Information:
Build a Telephone Number Validator Project - Build a Telephone Number Validator