Build a Telephone Number Validator Project - Build a Telephone Number Validator

JavaScript
1

Tell us what’s happening:

I am only passing the first 4 tests, its like its not reading any of my js can someone help locate the issue?

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">
	<link rel="stylesheet" href="styles.css">
	<title>Input and Button Example</title>
</head>

<body>
	<h1>Telephone Number Validator</h1>
	<input type="text" id="user-input" placeholder="Enter something">
	<button id="check-btn">Check</button>
	<button id="clear-btn">Clear</button>
	<p id="results-div"></p>
	<script src="scripts.js"></script>
</body>

</html>

/* file: styles.css */
body {
	background-color: #e6e6fa;
	font-family: Arial, sans-serif;
	color: #4b0082;
	margin: 0;
	padding: 0;
	display: flex; 
	flex-direction: column;
	justify-content: center;
	align-items: center; 
	height: 100vh; 
}
h1 {
	color: #8a2be2; 
	text-align: center;
	margin-bottom: 20px;
}
input {
	display: block;
	margin: 10px 0; 
	padding: 10px;
	border: 2px solid #8a2be2;
	border-radius: 5px;
}
button {
	display: block;
	margin: 10px 0;
	padding: 10px 20px;
	background-color: #ba55d3;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}
button:hover {
	background-color: #9932cc;
}
#results-div {
	margin-top: 20px;
	padding: 10px;
	border: 2px solid #4b0082;
	border-radius: 5px;
	background-color: #d8bfd8;
	color: #4b0082; 
	text-align: center;
}
footer {
	text-align: center;
	color: #8a2be2;
	position: absolute;
	bottom: 10px;
	width: 100%;
}


/* file: script.js */
document.addEventListener("DOMContentLoaded", function () {
	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 validUSNumbers = [
		/^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}$/,
		/^1\(\d{3}\)\d{3}-\d{4}$/,
		/^1 \d{3} \d{3} \d{4}$/,
		/^1 \(\d{3}\) \d{3} \d{4}$/,
		/^\d{3}\d{3}\d{4}$/
	];
	const invalidUSNumbers = [
		/^\d{3}-\d{4}$/,
		/^\d{7}$/,
		/^1 \d{3}\)\d{3}-\d{4}$/,
		/^\(\d{10}\)$/,
		/^2 \(\d{3}\) \d{3}-\d{4}$/,
		/^0 \(\d{3}\) \d{3}-\d{4}$/,
		/^-1 \(\d{3}\) \d{3}-\d{4}$/,
		/^2 \d{3} \d{3}-\d{4}$/,
		/^10 \(\d{3}\) \d{3}-\d{4}$/,
		/^\d{11}$/,
		/^\(\d{3}\)\d{7}$/,
		/^2\(\d{3}\)\d{3}\d{4}$/,
		/^2\(\d{3}\)\d{3}-\d{4}$/,
		/^\d{3}\)-\d{3}-\d{4}$/,
		/^\(\d{3}-\d{3}-\d{4}$/,
		/^\(\d{3}\)\d{1}\(\d{2}\?\)-\d{4}$/,
		/^\d{2} \d{2}-\d{2}-\d{3}-\d{1}$/,
		/^11 \d{3}-\d{3}-\d{4}$/,
		/^[a-zA-Z0-9!@#$%^&*()]+$/,
		/^\(6054756961\)$/,
		/^\(275\)\d{7}$/,
		/^\(555\)5\(55\?\)-5555$/,
		/^55 55-55-555-5$/,
		/^11 \d{3}-\d{3}-\d{4}$/
	];
	checkBtn.addEventListener("click", function () {
		const value = userInput.value.trim();
		if (!value) {
			window.alert("Please provide a phone number");
			return;
		}
		if (validUSNumbers.some((regex) => regex.test(value))) {
			resultsDiv.textContent = `Valid US number: ${value}`;
		} else if (invalidUSNumbers.some((regex) => regex.test(value))) {
			resultsDiv.textContent = `Invalid US number: ${value}`;
		} else {
			resultsDiv.textContent = "Invalid phone number format";
		}
	});
	clearBtn.addEventListener("click", function () {
		resultsDiv.textContent = "";
		userInput.value = "";
	});
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 Edg/131.0.0.0

Challenge Information:

Build a Telephone Number Validator Project - Build a Telephone Number Validator

2

Welcome back to the forum @smherron29

You have a typo into src attribute value of the script element.

Happy coding

3

thank you so much for the help i was able to locate it

1 Like