Vlad dom #29
Vlad dom #29
Conversation
|
|
||
| function createNavList(photos) { | ||
| let btns = photos.map(({ name, img, id }) => createBtn(name, img, id)); | ||
| let navList = document.querySelector(".nav__list"); |
| </li>`; | ||
| }; | ||
|
|
||
| function createNavList(photos) { |
There was a problem hiding this comment.
Is there a reasong for this function to exist? It seems like the only time you use it is right after you define it and that's it.
| }; | ||
| fillContent(photos[0]); | ||
|
|
||
| const navList = document.querySelector(".nav__list"); |
There was a problem hiding this comment.
You already got navList in the function createNavList. If you could just place createNavList code outside the function scope, you would already have this variable.
|
|
||
| const navList = document.querySelector(".nav__list"); | ||
|
|
||
| navList.addEventListener("click", (event) => { |
There was a problem hiding this comment.
You are not using event anywhere except the next line, it makes sence to desctruct it and just get {target} as a function argument.
There was a problem hiding this comment.
i.e. do like this?
There was a problem hiding this comment.
What I meant is that you can recieve { target } in the functions arguments, instead of event. This will extract target value from the incoming event argument and establish it as local value. You will not need to use event.target each time you need it after these changes.
| const target = event.target; | ||
| if (target && target.classList.contains("nav__btn")) { | ||
| let photoId = target.id; | ||
| let photoItem = photos.find((item) => item.id === photoId); |
| <img class="photo-img" src="img/mystical-mountain.jpg" alt=""> | ||
| </div> | ||
| <figcaption> | ||
| <div class="photo__name"></div> |
There was a problem hiding this comment.
This probably should be a h2 tag with a page title, not a photo description.
|
Well done! |
dom-js
Demo |
Code base
The code is submitted in a dedicated feature branch.
Only code files are submitted.
Please, review.