Skip to content

Commit 15f323a

Browse files
NataliaButenkoNataliaButenko
committed
phoneApp
1 parent e65dd72 commit 15f323a

File tree

3 files changed

+538
-0
lines changed

3 files changed

+538
-0
lines changed

‎phoneApp/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>homework_15</title>
5+
<meta charset="utf-8" />
6+
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
7+
<link rel="stylesheet" type="text/css" href="style.css">
8+
</head>
9+
<body>
10+
<script src="index.js"></script>
11+
</body>
12+
</html>

‎phoneApp/index.js‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
class UsersContacts {
2+
constructor() {
3+
this.dataUsers = [
4+
{
5+
name: 'Иван',
6+
lastName: 'Петров',
7+
email: '[email protected]'
8+
},
9+
{
10+
name: 'Сергей',
11+
lastName: 'Сергей',
12+
email: '[email protected]'
13+
},
14+
{
15+
name: 'Иван',
16+
lastName: 'Иванов',
17+
email: '[email protected]'
18+
},
19+
{
20+
name: 'Александр',
21+
lastName: 'Александров',
22+
email: '[email protected]'
23+
},
24+
{
25+
name: 'Алекс',
26+
lastName: 'Смирнов',
27+
email: '[email protected]'
28+
},
29+
{
30+
name: 'Сергей',
31+
lastName: 'Волков',
32+
email: '[email protected]'
33+
},
34+
{
35+
name: 'Мария',
36+
lastName: 'Шарапова',
37+
email: '[email protected]'
38+
},
39+
{
40+
name: 'Александр',
41+
lastName: 'Винник',
42+
email: '[email protected]'
43+
},
44+
{
45+
name: 'Дарий',
46+
lastName: 'Смирнов',
47+
email: '[email protected]'
48+
},
49+
{
50+
name: 'Елена',
51+
lastName: 'Лещенко',
52+
email: '[email protected]'
53+
},
54+
{
55+
name: 'Ольга',
56+
lastName: 'Новикова',
57+
email: '[email protected]'
58+
},
59+
{
60+
name: 'Наталья',
61+
lastName: 'Шемякина',
62+
email: '[email protected]'
63+
},
64+
{
65+
name: 'Анна',
66+
lastName: 'Донцова',
67+
email: '[email protected]'
68+
},
69+
{
70+
name: 'Влад',
71+
lastName: 'Яма',
72+
email: '[email protected]'
73+
},
74+
{
75+
name: 'Кира',
76+
lastName: 'Воробьева',
77+
email: '[email protected]'
78+
},
79+
{
80+
name: 'Виктор',
81+
lastName: 'Кривенко',
82+
email: '[email protected]'
83+
}
84+
];
85+
this.columnHeadings = ['Name', 'Last name', 'Email'];
86+
};
87+
88+
render() {
89+
90+
document.body.innerHTML += this.createHeader();
91+
document.body.innerHTML += this.createMain();
92+
let insert = document.querySelector('main > div');
93+
insert.appendChild(this.createTable());
94+
document.body.innerHTML += this.createFooter();
95+
};
96+
97+
createNewElement(newElem) {
98+
return document.createElement(newElem);
99+
};
100+
101+
createTable() {
102+
let table = this.createNewElement('table');
103+
table.setAttribute('class', 'table table-hover contacts');
104+
table.appendChild(this.cteateTheadInTable());
105+
table.appendChild(this.cteateTbodyInTable());
106+
return table;
107+
};
108+
109+
cteateTheadInTable() {
110+
let thead = this.createNewElement('thead');
111+
let tr = this.createNewElement('tr');
112+
thead.appendChild(tr);
113+
this.columnHeadings.forEach((elem) => {
114+
let th = this.createNewElement('th');
115+
th.textContent = elem;
116+
tr.appendChild(th);
117+
});
118+
return thead;
119+
};
120+
121+
cteateTbodyInTable() {
122+
let tbody = this.createNewElement('tbody');
123+
//table.appendChild(tbody);
124+
this.dataUsers.forEach((elem) => {
125+
let tr = this.createNewElement('tr')
126+
tbody.appendChild(tr);
127+
let arrObjkeys = Object.keys(elem);
128+
arrObjkeys.forEach((elemTd) => {
129+
let td = this.createNewElement('td');
130+
td.textContent = elem[elemTd];
131+
tr.appendChild(td);
132+
});
133+
});
134+
return tbody;
135+
};
136+
137+
createHeader() {
138+
return `
139+
<header class = 'header'>
140+
<div class = 'container top-radius'>
141+
<h2>Contacts</h2>
142+
</div>
143+
</header>
144+
`
145+
};
146+
147+
createMain() {
148+
return `
149+
<main>
150+
<div class="container">
151+
<form class="form-inline search-form">
152+
<div class="form-group">
153+
<label class="sr-only" for="search">Search</label>
154+
<input type="text" class="form-control" id= "search" placeholder="Search">
155+
</div>
156+
</form>
157+
158+
</main>
159+
`
160+
}
161+
162+
createFooter() {
163+
return `
164+
<footer class="footer">
165+
<div class="container bottom-radius">
166+
<nav class="main-nav">
167+
<a href="index.html" class="tab active">
168+
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
169+
<span class = "tab-text">Contacts</span>
170+
</a>
171+
<a href="keypad.html" class="tab">
172+
<span class="glyphicon glyphicon-th" aria-hidden="true"></span>
173+
<span class = "tab-text">Keypad</span>
174+
</a>
175+
<a href="edit-contact.html" class="tab">
176+
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
177+
<span class = "tab-text">Edit contact</span>
178+
</a>
179+
<a href="user.html" class="tab">
180+
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
181+
<span class = "tab-text">User</span>
182+
</a>
183+
<a href="add-user.html" class="tab">
184+
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
185+
<span class = "tab-text">Add user</span>
186+
</a>
187+
</nav>
188+
</div>
189+
</footer>
190+
`
191+
}
192+
};
193+
194+
let usersContacts = new UsersContacts();
195+
usersContacts.render();

0 commit comments

Comments
 (0)