practice-js-dom-elements

01/app.js

@@ -1 +1,11 @@
-console.log('DOM');
+console.log('DOM');
+
+const element = document.querySelector(
+  '.comments__item.comments__item--newest'
+);
+console.log(element);
+
+if (element) {
+  const element2 = element.querySelectorAll('[data-info]');
+  console.log(`Zostały znalezione ${element2.length} elementy`);
+}

02/app.js

@@ -1 +1,9 @@
-console.log('DOM');
+console.log('DOM');
+
+const links = document.querySelectorAll('[data-url]');
+console.log(links);
+
+links.forEach((el) => {
+  const attribute = el.getAttribute('data-url');
+  el.setAttribute('href', attribute);
+});

03/app.js

@@ -3,12 +3,25 @@ console.log('DOM');
 const buttonSettings = {
     attr: {
         className: 'btn',
-        title: 'super button'
+        title: 'super button',
     },
     css: {
         border: '1px solid #336699',
         padding: '5px 20px',
-        color: '#444'
+        color: '#444',
     },
     text: 'Click me!',
-}
+};
+const container = document.querySelector('.parent-for-button');
+const button = document.createElement('button');
+
+for (const key in buttonSettings.attr) {
+    const value = buttonSettings.attr[key];
+    button[key] = value;
+}
+for (const key in buttonSettings.css) {
+    const value = buttonSettings.css[key];
+    button.style[key] = value;
+}
+button.innerText = buttonSettings.text;
+container.appendChild(button);

04/app.js

@@ -1,8 +1,21 @@
 console.log('DOM');
 
-// struktura do wykorzystania w pętli
+const nav = document.querySelector('nav');
+const ulElement = document.createElement('ul');
+
 const menuItems = [
-    {text: 'start', url: '/'},
-    {text: 'galeria', url: '/gallery'},
-    {text: 'kontakt', url: '/contact'},
-];
+    { text: 'start', url: '/' },
+    { text: 'galeria', url: '/gallery' },
+    { text: 'kontakt', url: '/contact' },
+];
+menuItems.forEach((item) => {
+    const liElement = document.createElement('li');
+    const aElement = document.createElement('a');
+
+    liElement.appendChild(aElement);
+    ulElement.appendChild(liElement);
+    aElement.innerText = item.text;
+    aElement.href = item.url;
+});
+
+nav.appendChild(ulElement);

05/app.js

@@ -1,3 +1,27 @@
 console.log('DOM');
 
 const curr = document.querySelector('.js-curr');
+
+const newButton = document.createElement('button');
+newButton.textContent = 'usuń z koszyka';
+curr.parentElement.appendChild(newButton);
+
+const childElements = Array.from(curr.parentElement.children);
+
+childElements.forEach((element) => {
+  if (element !== curr) {
+    element.classList.add('siblings');
+  }
+});
+
+const siblingElement = curr.parentElement.nextElementSibling;
+siblingElement.title = 'nextElementSibling';
+
+const lastArticle = curr.parentElement.nextElementSibling.nextElementSibling;
+const button = lastArticle.children[lastArticle.children.length - 1];
+const p = document.createElement('p');
+p.textContent = 'lorem ipsum lorem lorem lalala';
+lastArticle.insertBefore(p, button);
+
+const nextArticle = curr.parentElement.cloneNode(true);
+curr.parentElement.parentElement.insertBefore(nextArticle, curr.parentElement);