phoneApp с помощью innerHtml #17
Conversation
phoneApp/js/main.js
Outdated
| ${this.colums.map(colum => {return`<th>${colum}</th>`}).join('')} | ||
| </thead> | ||
| <tbody> | ||
| ${this.users.map(user => {return` |
There was a problem hiding this comment.
you can omit return word it will look more harmonious
phoneApp/js/main.js
Outdated
| </form> | ||
| <table class="table table-hover contacts"> | ||
| <thead> | ||
| ${this.colums.map(colum => {return`<th>${colum}</th>`}).join('')} |
There was a problem hiding this comment.
the same about return keyword
phoneApp/js/main.js
Outdated
| <footer class="footer"> | ||
| <div class="container bottom-radius"> | ||
| <nav class="main-nav"> | ||
| <a href="index.html" class="tab active"> |
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
phoneApp/js/main.js
Outdated
| }, | ||
| ]; | ||
| const colums = ['Name', 'LastName', 'Email']; | ||
| const app = { |
There was a problem hiding this comment.
please make app a class with ContactPage name
phoneApp/js/main.js
Outdated
| users, | ||
| colums, | ||
| render() { | ||
| document.body.innerHTML += this.renderHeader() +this.renderMain() + this.renderFooter(); |
There was a problem hiding this comment.
const contactPageLayot = this.renderHeader() +this.renderMain() + this.renderFooter();
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
phoneApp/js/keypad.js
Outdated
|
|
||
| } | ||
| render() { | ||
| const mountNode = document.createElement('div'); |
There was a problem hiding this comment.
We don't need to create such elements in JS :) add it to html file is fine
phoneApp/js/keypad.js
Outdated
| render() { | ||
| const mountNode = document.createElement('div'); | ||
| mountNode.setAttribute('id', 'mountNode'); | ||
| mountNode.innerHTML += this.renderHeader() +this.renderMain() + this.renderFooter(); |
There was a problem hiding this comment.
you know... if we just could add "html-layout" without method dividings it could be more informative that
renderHeader + remderMain + renderFooter
…строка, получаеться я хочу получить юзеров, которых еще не успела записать
No description provided.