Tell us what’s happening:
Having an issue with step 35, I don’t understand what im doing wrong here.
Your code so far
<!-- file: index.html -->
<DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="root">
<header><h2>FreeCodeCamp</h2></header>
<main>
<section class="phone">
<article class="phone-ctn">
<form class="input-form">
<div class="input-ctn">
<label>Enter your phone number:</label>
<input id="user-input" type="text">
</div>
<div id="results-div"></div>
<div class="btn-ctn">
<button type="button" id="check-btn">Check</button>
<button type="button" id="clear-btn">Clear</button>
</div>
</form>
</article>
</section>
</main>
</div>
<script src="script.js"></script>
</body>
</html>
/* 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 clearResult = () => {
resultsDiv.textContent = '';
}
const clearInput = () => {
userInput.value = '';
clearResult();
}
clearBtn.addEventListener("click", clearInput);
const checkBrackets = (string) => {
const stack = [];
for (let i=0;i<string.length;i++) {
if (string[i] === '(') {
stack.push(string[i]);
} else if (string[i] === ')' && stack[stack.length - 1] === '(') {
stack.pop();
} else if (string[i] === ')' && stack[stack.length -1] !== '(') {
return false;
}
}
if (stack.length === 0) {
return true;
}
return false;
}
const checkNumber = () => {
clearResult();
const value = userInput.value;
if (!value || !value.trim()) {
alert("Please provide a phone number");
return false;
} else if (value.startsWith('-') || !checkBrackets(value)) {
resultsDiv.textContent = `Invalid US number: ${value}`;
return false;
}
const sanitizedArr = value.replace(/([()-\s+])/g,'-').split('-').filter(Boolean);
let sanitized = '';
if (sanitizedArr.length > 4) {
resultsDiv.textContent = `Invalid US number: ${value}`;
return false;
} else if ( sanitizedArr.length <= 4) {
sanitized = sanitizedArr.join('');
if ( sanitized.length < 10 || sanitized.length > 11 || isNaN(Number(sanitized))) {
resultsDiv.textContent = `Invalid US number: ${value}`;
return false;
} else if (sanitized.length === 11 && sanitized[0] !== '1' || sanitized.length === 10 && sanitized[0] !== '5') {
resultsDiv.textContent = `Invalid US number: ${value}`;
userInput.value = "";
return false;
}
}
resultsDiv.textContent = `Valid US number: ${value}`;
return false;
}
checkBtn.addEventListener("click", checkNumber);
/* file: styles.css */
#root {
background-color: lightgreen;
display:flex;
flex-direction:column;
min-height: 100vh;
padding:0;
margin: 0;
}
header > h2 {
text-align: center;
}
.phone {
width: fit-content;
border-radius: 10px;
background-color: black;
margin-inline:auto;
}
.phone-ctn {
padding-inline: 10px;
padding-top: 40px;
padding-bottom: 90px;
border-radius: 10px;
}
.input-form {
display:flex;
padding: 10px;
border-radius: 10px;
background-color: lightgray;
flex-direction: column;
justify-content: between;
}
.input-ctn {
display:grid;
}
.btn-ctn {
padding-top: 200px;
display:flex;
align-items: center;
justify-content:center;
gap: 10px;
}
.input-ctn > label {
text-align: center;
}
Your browser information:
User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36
Challenge Information:
Build a Telephone Number Validator Project - Build a Telephone Number Validator