Skip to content

Commit e60785b

Browse files
fullStackRaccfullStackRacc
committed
Adds telephone number validator project
1 parent 7e8f09d commit e60785b

File tree

3 files changed

+147
-0
lines changed

3 files changed

+147
-0
lines changed

‎telephone-number-validator/index.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<link rel="stylesheet" href="./styles.css" />
7+
<title>Telephone Number Validator</title>
8+
</head>
9+
<body>
10+
<main>
11+
<h1 class="main-text title">Telephone Number Validator</h1>
12+
<p class="description">Check if a number is a potential US phone number</p>
13+
<div class="phone-container">
14+
<label for="user-input" class="message-label">Enter a Phone Number:</label>
15+
<input type="text" placeholder="Example: 1 555-555-5555" id="user-input" maxlength="20" value="" />
16+
<div id="results-div" class="result"></div>
17+
<div class="phone-footer">
18+
<button id="check-btn" class="btn">Check</button>
19+
<button id="clear-btn" class="btn">Clear</button>
20+
</div>
21+
</div>
22+
</main>
23+
<script src="script.js"></script>
24+
</body>
25+
</html>

‎telephone-number-validator/script.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
//Set Varibles
2+
const userInput = document.getElementById("user-input");
3+
const checkBtn = document.getElementById("check-btn");
4+
const clearBtn = document.getElementById("clear-btn");
5+
const results = document.getElementById("results-div");
6+
7+
8+
//Check if input is a valid US phone number
9+
const numberValidator = (input) => {
10+
const countryCode = '^(1\\s?)?';
11+
const areaCode = '(\\([0-9]{3}\\)|[0-9]{3})';
12+
const spacesDashes = '[\\s\\-]?';
13+
const phoneNumber = '[0-9]{3}[\\s\\-]?[0-9]{4}$';
14+
const phoneRegex = new RegExp(`${countryCode}${areaCode}${spacesDashes}${phoneNumber}`);
15+
results.innerHTML = phoneRegex.test(input) ? `Valid US number: ${input}` : `Invalid US number: ${input}`
16+
}
17+
18+
//Set Buttons
19+
checkBtn.addEventListener("click", () => {
20+
const input = userInput.value;
21+
22+
//Verify input exists
23+
if (input.length === 0) {
24+
alert("Please provide a phone number");
25+
return;
26+
} else {
27+
numberValidator(input);
28+
userInput.value = '';
29+
}
30+
});
31+
32+
// Enable enter as a submit option
33+
userInput.addEventListener("keydown", (e) => {
34+
if (e.key === "Enter") {
35+
numberValidator(userInput.value);
36+
userInput.value = "";
37+
}
38+
});
39+
40+
clearBtn.addEventListener("click", () => {
41+
results.innerHTML = "";
42+
});

‎telephone-number-validator/styles.css

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
*,
2+
*::before,
3+
*::after {
4+
box-sizing: border-box;
5+
margin: 0;
6+
padding: 0;
7+
}
8+
9+
:root {
10+
--dark-grey: #1b1b32;
11+
--light-grey: #f5f6f7;
12+
--golden-yellow: #fecc4c;
13+
--yellow: #ffcc4c;
14+
--gold: #feac32;
15+
--orange: #ffac33;
16+
--dark-orange: #f89808;
17+
}
18+
19+
body {
20+
background-color: var(--dark-grey);
21+
color: var(--light-grey);
22+
}
23+
24+
body,
25+
#message-input:placeholder-shown {
26+
text-align: center;
27+
}
28+
29+
input {
30+
max-width: 90%;
31+
}
32+
33+
.main-text {
34+
margin: 25px 0;
35+
}
36+
37+
.title {
38+
font-size: 2.5rem;
39+
}
40+
41+
.description {
42+
margin-top: 15px;
43+
font-size: 1.4rem;
44+
}
45+
46+
.message-label {
47+
display: block;
48+
margin-bottom: 20px;
49+
font-size: 1.5rem;
50+
}
51+
52+
#user-input:placeholder-shown,
53+
textarea {
54+
font-size: 1.1rem;
55+
}
56+
57+
.btn {
58+
display: block;
59+
cursor: pointer;
60+
width: 200px;
61+
margin: 10px auto;
62+
color: var(--dark-grey);
63+
background-color: var(--gold);
64+
background-image: linear-gradient(var(--golden-yellow), var(--orange));
65+
border-color: var(--gold);
66+
border-width: 3px;
67+
}
68+
69+
.btn:hover {
70+
background-image: linear-gradient(var(--yellow), var(--dark-orange));
71+
}
72+
73+
.result {
74+
font-size: 2rem;
75+
margin: 20px 0;
76+
}
77+
78+
.footer {
79+
margin-top: 10px;
80+
}

0 commit comments

Comments
 (0)