Uh oh!
There was an error while loading. Please reload this page.
phoneApp с помощью innerHtml - #17
Conversation
| ${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
| </form> | ||
| <table class="table table-hover contacts"> | ||
| <thead> | ||
| ${this.colums.map(colum => {return`<th>${colum}</th>`}).join('')} |
| <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
<navclass="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
| }, | ||
| ]; | ||
| const colums = ['Name', 'LastName', 'Email']; | ||
| const app = { |
There was a problem hiding this comment.
please make app a class with ContactPage name
| 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,
<divid="mountNode"></div>And update content only inside such node. updating the whole document.body is too risky
| } | ||
| 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
| 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.