Dom task #389
Dom task #389
Conversation
|
Hey! Congratulations on your PR! 😎😎😎 Let's do some self-checks to fix most common issues and to make some improvements to the code before reviewers put their hands on the code. Go through the requirements/most common mistakes listed/linked below and fix the code as appropriate. If you have any questions to requirements/common mistakes feel free asking them here or in Students' chat. When you genuinely believe you are done put a comment stating that you have completed self-checks and fixed code accordingly. Also, be aware, that if you would silently ignore this recommendation, a mentor can think that you are still working on fixes. And your PR will not be reviewed. 😒 Please, make sure you haven't made common mistakes Universal recommendations:
Also take a note of the requirements above and follow them in all your future projects. By the way, you may proceed to the next task before this one is reviewed and merged. Sincerely yours, |
|
I've completed self-checks. |
|
@nvklap Awesome work 🚀 |
submissions/nvklap/dom/css/style.css
Outdated
| @@ -0,0 +1,242 @@ | |||
| @font-face { | |||
| font-family: 'Veteran Typewriter'; | |||
| src: url('../fonts/veteran\ typewriter.ttf') format('truetype'); | |||
There was a problem hiding this comment.
Avoid dividing file names by space. Use next variants: veteran-typewriter.ttf or veteran_typewriter.ttf
submissions/nvklap/dom/css/style.css
Outdated
| } | ||
|
|
||
| .header { | ||
| background-color: #9b011b; |
There was a problem hiding this comment.
Try to use CSS3 Vars for keeping your colours in one place. This is good practice handling colours/typography in one place.
submissions/nvklap/dom/css/style.css
Outdated
| } | ||
|
|
||
| .content-figure { | ||
| margin: -10px -10px 10px; |
There was a problem hiding this comment.
Try to avoid using negative margins. Negative margins are a lazy way solution. In your case, you can remove the margin from .content-figure, remove padding for .content and add a new wrapper for inner content excluding .content-figure which will have padding: 10px;
submissions/nvklap/dom/js/app.js
Outdated
| @@ -0,0 +1,401 @@ | |||
| const taskmasterData = [ | |||
| { | |||
| id: 0, | |||
There was a problem hiding this comment.
Don't be afraid to separate data if it will simplify the logic. In your case, if you move zero seria to independent object initTaskmasterData you will remove all checks related to initSeriesId
submissions/nvklap/dom/js/app.js
Outdated
| } | ||
|
|
||
| function createContentImg(src, alt) { | ||
| img = document.createElement('img'); |
There was a problem hiding this comment.
Missing const keyword
submissions/nvklap/dom/js/app.js
Outdated
| function createContentHeading(tag, className, text) { | ||
| const heading = document.createElement(tag); | ||
| heading.classList.add(className); | ||
| heading.innerText = text; |
There was a problem hiding this comment.
Prefer textContent over innerText when you alting text node.
|
UI/UX Improvement:
|
|
Thanks a lot for review and useful advise! I've fixed my code. |
submissions/nvklap/dom/js/app.js
Outdated
| const navWrapper = document.querySelector('.series-nav'); | ||
| const contentWrapper = document.querySelector('.content'); | ||
| const btnMore = document.querySelector('.btn-more'); | ||
| const initSeriesId = 0; |
There was a problem hiding this comment.
Perhaps you forget to remove initSeriesId and filtering related to it.
submissions/nvklap/dom/js/app.js
Outdated
| addNavigation(taskmasterData); | ||
| initContent(contentWrapper, initTaskmasterData); | ||
|
|
||
| const navList = document.querySelector('.series-list'); |
There was a problem hiding this comment.
Move navList to other selectors.
submissions/nvklap/dom/js/app.js
Outdated
| addTemplateToDom(parent, htmlTemplate); | ||
| } | ||
|
|
||
| function showContent({ target }) { |
There was a problem hiding this comment.
addNavigation, createContentList and showContent do too much stuff. Try to decompose them into smaller functions.
|
LGTM! 😃 |
Dom api task
Demo |
Code base
The code is submitted in a dedicated feature branch.
Only code files are submitted.
Please, review.