feat: DOM Elements practise#154
Conversation
devmentor-pl
left a comment
devmentor-pl
left a comment
There was a problem hiding this comment.
Żaneto,
Dobra robota 👍
Zostało parę drobnych tematów do refaktoryzacji :)
01/app.js
Outdated
| @@ -1 +1,18 @@ | |||
| console.log('DOM'); No newline at end of file | |||
| const commentsItemNewest = document.querySelector('.comments__item', '.comments__item--newest'); | |||
There was a problem hiding this comment.
Czy faktycznie został wyszukany zadany element czy po prostu pierwszy o klasie .comments__item? (efekt ten sam, ale treść zadania była inna)
Tutaj selektor powinien wyglądać tak: querySelector('.comments__item.comments__item--newest'); - teraz zadziała jak należy :)
01/app.js
Outdated
| @@ -1 +1,18 @@ | |||
| console.log('DOM'); No newline at end of file | |||
| const commentsItemNewest = document.querySelector('.comments__item', '.comments__item--newest'); | |||
| const childrenOfLi = commentsItemNewest.querySelectorAll('p'); | |||
There was a problem hiding this comment.
TUtaj już mamy obiekt "tablicopodobny" czyli mamy dostęp do length więc zamiast pętli wystarczy po prostu: childrenOfLi.length
02/app.js
Outdated
| @@ -1 +1,11 @@ | |||
| console.log('DOM'); No newline at end of file | |||
| const aList = document.querySelectorAll('a'); | |||
There was a problem hiding this comment.
Można też od razu wyszukać odpowiednie przez querySelectorAll('a[data-url]');
03/app.js
Outdated
| const button = document.createElement('button'); | ||
|
|
||
| for (const key in buttonSettings) { | ||
| if (key === 'attr') { |
There was a problem hiding this comment.
Jeśli robimy if-y na każdy przypadek to nie będzie czytelniej zrobić to oddzielnie? tj.
for (const key in buttonSettings.attr) {
if (key === 'className') {
button.classList.add(key);
} else {
button.setAttribute(key, buttonSettings.attr[key]);
}
}
for (const key in buttonSettings.css) {
if (key === 'border') {
button.style[key] = buttonSettings.css[key];
} else if (key === 'padding') {
button.style[key] = buttonSettings.css[key];
} else if (key === 'color') {
button.style[key] = buttonSettings.css[key];
}
}
button.textContent = buttonSettings.text
Teraz widać, żę dla css można nawet prościej:
for (const key in buttonSettings.css) {
button.style[key] = buttonSettings.css[key];
}
05/app.js
Outdated
| let siblingEl = curr.nextElementSibling; | ||
| const siblingsArr = []; | ||
|
|
||
| while ((curr = curr.nextElementSibling)) { | ||
| siblingsArr.push(siblingEl); | ||
| } | ||
|
|
||
| siblingsArr.forEach((el) => { | ||
| el.className = '.siblings'; | ||
| }); |
There was a problem hiding this comment.
Co jeśli curr jest ostatnim dzieckiem? Czy to zadziała? Wygodniej jest zrobić curr.parentElement.children i wykluczyć curr przez if i mamy rozdzieństwo :)
|
|
||
| addAEl.setAttribute('href', item.url); | ||
| addAEl.textContent = item.text; | ||
| }); |
devmentor-pl
left a comment
devmentor-pl
left a comment
There was a problem hiding this comment.
Żaneto,
Teraz jest idealnie! :)
| console.log( | ||
| 'Zostało znalezionych elementów posiadających atrybut data-info w liczbie:', | ||
| spanArr.length | ||
| childrenOfP.length |
| link.setAttribute('href', hasAttribute); | ||
| } | ||
| hasAttribute = link.getAttribute('data-url'); | ||
| link.setAttribute('href', hasAttribute); |
| button.style[key] = buttonSettings.css[key]; | ||
| } | ||
|
|
||
| button.textContent = buttonSettings.text; |
| [...siblingEl].forEach((el) => { | ||
| if (el !== curr) { | ||
| el.className = 'siblings'; | ||
| } |
2 participants
No description provided.