Skip to content

Commit 7725d89

Browse files
NataliaButenkoNataliaButenko
committed
update phoneApp (10.08.18)
1 parent 283863e commit 7725d89

File tree

4 files changed

+198
-103
lines changed

4 files changed

+198
-103
lines changed

‎phoneApp/addUser.js‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,15 @@ class AddUser {
1616
`;
1717
let editBasicField = this.basicUserInfo.reduce((start, elem) => {
1818
start += `
19-
<div class="edit-field">
19+
<div class="edit-field ">
2020
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
2121
<span>${elem}</span>
2222
</button>
23+
<label>
24+
<input type="text" class="${elem}"/>
25+
<button class="save">s</button>
26+
<button class="cancel">c</button>
27+
</label>
2328
</div>
2429
`;
2530
return start;
@@ -34,8 +39,9 @@ class AddUser {
3439
<div class="edit-info">
3540
`;
3641
let editAdditionalField = this.additionalUserInfo.reduce((start, elem) => {
42+
let addClass = elem.replace(/\s/g, '_');
3743
start += `
38-
<div class="edit-field">
44+
<div class="edit-field ${addClass}">
3945
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
4046
<span>${elem}</span>
4147
</button>
@@ -52,11 +58,26 @@ class AddUser {
5258
return resEditAdditionalField;
5359
};
5460

61+
addEvents() {
62+
let test = document.querySelector('.main-info-holder');
63+
test.addEventListener('click', function(e) {
64+
if(e.target.tagName == "BUTTON" || e.target.parentNode.tagName == "BUTTON") {
65+
let label = document.querySelectorAll('div.edit-field label');
66+
[...label].forEach((elem) => {
67+
if(elem.firstElementChild.className == e.target.textContent){
68+
elem.style.display = 'block';
69+
};
70+
});
71+
};
72+
});
73+
74+
}
75+
5576
renderAddUser() {
5677
let captionAddUser = document.querySelector('.container.top-radius');
5778
captionAddUser.innerHTML = `
5879
<nav class="user-top-line">
59-
<a href="user.html">Cansel</a>
80+
<a href="user.html">Cancel</a>
6081
<button class = "done-btn">Done</button>
6182
</nav>
6283
`;
@@ -67,5 +88,6 @@ class AddUser {
6788
</div>
6889
${this.fieldAdditionalAddUserInfo()}
6990
`;
91+
this.addEvents();
7092
};
7193
};

‎phoneApp/index.js‎

Lines changed: 104 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -2,86 +2,86 @@
22
class UsersContacts {
33
constructor() {
44
this.dataUsers = [
5-
{
6-
name: 'Иван',
7-
lastName: 'Петров',
8-
email: '[email protected]'
9-
},
10-
{
11-
name: 'Сергей',
12-
lastName: 'Сергей',
13-
email: '[email protected]'
14-
},
15-
{
16-
name: 'Иван',
17-
lastName: 'Иванов',
18-
email: '[email protected]'
19-
},
20-
{
21-
name: 'Александр',
22-
lastName: 'Александров',
23-
email: '[email protected]'
24-
},
25-
{
26-
name: 'Алекс',
27-
lastName: 'Смирнов',
28-
email: '[email protected]'
29-
},
30-
{
31-
name: 'Сергей',
32-
lastName: 'Волков',
33-
email: '[email protected]'
34-
},
35-
{
36-
name: 'Мария',
37-
lastName: 'Шарапова',
38-
email: '[email protected]'
39-
},
40-
{
41-
name: 'Александр',
42-
lastName: 'Винник',
43-
email: '[email protected]'
44-
},
45-
{
46-
name: 'Дарий',
47-
lastName: 'Смирнов',
48-
email: '[email protected]'
49-
},
50-
{
51-
name: 'Елена',
52-
lastName: 'Лещенко',
53-
email: '[email protected]'
54-
},
55-
{
56-
name: 'Ольга',
57-
lastName: 'Новикова',
58-
email: '[email protected]'
59-
},
60-
{
61-
name: 'Наталья',
62-
lastName: 'Шемякина',
63-
email: '[email protected]'
64-
},
65-
{
66-
name: 'Анна',
67-
lastName: 'Донцова',
68-
email: '[email protected]'
69-
},
70-
{
71-
name: 'Влад',
72-
lastName: 'Яма',
73-
email: '[email protected]'
74-
},
75-
{
76-
name: 'Кира',
77-
lastName: 'Воробьева',
78-
email: '[email protected]'
79-
},
80-
{
81-
name: 'Виктор',
82-
lastName: 'Кривенко',
83-
email: '[email protected]'
84-
}
5+
// {
6+
// name: 'Иван',
7+
// lastName: 'Петров',
8+
// email: '[email protected]'
9+
// },
10+
// {
11+
// name: 'Сергей',
12+
// lastName: 'Сергей',
13+
// email: '[email protected]'
14+
// },
15+
// {
16+
// name: 'Иван',
17+
// lastName: 'Иванов',
18+
// email: '[email protected]'
19+
// },
20+
// {
21+
// name: 'Александр',
22+
// lastName: 'Александров',
23+
// email: '[email protected]'
24+
// },
25+
// {
26+
// name: 'Алекс',
27+
// lastName: 'Смирнов',
28+
// email: '[email protected]'
29+
// },
30+
// {
31+
// name: 'Сергей',
32+
// lastName: 'Волков',
33+
// email: '[email protected]'
34+
// },
35+
// {
36+
// name: 'Мария',
37+
// lastName: 'Шарапова',
38+
// email: '[email protected]'
39+
// },
40+
// {
41+
// name: 'Александр',
42+
// lastName: 'Винник',
43+
// email: '[email protected]'
44+
// },
45+
// {
46+
// name: 'Дарий',
47+
// lastName: 'Смирнов',
48+
// email: '[email protected]'
49+
// },
50+
// {
51+
// name: 'Елена',
52+
// lastName: 'Лещенко',
53+
// email: '[email protected]'
54+
// },
55+
// {
56+
// name: 'Ольга',
57+
// lastName: 'Новикова',
58+
// email: '[email protected]'
59+
// },
60+
// {
61+
// name: 'Наталья',
62+
// lastName: 'Шемякина',
63+
// email: '[email protected]'
64+
// },
65+
// {
66+
// name: 'Анна',
67+
// lastName: 'Донцова',
68+
// email: '[email protected]'
69+
// },
70+
// {
71+
// name: 'Влад',
72+
// lastName: 'Яма',
73+
// email: '[email protected]'
74+
// },
75+
// {
76+
// name: 'Кира',
77+
// lastName: 'Воробьева',
78+
// email: '[email protected]'
79+
// },
80+
// {
81+
// name: 'Виктор',
82+
// lastName: 'Кривенко',
83+
// email: '[email protected]'
84+
// }
8585
];
8686
this.columnHeadings = ['Name', 'Last name', 'Email'];
8787
};
@@ -202,9 +202,32 @@ class UsersContacts {
202202
mainContainer.innerHTML = `${this.createForm()}${this.createTable()}`;
203203
this.sort();
204204
};
205+
206+
uploadingData() {
207+
const url = 'http://easycode-js.herokuapp.com/Butenko_N/users';
208+
const xhr = new XMLHttpRequest();
209+
xhr.onreadystatechange = () => {
210+
if(xhr.readyState === XMLHttpRequest.DONE) {
211+
//this.dataUsers = xhr.responseText;
212+
let usersArr = JSON.parse(xhr.responseText);
213+
let newUsers = usersArr.map((elem) => {
214+
return {
215+
email: elem.email,
216+
name: elem.fullName.split(' ')[0],
217+
lastName: elem.fullName.split(' ')[1],
218+
};
219+
});
220+
this.dataUsers = newUsers;
221+
this.renderForm();
222+
};
223+
};
224+
xhr.open('GET', url, true);
225+
xhr.send();
226+
227+
};
205228

206229
};
207230

208231
let usersContacts = new UsersContacts();
209-
usersContacts.renderForm();
232+
usersContacts.uploadingData();
210233

‎phoneApp/keypad.js‎

Lines changed: 48 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ class Keypad {
77
return `
88
<div class="number">
99
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
10-
<span class ="numbers"></span>
10+
<input type ="text" class="numbers">
1111
<span class="glyphicon glyphicon-circle-arrow-left" aria-hidden="true"></span>
1212
</div>
1313
`;
@@ -31,36 +31,65 @@ class Keypad {
3131
let contentKeypad = this.createNumberField() + this.createKeypadHolder();
3232
let mainContainer = document.querySelector('main .container');
3333
mainContainer.innerHTML = contentKeypad;
34-
this.addListeners();
34+
this.addEvents();
3535
};
3636

37-
addListeners() {
37+
addEvents() {
3838
let keypadHolder = document.querySelector('div.keypad-holder');
3939
keypadHolder.addEventListener('click', function(e) {
4040
if(e.target.tagName === 'BUTTON') {
41-
let input = document.querySelector('span.numbers');
42-
if(input.textContent.length === 0) {
43-
input.textContent += `(${e.target.textContent}`;
44-
} else if(input.textContent.length === 4) {
45-
input.textContent += `)-${e.target.textContent}`;
46-
} else if(input.textContent.length === 8) {
47-
input.textContent += `-${e.target.textContent}`;
48-
} else if(input.textContent.length === 11) {
49-
input.textContent += `-${e.target.textContent}`;
50-
} else if(input.textContent.length > 14) {
41+
let input = document.querySelector('input.numbers');
42+
if(input.value.length === 0) {
43+
input.value += `(${e.target.textContent}`;
44+
} else if(input.value.length === 4) {
45+
input.value += `)-${e.target.textContent}`;
46+
} else if(input.value.length === 8) {
47+
input.value += `-${e.target.textContent}`;
48+
} else if(input.value.length === 11) {
49+
input.value += `-${e.target.textContent}`;
50+
} else if(input.value.length > 14) {
5151
return;
5252
} else {
53-
input.textContent += e.target.textContent;
54-
}
55-
// console.log(input.textContent.length);
56-
// input.textContent += e.target.textContent;
53+
input.value += e.target.textContent;
54+
};
5755
};
5856
});
5957
let deletNum = document.querySelector('.glyphicon-circle-arrow-left');
6058
deletNum.addEventListener('click', function(e) {
61-
let input = document.querySelector('span.numbers');
62-
input.textContent = input.textContent.slice(0, -1);
59+
let input = document.querySelector('input.numbers');
60+
input.value = input.value.slice(0, -1);
6361
});
62+
let input = document.querySelector('input.numbers');
63+
input.onkeypress = function(event) {
64+
if((event.charCode >= 48 && event.charCode <=57) || event.charCode == 42 || event.charCode == 35) {
65+
if(input.value.length === 0) {
66+
input.value += `(${event.target.textContent}`;
67+
} else if(input.value.length === 4) {
68+
input.value += `)-${event.target.textContent}`;
69+
} else if(input.value.length === 8) {
70+
input.value += `-${event.target.textContent}`;
71+
} else if(input.value.length === 11) {
72+
input.value += `-${event.target.textContent}`;
73+
} else if(input.value.length > 14) {
74+
return false;
75+
} else {
76+
input.value += event.target.textContent;
77+
};
78+
} else {
79+
return false;
80+
};
81+
};
82+
let addNum = document.querySelector('.glyphicon-plus-sign');
83+
addNum.addEventListener('click', function(e) {
84+
let addUser = new AddUser();
85+
addUser.renderAddUser();
86+
let placeNum = document.querySelector('.add_mobile_phone');
87+
placeNum.innerHTML = `
88+
<span>
89+
+38 ${input.value}
90+
</span>
91+
`;
92+
});
6493
};
6594

6695
};

‎phoneApp/style.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -302,6 +302,7 @@ h3 {
302302
border-bottom: 1px solid #fff;
303303
width: 100%;
304304
display: flex;
305+
flex-direction: column;
305306
}
306307

307308
.delete-btn {
@@ -334,4 +335,24 @@ h3 {
334335

335336
nav.user-top-line > a {
336337
color: inherit;
338+
}
339+
340+
input[type ="text"].numbers {
341+
border: none;
342+
background: #ccc !important;
343+
text-align: center;
344+
outline: none;
345+
}
346+
347+
div.edit-field label {
348+
display: none;
349+
}
350+
351+
div.edit-field label button {
352+
width: 20px;
353+
height: 26px;
354+
}
355+
356+
div.edit-field label input {
357+
width: 192px;
337358
}

0 commit comments

Comments
 (0)