Solved tasks

01/app.js

@@ -1 +1,10 @@
-console.log('DOM');
+console.log("DOM");
+
+const ulElement = document.querySelector(
+  ".comments__item.comments__item--newest"
+);
+
+if (ulElement) {
+  const dateInfoElements = ulElement.querySelectorAll("[data-info]");
+  console.log(`The elemnts with data-info are ${dateInfoElements.length}`);
+}

02/app.js

@@ -1 +1,9 @@
-console.log('DOM');
+console.log('DOM');
+
+const linksElement = document.querySelectorAll('a[data-url]')
+
+linksElement.forEach(function(link) {
+    const dataUrl = link.getAttribute('data-url')
+    link.href = dataUrl
+})
+

03/app.js

@@ -1,14 +1,32 @@
-console.log('DOM');
+console.log("DOM");
 
 const buttonSettings = {
-    attr: {
-        className: 'btn',
-        title: 'super button'
-    },
-    css: {
-        border: '1px solid #336699',
-        padding: '5px 20px',
-        color: '#444'
-    },
-    text: 'Click me!',
-}
+  attr: {
+    className: "btn",
+    title: "super button",
+  },
+  css: {
+    border: "10px solid #336699",
+    padding: "5px 20px",
+    color: "#444",
+  },
+  text: "Click me!",
+};
+
+const btnElement = document.createElement("BUTTON");
+
+for (const key in buttonSettings.attr) {
+  btnElement[key] = buttonSettings.attr[key];
+}
+
+for (const key in buttonSettings.css) {
+  btnElement.style[key] = buttonSettings.css[key];
+}
+
+btnElement.textContent = buttonSettings.text;
+
+const parent = document.querySelector(".parent-for-button");
+
+if (parent) {
+  parent.appendChild(btnElement);
+}

04/app.js

@@ -1,8 +1,49 @@
-console.log('DOM');
+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 ulEl = document.createElement("ul");
+const navEl = document.querySelector("nav");
+navEl.appendChild(ulEl);
+
+// const liFirst = document.createElement("li");
+// const liFirstLink = document.createElement("a");
+
+// liFirstLink.href = "/";
+// liFirstLink.innerText = "home";
+
+// liFirst.appendChild(liFirstLink);
+// ulEl.appendChild(liFirst);
+
+// const liSecond = document.createElement("li");
+// const liSecondLink = document.createElement("a");
+
+// liSecondLink.href = "/gallery";
+// liSecondLink.innerText = "gallery";
+
+// liSecond.appendChild(liSecondLink);
+// ulEl.appendChild(liSecond);
+
+// const liThird = document.createElement("li");
+// const liThirdLink = document.createElement("a");
+
+// liThirdLink.href = "/contact";
+// liThirdLink.innerText = "contact";
+
+// liThird.appendChild(liThirdLink);
+// ulEl.appendChild(liThird);
+
+menuItems.forEach(function (el) {
+  const liEl = document.createElement("li");
+  const linkEl = document.createElement("a");
+  linkEl.innerText = el.text;
+  linkEl.href = el.url;
+
+  liEl.appendChild(linkEl);
+  ulEl.appendChild(liEl);
+});

05/app.js

@@ -1,3 +1,26 @@
-console.log('DOM');
+console.log("DOM");
 
-const curr = document.querySelector('.js-curr');
+const curr = document.querySelector(".js-curr");
+const newBtn = document.createElement("BUTTON");
+newBtn.innerText = "usuń z koszyka";
+const parentCurr = curr.parentNode;
+
+parentCurr.appendChild(newBtn);
+
+const parentChildren = parentCurr.children;
+for (const el of parentChildren) {
+  el.classList.add("siblings");
+}
+
+const secondChild = parentCurr.nextElementSibling;
+secondChild.setAttribute("title", "nextElementSibling");
+
+const articleParent = parentCurr.parentNode;
+const articleLastChild = articleParent.lastElementChild;
+const newParagraf = document.createElement("p");
+newParagraf.innerText = "Dodatkowy paragraf";
+const articleLastChildBtn = articleLastChild.lastElementChild;
+articleLastChild.insertBefore(newParagraf, articleLastChildBtn);
+
+const newArticle = parentCurr.cloneNode(true);
+articleParent.insertBefore(newArticle, parentCurr);