Skip to content

Commit 283863e

Browse files
NataliaButenkoNataliaButenko
committed
update phoneApp (07.08.18)
1 parent eee1fa2 commit 283863e

File tree

8 files changed

+189
-150
lines changed

8 files changed

+189
-150
lines changed

‎phoneApp/addUser.js‎

Lines changed: 62 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,71 @@
11
class AddUser {
2-
constructor() {
2+
constructor() {
33
this.basicUserInfo = ['First Name', 'Last Name', 'Company'];
44
this.additionalUserInfo = [
55
'add mobile phone', 'add home phone', 'add email', 'add address', 'add birthday', 'add social profile', 'add field'
66
];
7-
};
7+
};
88

9-
fieldsBasicAddUserInfo() {
10-
let open = '<div class="main-info-holder">';
11-
let addPhoto = `
12-
<div class="edit-foto">
13-
<button class="add-foto-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
14-
<span>add foto</span></button>
15-
</div>
16-
`;
17-
let editBasicField = this.basicUserInfo.reduce((start, elem) => {
18-
start += `
19-
<div class="edit-field">
20-
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
21-
<span>${elem}</span>
22-
</button>
23-
</div>
24-
`;
25-
return start;
26-
},'');
27-
let resEditBasicField = addPhoto + open + `${editBasicField}</div>`;
28-
return resEditBasicField;
29-
};
9+
fieldsBasicAddUserInfo() {
10+
let open = '<div class="main-info-holder">';
11+
let addPhoto = `
12+
<div class="edit-foto">
13+
<button class="add-foto-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
14+
<span>add foto</span></button>
15+
</div>
16+
`;
17+
let editBasicField = this.basicUserInfo.reduce((start, elem) => {
18+
start += `
19+
<div class="edit-field">
20+
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
21+
<span>${elem}</span>
22+
</button>
23+
</div>
24+
`;
25+
return start;
26+
},'');
27+
let resEditBasicField = addPhoto + open + `${editBasicField}</div>`;
28+
return resEditBasicField;
29+
};
3030

31-
fieldAdditionalAddUserInfo() {
32-
let open = `
33-
<div class="scroll-holder">
34-
<div class="edit-info">
35-
`;
36-
let editAdditionalField = this.additionalUserInfo.reduce((start, elem) => {
37-
start += `
38-
<div class="edit-field">
39-
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
40-
<span>${elem}</span>
41-
</button>
42-
</div>
43-
`;
44-
return start;
45-
}, '');
46-
let buttonDelContacts = `
47-
<div class="edit-field">
48-
<button href="#" class="delete-contact">delete contact</button>
49-
</div>
50-
`;
51-
let resEditAdditionalField = open + `${editAdditionalField}${buttonDelContacts}</div>`;
52-
return resEditAdditionalField;
53-
};
31+
fieldAdditionalAddUserInfo() {
32+
let open = `
33+
<div class="scroll-holder">
34+
<div class="edit-info">
35+
`;
36+
let editAdditionalField = this.additionalUserInfo.reduce((start, elem) => {
37+
start += `
38+
<div class="edit-field">
39+
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
40+
<span>${elem}</span>
41+
</button>
42+
</div>
43+
`;
44+
return start;
45+
}, '');
46+
let buttonDelContacts = `
47+
<div class="edit-field">
48+
<button href="#" class="delete-contact">delete contact</button>
49+
</div>
50+
`;
51+
let resEditAdditionalField = open + `${editAdditionalField}${buttonDelContacts}</div>`;
52+
return resEditAdditionalField;
53+
};
5454

55-
displayEditContact() {
56-
let captionAddUser = document.querySelector('.container.top-radius');
57-
captionAddUser.innerHTML = `
58-
<nav class="user-top-line">
59-
<a href="user.html">Cansel</a>
60-
<button class = "done-btn">Done</button>
61-
</nav>
62-
`;
63-
let mainContainer = document.querySelector('main .container');
64-
mainContainer.innerHTML = `
65-
<div class="edit-main-info">
66-
${this.fieldsBasicAddUserInfo()}
67-
</div>
68-
${this.fieldAdditionalAddUserInfo()}
69-
`;
70-
};
55+
renderAddUser() {
56+
let captionAddUser = document.querySelector('.container.top-radius');
57+
captionAddUser.innerHTML = `
58+
<nav class="user-top-line">
59+
<a href="user.html">Cansel</a>
60+
<button class = "done-btn">Done</button>
61+
</nav>
62+
`;
63+
let mainContainer = document.querySelector('main .container');
64+
mainContainer.innerHTML = `
65+
<div class="edit-main-info">
66+
${this.fieldsBasicAddUserInfo()}
67+
</div>
68+
${this.fieldAdditionalAddUserInfo()}
69+
`;
70+
};
7171
};

‎phoneApp/editContact.js‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,12 @@ class EditContact {
3030
let editAdditionalField = this.additionalUserInfo.reduce((start, elem) => {
3131
if(elem === 'phone') {
3232
start += `
33-
<div class="edit-field">
34-
<button href="#" class="delete-btn"><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
35-
<span>${elem}</span>
36-
<span>+38 (063) 733 44 55</span>
37-
</button>
38-
</div>
33+
<div class="edit-field">
34+
<button href="#" class="delete-btn"><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
35+
<span>${elem}</span>
36+
<span>+38 (063) 733 44 55</span>
37+
</button>
38+
</div>
3939
`;
4040
} else {
4141
start += `
@@ -52,12 +52,12 @@ class EditContact {
5252
<div class="edit-field">
5353
<button href="#" class="delete-contact">delete contact</button>
5454
</div>
55-
`
55+
`;
5656
let resEditAdditionalField = open + editAdditionalField + buttonDelContacts + '</div></div>';
5757
return resEditAdditionalField;
5858
};
5959

60-
displayEditContact() {
60+
renderEditContact() {
6161
let captionEditContact = document.querySelector('.container.top-radius');
6262
captionEditContact.innerHTML = `
6363
<nav class="user-top-line">
@@ -74,4 +74,5 @@ class EditContact {
7474
${this.fieldAdditionalUserInfo()}
7575
`;
7676
};
77-
};
77+
78+
};

‎phoneApp/headerAndFooter.js‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -58,26 +58,22 @@ class HeaderAndFooter {
5858
`;
5959
};
6060

61-
createTemplate() {
61+
renderTemplate() {
6262
document.body.innerHTML = this.createHeader() + this.createMain() + this.createFooter();
6363
};
64+
6465
};
66+
6567
let headerAndFooter = new HeaderAndFooter('Contacts');
66-
headerAndFooter.createTemplate();
68+
headerAndFooter.renderTemplate();
6769

6870

6971
let buttonKeypad = document.querySelector('a.Keypad');
7072

7173
buttonKeypad.addEventListener('click', function(event) {
7274
event.preventDefault();
7375
let keypad = new Keypad();
74-
keypad.displayKeypad();
75-
let keypadHolder = document.querySelector('div.keypad-holder');
76-
keypadHolder.addEventListener('click', function(e) {
77-
if(e.target.tagName === 'BUTTON') {
78-
keypad.enteringNumbers(e.target.textContent);
79-
};
80-
});
76+
keypad.renderKeypad();
8177
});
8278

8379

@@ -86,21 +82,29 @@ let buttonEditContact = document.querySelector('a.Edit');
8682
buttonEditContact.addEventListener('click', function(event) {
8783
event.preventDefault();
8884
let editContact = new EditContact();
89-
editContact.displayEditContact();
85+
editContact.renderEditContact();
9086
});
9187

9288
let buttonUser = document.querySelector('a.User');
9389

9490
buttonUser.addEventListener('click', function(event) {
9591
event.preventDefault();
9692
let user = new User();
97-
user.displayUser();
93+
user.renderUser();
9894
});
9995

10096
let buttonAddUser = document.querySelector('a.Add');
10197

10298
buttonAddUser.addEventListener('click', function(event) {
10399
event.preventDefault();
104100
let addUser = new AddUser();
105-
addUser.displayEditContact();
101+
addUser.renderAddUser();
106102
});
103+
104+
let buttonContacts = document.querySelector('a.Contacts');
105+
106+
buttonContacts.addEventListener('click', function(event) {
107+
event.preventDefault();
108+
let contacts = new UsersContacts();
109+
contacts.renderForm();
110+
});

‎phoneApp/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
<script src="headerAndFooter.js" defer></script>
1212
<script src="index.js" defer></script>
13-
<script src="keypad.js" defer></script>
13+
<script src="keypad.js" defer></script>
1414
<script src="editContact.js" defer></script>
1515
<script src="user.js" defer></script>
1616
<script src="addUser.js" defer></script>

‎phoneApp/index.js‎

Lines changed: 65 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ class UsersContacts {
127127
}, '');
128128
let resultTbody = openTbody + `${createTbody}</tbody>`;
129129
return resultTbody;
130-
}
130+
};
131131
let resultTable = `
132132
<table class="table table-hover contacts">
133133
${thead()}
@@ -137,69 +137,74 @@ class UsersContacts {
137137
return resultTable;
138138
};
139139

140-
addForm() {
141-
let mainContainer = document.querySelector('main .container');
142-
mainContainer.innerHTML += `${this.createForm()}${this.createTable()}`;
143-
};
144-
};
140+
sort() {
141+
let table = document.querySelector('.table');
145142

146-
let usersContacts = new UsersContacts();
147-
usersContacts.addForm();
143+
table.addEventListener('click', function(e) {
144+
if(e.target.tagName != 'TH') {
145+
return;
146+
};
147+
sortTable(e.target.cellIndex, e.target.textContent);
148+
});
148149

149-
let table = document.querySelector('.table');
150+
function sortTable(colNum, caption) {
151+
let tbody = table.getElementsByTagName('tbody')[0];
152+
let rowsArray = [].slice.call(tbody.rows);
153+
let compare;
150154

151-
table.addEventListener('click', function(e) {
152-
if(e.target.tagName != 'TH') {
153-
return;
155+
switch (caption) {
156+
case 'Name':
157+
compare = function(rowA, rowB) {
158+
if(rowA.cells[colNum].textContent < rowB.cells[colNum].textContent) {
159+
return -1;
160+
};
161+
if(rowA.cells[colNum].textContent > rowB.cells[colNum].textContent) {
162+
return 1;
163+
};
164+
return 0;
165+
};
166+
break;
167+
case 'Last name':
168+
compare = function(rowA, rowB) {
169+
if(rowA.cells[colNum].textContent < rowB.cells[colNum].textContent) {
170+
return -1;
171+
};
172+
if(rowA.cells[colNum].textContent > rowB.cells[colNum].textContent) {
173+
return 1;
174+
};
175+
return 0;
176+
};
177+
break;
178+
case 'Email':
179+
compare = function(rowA, rowB) {
180+
if(rowA.cells[colNum].textContent < rowB.cells[colNum].textContent) {
181+
return -1;
182+
};
183+
if(rowA.cells[colNum].textContent > rowB.cells[colNum].textContent) {
184+
return 1;
185+
};
186+
return 0;
187+
};
188+
break;
189+
};
190+
191+
rowsArray.sort(compare);
192+
table.removeChild(tbody);
193+
for (let i = 0; i < rowsArray.length; i++) {
194+
tbody.appendChild(rowsArray[i]);
195+
};
196+
table.appendChild(tbody);
197+
};
154198
};
155-
sortTable(e.target.cellIndex, e.target.textContent);
156-
});
157199

158-
function sortTable(colNum, caption) {
159-
let tbody = table.getElementsByTagName('tbody')[0];
160-
let rowsArray = [].slice.call(tbody.rows);
161-
let compare;
200+
renderForm() {
201+
let mainContainer = document.querySelector('main .container');
202+
mainContainer.innerHTML = `${this.createForm()}${this.createTable()}`;
203+
this.sort();
204+
};
205+
206+
};
162207

163-
switch (caption) {
164-
case 'Name':
165-
compare = function(rowA, rowB) {
166-
if(rowA.cells[colNum].textContent < rowB.cells[colNum].textContent) {
167-
return -1;
168-
};
169-
if(rowA.cells[colNum].textContent > rowB.cells[colNum].textContent) {
170-
return 1;
171-
};
172-
return 0;
173-
};
174-
break;
175-
case 'Last name':
176-
compare = function(rowA, rowB) {
177-
if(rowA.cells[colNum].textContent < rowB.cells[colNum].textContent) {
178-
return -1;
179-
};
180-
if(rowA.cells[colNum].textContent > rowB.cells[colNum].textContent) {
181-
return 1;
182-
};
183-
return 0;
184-
};
185-
break;
186-
case 'Email':
187-
compare = function(rowA, rowB) {
188-
if(rowA.cells[colNum].textContent < rowB.cells[colNum].textContent) {
189-
return -1;
190-
};
191-
if(rowA.cells[colNum].textContent > rowB.cells[colNum].textContent) {
192-
return 1;
193-
};
194-
return 0;
195-
};
196-
break;
197-
};
208+
let usersContacts = new UsersContacts();
209+
usersContacts.renderForm();
198210

199-
rowsArray.sort(compare);
200-
table.removeChild(tbody);
201-
for (let i = 0; i < rowsArray.length; i++) {
202-
tbody.appendChild(rowsArray[i]);
203-
};
204-
table.appendChild(tbody);
205-
};

0 commit comments

Comments
 (0)