Tell us what’s happening:
I am having the same issue as the other users posting about this project. Every test passes aside from 36. I tried the fixes posted on other threads that seemed to work for the OP, but none have worked for me. If anyone could provide some guidance it would be greatly appreciated.
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">
<title>Telephone Number Validator Project</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
</head>
<body>
<div id="app-container">
<div id="header">
<span id="title"># Checker</span>
<button id="clear-btn">clear</button>
</div>
<div id ="input-div">
<label for="user-input">United States:</label>
<input type="text" placeholder="Enter a phone number" id="user-input">
</div>
<div id="results-container">
<h2>Phone Number Status:</h2>
<div id="results-div">
</div>
<p id="placeholder">Your results will appear here...</p>
</div>
<button id="check-btn">Validate</button>
</div>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
const resultsDiv = document.getElementById('results-div');
const clearBtn = document.getElementById('clear-btn');
const checkBtn = document.getElementById('check-btn');
const userInput = document.getElementById('user-input');
const placeholder = document.getElementById("placeholder");
const checkNumber = (input) => {
if (input === "") {
alert("Please provide a phone number");
}
const ccRegex = /[\d][\s-]?\(?(\d{3})\)?[\s-]*(\d{3})[\s-]*(\d{4})/;
if (ccRegex.test(input)) {
if (input.includes("(") || input.includes(")")) {
const parRegex = /^1[\s-]?\((\d{3})\)[\s-]*(\d{3})[\s-]*(\d{4})$/;
if (parRegex.test(input)) {
return true;
} else {
return false;
}
} else {
const regRegex = /^1[\s-]?(\d{3})[\s-]*(\d{3})[\s-]*(\d{4})$/;
if (regRegex.test(input)) {
return true;
} else {
return false;
}
}
} else {
if (input.includes("(") || input.includes(")")) {
const parRegex = /\((\d{3})\)[\s-]*(\d{3})[\s-]*(\d{4})$/;
if (parRegex.test(input)) {
return true;
} else {
return false;
}
} else {
const regRegex = /(\d{3})[\s-]*(\d{3})[\s-]*(\d{4})$/;
if (regRegex.test(input)) {
return true;
} else {
return false;
}
}
}
}
const updateUI = (isValid) => {
placeholder.classList.add("vanish");
if (isValid) {
resultsDiv.innerHTML += `<p class="result">Valid US number: ${userInput.value}</p>`;
} else {
resultsDiv.innerHTML += `<p class="result invalid">Invalid US number: ${userInput.value}</p>`;
}
}
checkBtn.addEventListener("click", () => updateUI(checkNumber(userInput.value)));
clearBtn.addEventListener("click", () => {
placeholder.classList.remove("vanish");
resultsDiv.innerHTML = "";
});
/* file: styles.css */
* {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
font-family: inter, sans-serif;
}
#app-container {
background-color: #EBEBEB;
height: 550px;
width: 254px;
border-radius: 47px;
margin-top: 40px;
}
#header {
background: linear-gradient(#4182CD, #2BBDAC);
height: 141px;
width: 254px;
border-radius: 47px 47px 50px 50px;
display: flex;
justify-content: space-between;
gap: 52px;
padding: 25px 20px;
position: relative;
overflow: hidden;
}
#title {
white-space: nowrap;
font-size: 25px;
font-weight: 500;
color: #FFFFFF;
}
#clear-btn {
height: 20px;
background: none;
border: none;
font-size: 15px;
color: #FFFFFF;
text-decoration: underline;
margin-top: 5px;
cursor: pointer;
}
#clear-btn:hover {
color: #FFFFFF;
font-weight: 600;
}
#clear-btn:active {
font-weight: 400;
}
#input-div {
background-color: white;
height: 124px;
width: 235px;
margin: auto;
position: relative;
top: -47px;
border-radius: 20px;
filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25));
display: flex;
flex-direction: column;
gap: 5px;
justify-content: center;
}
label[for="user-input"] {
color: #6B6B6B;
font-size: 16px;
font-weight: 500;
margin-left: 21px;
}
#user-input {
height: 32px;
width: 209px;
background-color: #F0F0F0;
border: none;
border-radius: 10px;
font-size: 13px;
color: #7B7B7B;
text-align: center;
margin-left: 15px;
margin-bottom: 10px;
}
#user-input:hover {
border: 1px solid #D1D1D1;
}
#results-container {
background-color: white;
height: 233px;
width: 235px;
margin: auto;
position: relative;
top: -32px;
border-radius: 20px;
filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25));
display: flex;
flex-direction: column;
gap: 5px;
justify-content: center;
}
h2 {
font-size: 16px;
font-weight: 500;
color: #6B6B6B;
text-align: center;
position: absolute;
left: 33px;
top: 6px;
}
#placeholder {
font-size: 13px;
color: #7B7B7B;
font-weight: 300;
width: 75%;
text-align: center;
position: absolute;
left: 30px;
bottom: 100px;
}
#results-div {
height: 165px;
width: 165px;
background-color: white;
position: absolute;
right: 34px;
bottom: 20px;
display: flex;
flex-direction: column;
overflow: hidden;
}
#check-btn {
width: 235px;
height: 45px;
background-color: #4182CD;
border: none;
border-radius: 20px;
font-size: 18px;
font-weight: 400;
color: #FFFFFF;
position: relative;
right: -10px;
top: -18px;
}
#check-btn:hover {
background-color: #1e5bb8;
transform: scale(1.02);
cursor: pointer;
}
#check-btn:active {
transform: scale(1);
color: #E8E8E8;
}
.result {
font-size: 14px;
color: #7B7B7B;
width: 100%;
text-align: center;
margin: 5px auto;
font-weight: 500;
}
.vanish {
display: none;
}
.invalid {
color: #C65E60;
}
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.0 Safari/605.1.15
Challenge Information:
Build a Telephone Number Validator Project - Build a Telephone Number Validator