Skip to content

Commit 290c734

Browse files
avulalakshmanavulalakshman
committed
Added Contact Book Example
1 parent b7afaa3 commit 290c734

File tree

4 files changed

+233
-0
lines changed

4 files changed

+233
-0
lines changed

‎ui/js/contact.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
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.0">
6+
<title>Stdent Details</title>
7+
<link rel="stylesheet" href="css/bootstrap.min.css">
8+
</head>
9+
<body>
10+
<div class="py-3 bg-danger text-white text-center">
11+
<h3>Contact Book</h3>
12+
</div>
13+
<div class="container">
14+
<div class="row mt-3">
15+
<div class="col-md-8">
16+
17+
<div id="idShowTable">
18+
</div>
19+
</div>
20+
<div class="col-md-4">
21+
<form id="idContactForm">
22+
<div class="form-group">
23+
<label>
24+
Name
25+
</label>
26+
<input type="text" id="idName" name="name" class="form-control" placeholder="Enter the name">
27+
</div>
28+
<div class="form-group">
29+
<label>
30+
Email
31+
</label>
32+
<input type="text" id="idEmail" class="form-control" placeholder="Enter the name">
33+
</div>
34+
<div class="form-group">
35+
<label>
36+
Mobile
37+
</label>
38+
<input type="text" id="idMobile" class="form-control" placeholder="Enter the name">
39+
</div>
40+
<div class="form-group">
41+
<input type="button" class="btn btn-primary" id="idBtnSubmit" value="Submit">
42+
</div>
43+
</form>
44+
</div>
45+
</div>
46+
</div>
47+
<script src="js/contact.js"></script>
48+
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
49+
</body>
50+
</html>

‎ui/js/js/contact.js‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
let contacts = [];
2+
const idShowTable = document.querySelector("#idShowTable");
3+
const idContactForm = document.querySelector("#idContactForm");
4+
const idBtnSubmit = document.querySelector("#idBtnSubmit");
5+
6+
viewContacts(contacts);
7+
8+
9+
idBtnSubmit.addEventListener('click',event=>{
10+
name = idContactForm.idName.value;
11+
email = idContactForm.idEmail.value;
12+
mobile = idContactForm.idMobile.value;
13+
cid = (Math.ceil(Math.random()) * 1000);
14+
contact = {"cid":cid,"name":name,"email":email,"mobile":mobile};
15+
addContact(contact);
16+
viewContacts(contacts);
17+
idContactForm.reset();
18+
})
19+
20+
function addContact(contact) {
21+
contacts.push(contact);
22+
}
23+
function getContact(cid) {
24+
for (contact of contacts) {
25+
if (contact["cid"] == cid) {
26+
return contact;
27+
}
28+
}
29+
}
30+
function deleteContact(cid) {
31+
index = indexOf(cid);
32+
if (index != -1) {
33+
contacts.splice(index, 1);
34+
}
35+
}
36+
function viewContacts(contacts) {
37+
html = "";
38+
if (contacts.length == 0) {
39+
html +=
40+
"<p class='lead'>Contacts are not yet added please add to view....</p>";
41+
} else {
42+
html = "";
43+
if (contacts.length > 0) {
44+
45+
46+
html += "<table class='table table-hover'>";
47+
html += "<thead><tr><th>Name</th><th>Email</th><th>Mobile</th><th>Edit/Delete</th></tr>";
48+
html += "<tbody>";
49+
50+
contacts.forEach((s) => {
51+
html += `<tr>
52+
<td>${s["name"]}</td>
53+
<td>${s["email"]}</td>
54+
<td>${s["mobile"]}</td>
55+
<td><i class="fas fa-edit"></i><i class="fas fa-trash ml-2"></i></td>
56+
57+
</tr>`;
58+
});
59+
html += "</tbody></table>";
60+
}
61+
idShowTable.innerHTML = html;
62+
}
63+
idShowTable.innerHTML = html;
64+
}
65+
66+
function updateContact(contact) {
67+
index = indexOf(contact["cid"]);
68+
if (index != -1) {
69+
contacts[index] = contact;
70+
}
71+
}
72+
73+
function indexOf(cid) {
74+
index = -1;
75+
for (let i = 0; i < contacts.length; i++) {
76+
let contact = contacts[i];
77+
if (contact["cid"] == cid) {
78+
index = i;
79+
break;
80+
}
81+
}
82+
return index;
83+
}

‎ui/js/js/student.js‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
// let students =[
2+
// {
3+
// regno:1001,
4+
// name:"Krish",
5+
// marks:[95,55,65,80,75],
6+
// total:function(){
7+
// return this.marks.reduce((a,b)=>a+b);
8+
// },
9+
// max: function(){
10+
// return this.marks.reduce((a,b)=>a>b?a:b);
11+
// }
12+
13+
// },
14+
// {
15+
// regno:1002,
16+
// name:"Rajesh",
17+
// marks:[45,55,65,80,75],
18+
// total:function(){
19+
// return this.marks.reduce((a,b)=>a+b);
20+
// },
21+
// max: function(){
22+
// return this.marks.reduce((a,b)=>a>b?a:b);
23+
// }
24+
// },
25+
// {
26+
// regno:1003,
27+
// name:"Charan",
28+
// marks:[55,45,65,80,75],
29+
// total:function(){
30+
// return this.marks.reduce((a,b)=>a+b);
31+
// },
32+
// max: function(){
33+
// return this.marks.reduce((a,b)=>a>b?a:b);
34+
// }
35+
// }
36+
37+
// ]
38+
39+
class Student{
40+
41+
constructor(regno,name,marks){
42+
this.regno = regno;
43+
this.name = name;
44+
this.marks = marks;
45+
}
46+
toString(){
47+
return `Regno: ${this.regno}`
48+
}
49+
total(){
50+
return this.marks.reduce((a,b)=>a+b);
51+
}
52+
}
53+
54+
students = [ new Student(1001,'Krish',[95,55,65,80,75]),
55+
new Student(1006,'Manoj',[75,55,65,80,75]),
56+
new Student(1005,'Rajesh',[65,55,65,80,75]),
57+
new Student(1004,'Jayesh',[55,55,65,80,75])];
58+
59+
60+
html = '';
61+
if(students.length >0){
62+
showTable = document.querySelector("#showTable");
63+
64+
html += "<table class='table table-hover'>";
65+
html += "<thead><tr><th>Regno</th><th>Name</th><th>Total</th></tr>";
66+
html += "<tbody>";
67+
68+
students.forEach(s=>{
69+
html += `<tr><td>${s['regno']}</td><td>${s['name']}</td><td>${s.total()}</td></tr>`;
70+
})
71+
html += "</tbody></table>";
72+
}else{
73+
html = 'There are no students'
74+
}
75+
showTable.innerHTML = html;

‎ui/js/students.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.0">
6+
<title>Stdent Details</title>
7+
<link rel="stylesheet" href="css/bootstrap.min.css">
8+
</head>
9+
<body>
10+
<div class="py-3 bg-danger text-white text-center">
11+
<h3>Student Information</h3>
12+
</div>
13+
14+
<div class="row">
15+
<div class="col-md-8 offset-md-2 mt-2">
16+
17+
<div id="showTable">
18+
19+
20+
</div>
21+
</div>
22+
</div>
23+
<script src="js/student.js"></script>
24+
</body>
25+
</html>

0 commit comments

Comments
 (0)