feat: DOM Elements practise

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}

01/app.js

@@ -1,18 +1,7 @@
-const commentsItemNewest = document.querySelector('.comments__item', '.comments__item--newest');
-const childrenOfLi = commentsItemNewest.querySelectorAll('p');
-
-let listOfSpan;
-const spanArr = [];
-
-const listOfP = childrenOfLi.forEach((el) => {
-  listOfSpan = el.querySelectorAll('span');
-
-  for (let i = 0; i < listOfSpan.length; i++) {
-    spanArr.push(listOfSpan[i]);
-  }
-});
+const commentsItemNewest = document.querySelector('.comments__item.comments__item--newest');
+const childrenOfP = commentsItemNewest.querySelectorAll('span');
 
 console.log(
   'Zostało znalezionych elementów posiadających atrybut data-info w liczbie:',
-  spanArr.length
+  childrenOfP.length
 );

02/app.js

@@ -1,11 +1,8 @@
-const aList = document.querySelectorAll('a');
-console.log(aList);
+const aList = document.querySelectorAll('a[data-url]');
 
 let hasAttribute;
 
 const hasLink = aList.forEach((link) => {
-  if (link.hasAttribute('data-url')) {
-    hasAttribute = link.getAttribute('data-url');
-    link.setAttribute('href', hasAttribute);
-  }
+  hasAttribute = link.getAttribute('data-url');
+  link.setAttribute('href', hasAttribute);
 });

03/app.js

@@ -15,31 +15,19 @@ const buttonSettings = {
 
 const button = document.createElement('button');
 
-for (const key in buttonSettings) {
-  if (key === 'attr') {
-    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.attr) {
+  if (key === 'className') {
+    button.classList.add(key);
+  } else {
+    button.setAttribute(key, buttonSettings.attr[key]);
   }
+}
 
-  key === 'text' ? (button.textContent = buttonSettings.text) : undefined;
-
-  if (key === 'css') {
-    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];
-      }
-    }
-  }
+for (const key in buttonSettings.css) {
+  button.style[key] = buttonSettings.css[key];
 }
 
+button.textContent = buttonSettings.text;
+
 const sectionEl = document.querySelector('section');
 sectionEl.appendChild(button);

05/app.js

@@ -7,7 +7,6 @@ const currParentSibling = currParent.nextElementSibling;
 currParentSibling.setAttribute('title', 'nextSiblingElement');
 
 const currLastParentSibling = currParentSibling.nextElementSibling;
-console.log(currLastParentSibling);
 const newParagraph = document.createElement('p');
 
 const cloneArt = currParent.cloneNode(true);
@@ -23,13 +22,11 @@ const btn = document.createElement('button');
 btn.textContent = 'Usuń z koszyka';
 curr.insertAdjacentElement('afterend', btn);
 
-let siblingEl = curr.nextElementSibling;
-const siblingsArr = [];
+let siblingEl = curr.parentElement.children;
+console.log(siblingEl);
 
-while ((curr = curr.nextElementSibling)) {
-  siblingsArr.push(siblingEl);
-}
-
-siblingsArr.forEach((el) => {
-  el.className = '.siblings';
+[...siblingEl].forEach((el) => {
+  if (el !== curr) {
+    el.className = 'siblings';
+  }
 });