phoneApp #19
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,195 @@ | ||
| class UsersContacts { | ||
| constructor() { | ||
| this.dataUsers = [ | ||
| { | ||
| name: 'Иван', | ||
| lastName: 'Петров', | ||
| email: 'IvanPetrov@ec.ua' | ||
| }, | ||
| { | ||
| name: 'Сергей', | ||
| lastName: 'Сергей', | ||
| email: 'SergeiSergeev@ec.ua' | ||
| }, | ||
| { | ||
| name: 'Иван', | ||
| lastName: 'Иванов', | ||
| email: 'IvanIvanov@ec.ua' | ||
| }, | ||
| { | ||
| name: 'Александр', | ||
| lastName: 'Александров', | ||
| email: 'AlexAlex@ec.ua' | ||
| }, | ||
| { | ||
| name: 'Алекс', | ||
| lastName: 'Смирнов', | ||
| email: 'AlexSmirnov@ec.ua' | ||
| }, | ||
| { | ||
| name: 'Сергей', | ||
| lastName: 'Волков', | ||
| email: 'VolkovSergey@ec.ua' | ||
| }, | ||
| { | ||
| name: 'Мария', | ||
| lastName: 'Шарапова', | ||
| email: 'MariyaSharapova@ec.ua' | ||
| }, | ||
| { | ||
| name: 'Александр', | ||
| lastName: 'Винник', | ||
| email: 'AlexVinnik@ec.u' | ||
| }, | ||
| { | ||
| name: 'Дарий', | ||
| lastName: 'Смирнов', | ||
| email: 'DariySmirnov@ec.ua' | ||
| }, | ||
| { | ||
| name: 'Елена', | ||
| lastName: 'Лещенко', | ||
| email: 'ElenaLeshenko@ec.ua' | ||
| }, | ||
| { | ||
| name: 'Ольга', | ||
| lastName: 'Новикова', | ||
| email: 'OlgaNovikova@ec.ua' | ||
| }, | ||
| { | ||
| name: 'Наталья', | ||
| lastName: 'Шемякина', | ||
| email: 'ShemyakinaN@ec.ua' | ||
| }, | ||
| { | ||
| name: 'Анна', | ||
| lastName: 'Донцова', | ||
| email: 'AnnaDontsova@ec.ua' | ||
| }, | ||
| { | ||
| name: 'Влад', | ||
| lastName: 'Яма', | ||
| email: 'VladYama@ec.ua' | ||
| }, | ||
| { | ||
| name: 'Кира', | ||
| lastName: 'Воробьева', | ||
| email: 'Kira1990@ec.ua' | ||
| }, | ||
| { | ||
| name: 'Виктор', | ||
| lastName: 'Кривенко', | ||
| email: 'ViktorKriv@ec.ua' | ||
| } | ||
| ]; | ||
| this.columnHeadings = ['Name', 'Last name', 'Email']; | ||
| }; | ||
|
|
||
| render() { | ||
|
|
||
| document.body.innerHTML += this.createHeader(); | ||
|
Member
There was a problem hiding this comment. 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()); | ||
|
Member
There was a problem hiding this comment. 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"> | ||
|
Member
There was a problem hiding this comment. 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(); | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
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