Scribd
Upload
3K views3 pages

Phone Directory E2 Stage 1

This JavaScript code defines functions for validating a user's name, email, and phone number input. It adds valid entries to an HTML table and allows sorting the table by name. It also implements live search of the phone numbers in the table.

Uploaded by

atul kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3K views3 pages

Phone Directory E2 Stage 1

This JavaScript code defines functions for validating a user's name, email, and phone number input. It adds valid entries to an HTML table and allows sorting the table by name. It also implements live search of the phone numbers in the table.

Uploaded by

atul kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

// JS code goes here

var body = document.querySelector("body");


var submit = document.querySelector("#submit");
var err = document.querySelector(".error");
var sortList = document.querySelector("#nameColumn");
var tbody = document.querySelector("tbody");
var tempBody = [];

// To check name
function checkName(name) {
if (name.length == 0 || name.length > 20) return false;

for (let index = 0; index < name.length; ++index)


{
if ( ! ((name.charCodeAt(index) >= "65" && name.charCodeAt(index) <=
"90") || (name.charCodeAt(index) >= "97" && name.charCodeAt(index) <= "123") ||
name.charCodeAt(index) == 32 ))
return false;
}

m
return true;

er as
}

co
eH w
// To check mail
function checkMail(name) {

o.
rs e
if (name.length == 0 || name.length > 40) return false;
ou urc
for (let index = 0; index < name.length; ++index) {
if (!((name.charCodeAt(index) >= "65" && name.charCodeAt(index) <= "90")
|| (name.charCodeAt(index) >= "97" && name.charCodeAt(index) <= "123") ||
(name.charCodeAt(index) >= "48" && name.charCodeAt(index) <= "57") ||
o

(name[index] == "@" && name[index + 1] != ".") || name[index] == "."))


aC s

return false;
v i y re

}
if (name.slice(this.length - 4,) != ".com") return false;

return true;
}
ed d
ar stu

function addTemp() {
var contacts = tbody.childElementCount;
tempBody = [];
for (let index = 0; index <contacts ;
tempBody.push(tbody.children[index].innerText.toLowerCase()), ++index);
sh is

}
Th

// To fill the details in table entered by user


function fillTable(...data) {
let tr = "";
for (let index = 0; index < 3; ++index)
{
tr += `<td>${data[index]}</d>`;
}
tbody.innerHTML += `<tr>${tr}</tr>`;
}

// Event lister for add contact button


submit.addEventListener('click',(e)=>{
e.preventDefault();

This study source was downloaded by 100000836892765 from CourseHero.com on 11-14-2021 11:18:05 GMT -06:00

https://www.coursehero.com/file/88147018/Phone-Directory-E2-stage-1txt/
var name = document.querySelector("#name");
var mobile = document.querySelector("#mobile");
var email = document.querySelector("#email");

if (checkName(name.value) && checkMail(email.value) && mobile.value.length


== 10)
{
err.style.display = "none";
fillTable(name.value, mobile.value, email.value);
name.value = email.value = mobile.value = "";
addTemp();
}
else err.style.display = "block";
})

// Event listener for sorting the table by name

var isAscending = true;


sortList.addEventListener("click", (e) => {

m
e.preventDefault();

er as
var tdValue = [];

co
var tbody = document.querySelector("tbody");

eH w
var childs = tbody.childElementCount;

o.
for (let index = 0; index < childs;
rs e
tdValue.push(tbody.children[index].innerText), ++index);
ou urc
tbody.innerHTML = "";

if (isAscending == true) tdValue = tdValue.sort();


o

else tdValue = tdValue.reverse();


aC s
v i y re

for (let i = 0; i < childs; fillTable(...tdValue[i].split(" ")), ++i);

isAscending = ! isAscending;
})
ed d
ar stu

////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////
// SEARCHING MOBILE NO
sh is

let search = document.querySelector(".search");


let result = document.querySelector("#noResult");
Th

search.addEventListener("input", (e) => {


e.preventDefault();
var number = e.target.value;
var mobileNo = [];
var childs = tempBody.length;
for (let index = 0; index < childs; ++index)
{
if (tempBody[index].includes(number))
mobileNo.push(tempBody[index]);
}
tbody.innerHTML = "";
mobileNo = mobileNo.sort();
if (mobileNo.length > 0) {
result.style.display = "none";
for (let index = 0; index < mobileNo.length; ++index)

This study source was downloaded by 100000836892765 from CourseHero.com on 11-14-2021 11:18:05 GMT -06:00

https://www.coursehero.com/file/88147018/Phone-Directory-E2-stage-1txt/
fillTable(...mobileNo[index].split(" "));
}
else
result.style.display = "block";

})

////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////

addTemp();

m
er as
co
eH w
o.
rs e
ou urc
o
aC s
v i y re
ed d
ar stu
sh is
Th

This study source was downloaded by 100000836892765 from CourseHero.com on 11-14-2021 11:18:05 GMT -06:00

https://www.coursehero.com/file/88147018/Phone-Directory-E2-stage-1txt/
Powered by TCPDF (www.tcpdf.org)

You might also like