Skip to content

Commit 4ff03c0

Browse files
NataliaButenkoNataliaButenko
committed
update phoneApp
1 parent 14228cb commit 4ff03c0

File tree

4 files changed

+165
-99
lines changed

4 files changed

+165
-99
lines changed

‎phoneApp/headerAndFooter.js‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
class HeaderAndFooter {
2+
constructor(caption) {
3+
this.caption = caption;
4+
this.renderLink = [
5+
{content:'Contacts', icon: 'search'},
6+
{content:'Keypad', icon: 'th'},
7+
{content:'Edit contact', icon: 'pencil'},
8+
{content:'User', icon: 'user'},
9+
{content:'Add user', icon: 'plus'}
10+
];
11+
}
12+
13+
createHeader() {
14+
let header = `
15+
<header class="header">
16+
<div class="container top-radius">
17+
<h2>${this.caption}</h2>
18+
</div>
19+
</header>
20+
`
21+
return header;
22+
}
23+
24+
createFooter() {
25+
let done = `
26+
<footer class="footer">
27+
<div class="container bottom-radius">
28+
<nav class="main-nav">
29+
`
30+
let testIndexHtml = function(str) {
31+
if(str === 'Contacts') {
32+
return 'index';
33+
} else {
34+
return str;
35+
}
36+
}
37+
38+
let contentNav = this.renderLink.reduce((start, elem) => {
39+
start += `
40+
<a href="${testIndexHtml(elem.content)}.html" class="tab ${elem.content}">
41+
<span class="glyphicon glyphicon-${elem.icon}" aria-hidden="true"></span>
42+
<span class = "tab-text">${elem.content}</span>
43+
</a>
44+
`
45+
return start;
46+
}, done);
47+
48+
let footer = contentNav + '</nav>\n </div>\n </footer>';
49+
return footer;
50+
}
51+
52+
createMain() {
53+
return `
54+
<main class="main">
55+
<div class="container">
56+
</div>
57+
</main>
58+
`
59+
}
60+
61+
createTemplate() {
62+
document.body.innerHTML = this.createHeader() + this.createMain() + this.createFooter();
63+
}
64+
};
65+
let headerAndFooter = new HeaderAndFooter('Contacts');
66+
headerAndFooter.createTemplate();
67+
68+
69+
let buttonKeypad = document.querySelector('a.Keypad');
70+
buttonKeypad.onclick = function(e) {
71+
e.preventDefault();
72+
let keypad = new Keypad();
73+
keypad.displayKeypad();
74+
}

‎phoneApp/index.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
<link rel="stylesheet" type="text/css" href="style.css">
88
</head>
99
<body>
10-
<script src="index.js"></script>
10+
<script src="headerAndFooter.js" defer></script>
11+
<script src="index.js" defer></script>
12+
<script src="keypad.js" defer></script>
1113
</body>
1214
</html>

‎phoneApp/index.js‎

Lines changed: 50 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
//Task3
12
class UsersContacts {
23
constructor() {
34
this.dataUsers = [
@@ -85,111 +86,62 @@ class UsersContacts {
8586
this.columnHeadings = ['Name', 'Last name', 'Email'];
8687
};
8788

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() {
89+
createForm() {
13890
return `
139-
<header class = 'header'>
140-
<div class = 'container top-radius'>
141-
<h2>Contacts</h2>
142-
</div>
143-
</header>
91+
<form class="form-inline search-form">
92+
<div class="form-group">
93+
<label class="sr-only" for="search">Search</label>
94+
<input type="text" class="form-control" id= "search" placeholder="Search">
95+
</div>
96+
</form>
14497
`
14598
};
14699

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>
100+
createTable() {
101+
let self = this;
102+
let thead = function() {
103+
let openThead = `
104+
<thead>
105+
<tr>
106+
`;
107+
let createThead = self.columnHeadings.reduce((start, elem) => {
108+
start += `<th>${elem}</th>\n`
109+
return start;
110+
}, '');
111+
let resultThead = openThead + `${createThead}</tr></thead>`;
112+
return resultThead;
113+
}
114+
let tbody = function() {
115+
let openTbody = `
116+
<tbody>
117+
`
118+
let createTbody = self.dataUsers.reduce((start, elem) => {
119+
start += `
120+
<tr>
121+
<td>${elem.name}</td>
122+
<td>${elem.lastName}</td>
123+
<td>${elem.email}</td>
124+
</tr>
125+
`
126+
return start;
127+
}, '');
128+
let resultTbody = openTbody + `${createTbody}</tbody>`;
129+
return resultTbody;
130+
}
131+
let resultTable = `
132+
<table class="table table-hover contacts">
133+
${thead()}
134+
${tbody()}
135+
</table>
159136
`
137+
return resultTable;
160138
}
161139

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-
}
140+
addForm() {
141+
let mainContainer = document.querySelector('main .container');
142+
mainContainer.innerHTML += `${this.createForm()}${this.createTable()}`;
143+
}
192144
};
193145

194146
let usersContacts = new UsersContacts();
195-
usersContacts.render();
147+
usersContacts.addForm();

‎phoneApp/keypad.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
class Keypad {
2+
constructor() {
3+
this.buttonsContent = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'];
4+
}
5+
6+
createNumberField() {
7+
return `
8+
<div class="number">
9+
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
10+
<span class ="numbers">(050)5005050</span>
11+
<span class="glyphicon glyphicon-circle-arrow-left" aria-hidden="true"></span>
12+
</div>
13+
`
14+
}
15+
16+
createKeypadHolder() {
17+
let open = '<div class="keypad-holder">';
18+
let createButtons = this.buttonsContent.reduce((start, elem) => {
19+
start += `<button class="key">${elem}</button>`
20+
return start;
21+
}, '');
22+
let createButtonCall =
23+
'<button class="key"> <span class="glyphicon glyphicon-earphone" aria-hidden="true"></span></button>';
24+
let resKeypadHolder = `${open}${createButtons}${createButtonCall}</div>`
25+
return resKeypadHolder;
26+
}
27+
28+
displayKeypad() {
29+
let caption = document.querySelector('header h2');
30+
caption.textContent = 'Keypad';
31+
let contentKeypad = this.createNumberField() + this.createKeypadHolder();
32+
let mainContainer = document.querySelector('main .container');
33+
mainContainer.innerHTML = contentKeypad;
34+
}
35+
};
36+
37+
// let keypad = new Keypad();
38+
// keypad.displayKeypad();

0 commit comments

Comments
 (0)