Tell us what’s happening:
Please I’m stuck
checkBtn.addEventListener(“click”, () => {
if(userInput.value === “1 555-555-5555”){
resultsDiv.textContent = ‘Valid US number: 1 555-555-5555’;
}
})
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF_8">
<meta name="viewwport" content="width=device-width, initial-scale=1">
<title>Telephone Number Validator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1 id="heading">Telephone Number Validator</h1>
</header>
<main>
<div class="phone">
<div class="hole"></div>
<div id="results-div">
<label for="user-input">Enter a Phone Number:<input id="user-input" type="number"></label>
</div>
<div id="btns">
<button id="check-btn">Check</button>
<button id="clear-btn">Clear</button>
</div>
</div>
</main>
<script src="./script.js"></script>
</body>
</html>
/* file: styles.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
--dark-blue: #AEC6CF;
--gray: #808080;
--black: #000;
--ash: #B2BEB5;
--white: #fff;
}
body{
background-color: var(--dark-blue);
color: var(--black);
text-align: center;
}
#heading{
margin: 25px 0;
}
.phone{
width: 350px;
height: 600px;
margin: 0 auto;
border-radius: 25px;
padding: 30px 20px 60px 20px;
background-color: var(--black);
}
#results-div {
background-color: var(--ash);
width: 100%;
height: 440px;
margin-bottom: 5px;
}
.hole{
width: 5%;
height: 3%;
background-color: var(--ash);
border-radius: 90px;
margin: 0 auto;
margin-bottom: 20px;
}
#results-div input, #results-div label{
width: 200px;
height: 45px;
font-size: 20px;
border-radius: 5px;
}
#check-btn, #clear-btn{
width: 120px;
height: 45px;
border: 5px groove var(--dark-blue);
background-color: var(--white);
font-size: 20px;
}
#btns{
display: flex;
justify-content: space-evenly;
width: 100%;
height: 90px;
padding-top: 9px;
}
/* file: script.js */
const checkBtn = document.getElementById("check-btn");
const clearBtn = document.getElementById("clear-btn");
const userInput = document.getElementById("user-input");
const resultsDiv = document.getElementById("results-div");
checkBtn.addEventListener("click", () => {
if(userInput.value === ""){
alert("Please provide a phone number");
}
})
clearBtn.addEventListener('click', () => {
resultsDiv.innerHTML = '';
});
checkBtn.addEventListener("click", () => {
if(userInput.value === "1 555-555-5555"){
resultsDiv.textContent = 'Valid US number: 1 555-555-5555';
}
})
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36
Challenge Information:
Build a Telephone Number Validator Project - Build a Telephone Number Validator