Tasks Done

01/app.js

@@ -1 +1,9 @@
-console.log('DOM');
+console.log('DOM');
+
+
+const element = document.querySelector('.comments__item.comments__item--newest');
+
+if (element) {
+  const count1 = element.querySelectorAll('[data-info]').length;
+  console.log(count1)
+};

02/app.js

@@ -1 +1,7 @@
-console.log('DOM');
+console.log('DOM');
+
+aList = document.querySelectorAll('[data-url]');
+
+aList.forEach(element => {
+  element.setAttribute('href', element.dataset.url);
+});

03/app.js

@@ -1,4 +1,5 @@
 console.log('DOM');
+const parent = document.querySelector('.parent-for-button')
 
 const buttonSettings = {
     attr: {
@@ -11,4 +12,21 @@ const buttonSettings = {
         color: '#444'
     },
     text: 'Click me!',
-}
+};
+
+const newBtn = document.createElement("button");
+newBtn.innerText = buttonSettings.text;
+
+for (const key in buttonSettings.css) {
+    newBtn.style[key] = buttonSettings.css[key];
+};
+
+for (const key in buttonSettings.attr) {
+    if (key === "className") {
+        newBtn.className = buttonSettings.attr.className;
+    } else {
+        newBtn.setAttribute(key, buttonSettings.attr[key]);
+    }
+};
+
+parent.appendChild(newBtn);

04/app.js

@@ -2,7 +2,31 @@ console.log('DOM');
 
 // struktura do wykorzystania w pętli
 const menuItems = [
-    {text: 'start', url: '/'},
-    {text: 'galeria', url: '/gallery'},
-    {text: 'kontakt', url: '/contact'},
-];
+    { text: 'start', url: '/' },
+    { text: 'galeria', url: '/gallery' },
+    { text: 'kontakt', url: '/contact' },
+];
+
+const nav = document.querySelector("nav")
+const menu1 = document.createElement("ul")
+const menu2 = document.createElement("ul")
+
+// Struktura innerHTML
+
+menu1.innerHTML = "<li><a href='/'>home</a></li><li><a href='/gallery'>gallery</a></li><li><a href='/contact'>contact</a></li>";
+
+nav.appendChild(menu1);
+
+// Pętla
+
+menuItems.forEach(function (e) {
+    const li = document.createElement('li');
+    const a = document.createElement('a');
+
+    a.innerText = e.text;
+    a.setAttribute("href", e.url);
+
+    menu2.appendChild(li).appendChild(a);
+});
+
+nav.appendChild(menu2);

05/app.js

@@ -1,3 +1,72 @@
 console.log('DOM');
 
 const curr = document.querySelector('.js-curr');
+
+const parent = curr.parentElement;
+const parentChildrenList = parent.children;
+const parentSibling = parent.nextElementSibling;
+const parentOfParent = parent.parentElement;
+const lastParent0fParentChild = parentOfParent.lastElementChild;
+const lastParent0fParentChildButton = lastParent0fParentChild.lastElementChild;
+
+const newBtn = document.createElement('button');
+const newP = document.createElement('p');
+newP.innerText = "Lorem Ipsum";
+newBtn.innerText = 'Usuń z koszyka';
+
+parent.appendChild(newBtn);
+
+for (const child of parentChildrenList) {
+  if (child !== curr) {
+    child.classList.add("siblings");
+  };
+};
+
+parentSibling.setAttribute('title', 'nextElementSibling');
+
+lastParent0fParentChild.insertBefore(newP, lastParent0fParentChildButton);
+
+
+createArticle();
+
+function createArticle(title = "Default Title") {
+
+  const articleStructure = {
+    className: "articles__item article",
+    content: {
+      h1: {
+        className: "article__title",
+        text: title,
+      },
+      p: {
+        className: "article__description",
+        text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur quo quibusdam, nemo neque consequuntur pariatur totam? Facere quaerat molestias hic.",
+      },
+      button: {
+        className: "article__btn",
+        text: "Kupuję!",
+      },
+    },
+  };
+
+
+  const newArticle = document.createElement("article");
+
+  newArticle.className = articleStructure.className;
+
+  for (const key in articleStructure.content) {
+    const newProp = document.createElement(key);
+
+    for (const e in articleStructure.content[key]) {
+      if (e === "className") {
+        newProp.className = articleStructure.content[key][e];
+      } else {
+        newProp.innerText = articleStructure.content[key][e];
+      }
+    }
+
+    newArticle.appendChild(newProp);
+  };
+
+  parentOfParent.insertBefore(newArticle, parentOfParent.firstElementChild);
+};