Skip to content

phoneApp #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
NataliaButenko wants to merge 11 commits into
base: master
Choose a base branch
from
Open

phoneApp #19

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
15f323a
phoneApp
NataliaButenko Jul 24, 2018
14228cb
Merge branch 'master' of https://github.com/EasyCode-JavaScriptReact-…
NataliaButenko Jul 31, 2018
4ff03c0
update phoneApp
NataliaButenko Jul 31, 2018
eee1fa2
update phoneApp
NataliaButenko Aug 3, 2018
283863e
update phoneApp (07.08.18)
NataliaButenko Aug 7, 2018
7725d89
update phoneApp (10.08.18)
NataliaButenko Aug 10, 2018
3b946f2
update phomeApp (12.08.18)
NataliaButenko Aug 12, 2018
59872b9
update phoneApp (13.08.18)
Aug 13, 2018
ec0a97f
update phoneApp (14.08.18)
NataliaButenko Aug 14, 2018
cbf117d
update phoneApp (21.08.18)
NataliaButenko Aug 21, 2018
8baa4ff
update phoneApp
NataliaButenko Aug 26, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions phoneApp/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<title>homework_15</title>
<meta charset="utf-8" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="index.js"></script>
</body>
</html>
195 changes: 195 additions & 0 deletions phoneApp/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,195 @@
class UsersContacts {
constructor() {
this.dataUsers = [
{
name: 'Иван',
lastName: 'Петров',
email: '[email protected]'
},
{
name: 'Сергей',
lastName: 'Сергей',
email: '[email protected]'
},
{
name: 'Иван',
lastName: 'Иванов',
email: '[email protected]'
},
{
name: 'Александр',
lastName: 'Александров',
email: '[email protected]'
},
{
name: 'Алекс',
lastName: 'Смирнов',
email: '[email protected]'
},
{
name: 'Сергей',
lastName: 'Волков',
email: '[email protected]'
},
{
name: 'Мария',
lastName: 'Шарапова',
email: '[email protected]'
},
{
name: 'Александр',
lastName: 'Винник',
email: '[email protected]'
},
{
name: 'Дарий',
lastName: 'Смирнов',
email: '[email protected]'
},
{
name: 'Елена',
lastName: 'Лещенко',
email: '[email protected]'
},
{
name: 'Ольга',
lastName: 'Новикова',
email: '[email protected]'
},
{
name: 'Наталья',
lastName: 'Шемякина',
email: '[email protected]'
},
{
name: 'Анна',
lastName: 'Донцова',
email: '[email protected]'
},
{
name: 'Влад',
lastName: 'Яма',
email: '[email protected]'
},
{
name: 'Кира',
lastName: 'Воробьева',
email: '[email protected]'
},
{
name: 'Виктор',
lastName: 'Кривенко',
email: '[email protected]'
}
];
this.columnHeadings = ['Name', 'Last name', 'Email'];
};

render() {

document.body.innerHTML += this.createHeader();
Copy link
Member

@OlegLustenko OlegLustenko Jul 24, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oyy!
as I see you updating innerHTML several times, it's better to update it only once

Copy link
Member

@OlegLustenko OlegLustenko Jul 24, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

document.body.innerHTML not sure I like to use document.body.

You have to create an additional tag at index.html and call it, for example,

<div id="mountNode"></div>

And update content only inside such node. updating the whole document.body is too risky

document.body.innerHTML += this.createMain();
let insert = document.querySelector('main > div');
insert.appendChild(this.createTable());
Copy link
Member

@OlegLustenko OlegLustenko Jul 24, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

pretty sure you have to create table with inner HTML also

document.body.innerHTML += this.createFooter();
};

createNewElement(newElem) {
return document.createElement(newElem);
};

createTable() {
let table = this.createNewElement('table');
table.setAttribute('class', 'table table-hover contacts');
table.appendChild(this.cteateTheadInTable());
table.appendChild(this.cteateTbodyInTable());
return table;
};

cteateTheadInTable() {
let thead = this.createNewElement('thead');
let tr = this.createNewElement('tr');
thead.appendChild(tr);
this.columnHeadings.forEach((elem) => {
let th = this.createNewElement('th');
th.textContent = elem;
tr.appendChild(th);
});
return thead;
};

cteateTbodyInTable() {
let tbody = this.createNewElement('tbody');
//table.appendChild(tbody);
this.dataUsers.forEach((elem) => {
let tr = this.createNewElement('tr')
tbody.appendChild(tr);
let arrObjkeys = Object.keys(elem);
arrObjkeys.forEach((elemTd) => {
let td = this.createNewElement('td');
td.textContent = elem[elemTd];
tr.appendChild(td);
});
});
return tbody;
};

createHeader() {
return `
<header class = 'header'>
<div class = 'container top-radius'>
<h2>Contacts</h2>
</div>
</header>
`
};

createMain() {
return `
<main>
<div class="container">
<form class="form-inline search-form">
<div class="form-group">
<label class="sr-only" for="search">Search</label>
<input type="text" class="form-control" id= "search" placeholder="Search">
</div>
</form>

</main>
`
}

createFooter() {
return `
<footer class="footer">
<div class="container bottom-radius">
<nav class="main-nav">
<a href="index.html" class="tab active">
Copy link
Member

@OlegLustenko OlegLustenko Jul 24, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe you could make links more reusable.

What if one day you have to set class but the click ? or something more expensive.

I guess it could look that way

<nav class="main-nav">
 this.renderLink({ content:'Contacts', className:'active', icon:'search'});
 this.renderLink({ content:'Keypad', icon:'th'});
 this.renderLink({ content:'Edit contact' });
 ...
</nav>

We could reuse some HTML parts and create a smaller reusable blocks

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<span class = "tab-text">Contacts</span>
</a>
<a href="keypad.html" class="tab">
<span class="glyphicon glyphicon-th" aria-hidden="true"></span>
<span class = "tab-text">Keypad</span>
</a>
<a href="edit-contact.html" class="tab">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
<span class = "tab-text">Edit contact</span>
</a>
<a href="user.html" class="tab">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<span class = "tab-text">User</span>
</a>
<a href="add-user.html" class="tab">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
<span class = "tab-text">Add user</span>
</a>
</nav>
</div>
</footer>
`
}
};

let usersContacts = new UsersContacts();
usersContacts.render();
Loading