CoderKishan
DIAL MANAGEMENT BY USING HTML CSS AND JAVA SCRIPT
Start programming
HTML PROGRAMMING
<!Doctype html>
<html>
<script src="https://kit.fontawesome.com/5e8f72a981.js" crossorigin="anonymous"></script>
<link href="style.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Mobile Number Validator</title>
<body>
<div class="container">
<div class="top">
<span class="time">5:00PM <i class="fas fa-location-arrow"></i></span>
<div class="speaker"></div>
<div class="camera"></div>
<span class="service-battery"><i class="fas fa-signal"></i> LTE <i class="fas fa-battery-three-quarters"></i></span>
</div>
<div class="input-results">
<input type="text" id="input" placeholder="Enter number here" />
<p id="results">
<span>Use your keyboard or the keypad below</span><span>Then press enter or call</span>
</p>
</div>
<div class="buttons">
<div class="button" id="num-btn" number="1"><p>1</p></div>
<div class="button" id="num-btn" number="2">
<p>2</p>
<span>ABC</span>
</div>
<div class="button" id="num-btn" number="3">
<p>3</p>
<span>DEF</span>
</div>
<div class="button" id="num-btn" number="4">
<p>4</p>
<span>GHI</span>
</div>
<div class="button" id="num-btn" number="5">
<p>5</p>
<span>JKL</span>
</div>
<div class="button" id="num-btn" number="6">
<p>6</p>
<span>MNO</span>
</div>
<div class="button" id="num-btn" number="7">
<p>7</p>
<span>PQRS</span>
</div>
<div class="button" id="num-btn" number="8">
<p>8</p>
<span>TUV</span>
</div>
<div class="button" id="num-btn" number="9">
<p>9</p>
<span>WXYZ</span>
</div>
<div class="button"><i class="fas fa-asterisk"></i></div>
<div class="button" id="num-btn" number="0">
<p>0</p>
<span><i class="fas fa-plus"></i></span>
</div>
<div class="button">#</div>
<div class="button phone-button" id="phone-button">
<i class="fas fa-phone-alt"></i>
</div>
</div>
<div class="bottom">
<div class="item contacts">
<i class="fas fa-user-circle"></i><span>Contacts</span>
</div>
<div class="item recents">
<i class="fas fa-clock"></i><span>Recents</span>
</div>
<div class="item keypad">
<div class="buttons">
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
</div>
<span>Keypad</span>
</div>
<div class="item favorites">
<i class="fas fa-star"></i><span>Favorites</span>
</div>
<div class="item voicemail">
<i class="fas fa-voicemail"></i><span>Voicemail</span>
</div>
</div>
</div>
<script src="script.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
CSS PROGRAMMING
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: cursive;
color: #fff;
}
* {
padding: 0;
margin: 0;
}
html {
box-sizing: border-box;
}
.container {
height: 500px;
width: 290px;
background-color: black;
border: 5px solid silver;
border-radius: 20px;
display: grid;
grid-template-rows: 5% 25% 1fr 10%;
}
.top {
grid-row: 1 / 2;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
font-size: 13px;
font-weight: 400;
position: relative;
}
.top i {
font-size: 10px;
}
.speaker {
width: 50px;
height: 7px;
background-color: #333;
border-radius: 10000px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.camera {
width: 7px;
height: 7px;
background-color: #333;
border-radius: 50%;
position: absolute;
left: 62%;
}
.top .fa-battery-three-quarters {
font-size: 14px;
}
.top .fa-location-arrow {
transform: translateY(-1px);
}
/*************************/
.input-results {
grid-row: 2 / 3;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#input {
width: 75%;
height: 40px;
text-align: center;
font-size: 22px;
background-color: #000;
color: #fff;
border: 1px solid white;
outline: none;
}
#input::placeholder {
font-size: 12px;
}
#results {
margin-top: 5px;
text-align: center;
font-size: 12px;
color: royalblue;
display: flex;
flex-direction: column;
}
/*************************/
.buttons {
grid-row: 3 / 4;
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
align-items: center;
padding: 0 10%;
margin-bottom: 10px;
}
.button {
height: 52px;
width: 52px;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #444;
font-size: 22px;
font-weight: 300;
transition: all 0.2s;
}
.button:hover,
.button:active {
cursor: pointer;
background-color: rgba(255, 255, 255, 0.8);
}
.button.phone-button:hover,
.button.phone-button:active {
background: rgba(50, 205, 50, 0.8);
}
.button span {
font-size: 8px;
letter-spacing: 2px;
padding-left: 2px;
}
.button .fa-asterisk {
font-size: 16px;
}
.button.phone-button {
grid-column: 2 / 3;
background-color: limegreen;
}
/*************************/
.bottom {
grid-row: 4 / 5;
display: flex;
justify-content: space-evenly;
margin-top: 10px;
color: #aaa;
}
.item {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.item i {
font-size: 20px;
}
.item span {
font-size: 10px;
}
.buttons {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.c {
height: 5px;
width: 5px;
margin: 1px;
background-color: royalblue;
border-radius: 50%;
}
.keypad span {
color: royalblue;
}
JAVA SCRIPT PROGRAMMING
function mobileCheck(str) {
let bracketCheck = /[(]\d{3}[)]/;
let checkBeginning = /^([(]\d{3}[)])/;
let otherCharsCheck = /^[-]|[^\s-\d)(]/;
let space = /[\s-]/g;
let countryCodeCheck = /^1/;
let simple = str.replace(space, '');
if (otherCharsCheck.test(str)) {
return false;
} else {
if (simple.length === 13
&& countryCodeCheck.test(simple)
&& bracketCheck.test(simple)) {
return true;
} else if (simple.length === 12
&& checkBeginning.test(simple)) {
return true;
} else if (simple.length === 11
&& countryCodeCheck.test(simple)) {
return true;
} else if (simple.length === 10) {
return true;
}
} return false;
}
//*************//
// DOM
const input = document.getElementById('input');
const buttons = document.querySelectorAll('#num-btn');
const resultsDiv = document.getElementById('results');
const phoneBtn = document.getElementById('phone-button');
// add functionality to each number button
buttons.forEach((button) => {
button.addEventListener('click', (e) => {
let number;
// get info from parent div if span or p tag clicked on
if (e.target.tagName == 'SPAN' || e.target.tagName == 'P') {
number = e.target.parentElement.attributes.number.value;
} else {
number = e.target.attributes.number.value;
}
input.value += number;
});
});
function displayResults(input) {
let answer = mobileCheck(input);
if (answer) {
resultsDiv.innerHTML = 'Valid phone number! 😃';}
else {
resultsDiv.innerHTML = 'Invalid phone number! 😕';}
}
// press enter to submit
input.addEventListener('keydown', (e) => {
if (e.keyCode === 13) {
displayResults(e.target.value);
}
});
// click phone icon to submit
phoneBtn.addEventListener('click', () => {
displayResults(input.value);
});
--------------------- End Program -----------------------------
Output:-
Any quarry please contact me
Mobile no:- 8004053680
Email id:- coderkishan0101@gmail.com
CoderKishan
No comments:
Post a Comment