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

JavaScript
1

Tell us what’s happening:

My code passes every test except for #35 and #36.
I don’t understand what it wants since my code seems to be doing what it’s asking for?

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">
		<title>US Telephone Number Validator</title>
		<link href="styles.css" rel="stylesheet">
	</head>
	<body>
		<div id="main-container">
			<div id="input-wrap">
				<input id="user-input">
			</div>
			<div id="buttons-wrap">
				<button id="check-btn">Check</button>
				<button id="clear-btn">Clear</button>
			</div>
			<div id="results-div">

			</div>
		</div>
	<script src="script.js"></script>
	</body>
</html>

/* file: styles.css */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-size: 10px;
}

body {
	background-color: #afafaf;
}

#main-container {
	width: min(400px, 60%);
	height: 220px;
	background-color: #c0c2ce;
	margin: 10em auto;
	border: 1px solid black;
	box-shadow: 0px 1px 1px 2px black;
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#input-wrap {
	width: 90%;
	margin-top: 2em;
	margin-bottom: 2em;
}

#user-input {
	width: 100%;
	height: 30px;
	padding: 1em;
	border-radius: 10px;
}

#buttons-wrap {
	display: flex;
	gap: 20px;
}

button {
	width: 80px;
	height: 40px;
}

#results-div {
	margin-top: 2em;
	font-size: 2em;
}

/* file: script.js */
const checkBtn = document.getElementById('check-btn');
const clearBtn = document.getElementById('clear-btn');
const input = document.getElementById('user-input');
const resultsDiv = document.getElementById('results-div');

const updateUI = () => {
	 input.value ? validate() : alert("Please provide a phone number")
}

const validate = () => {
	const phoneNum = input.value;
	const regex = /^(1{1}\s?)?(\(\d{3}\)|\d{3})[-\s]?\d{3}[-\s]?\d{4}$/g;
	const filteredPhone = regex.test(phoneNum);
	if (filteredPhone) {
		resultsDiv.style.color = "green";
		resultsDiv.innerText = `Valid US number: ${phoneNum}`;
	} else {
		resultsDiv.style.color = "red";
		resultsDiv.innerText = `Invalid US number: ${phoneNum}`;
	}

	input.value = "";
}

checkBtn.addEventListener("click", updateUI)
clearBtn.addEventListener("click", () => {
  input.value = ""; 
  resultsDiv.innerText = "";
  })
input.addEventListener("keydown", (e) => {
	if (e.key === "Enter") {
		updateUI();
		input.value = "";
	}
})

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:134.0) Gecko/20100101 Firefox/134.0

Challenge Information:

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

2

As per the solution below, trying changing your global variable input to userInput.
It’s a bug in the tests, but a fix is in the works I believe.

1 Like