devmentor-pl · zanetasochon · Apr 21, 2025 · Apr 21, 2025 · Apr 23, 2025 · Apr 23, 2025
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/01/app.js b/01/app.js
@@ -1 +1,7 @@
-console.log('DOM');
+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:',
+  childrenOfP.length
+);
diff --git a/01/index.html b/01/index.html
@@ -1,24 +1,44 @@
 <!DOCTYPE html>
 <html lang="pl">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <meta name="author" content="Mateusz Bogolubow">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <meta name="author" content="Mateusz Bogolubow" />
     <title>devmentor.pl - JS DOM Elements - #01</title>
-</head>
-<body>
+  </head>
+  <body>
     <ul class="comments">
-        <li class="comments__item comments__item--newest">
-            <p>Lorem ipsum <span data-info="https://devmentor.pl">dolor</span> sit amet consectetur adipisicing elit. Iure, vero! <span data-info="https://devmentor.pl">Lorem</span> ipsum dolor sit amet, consectetur adipisicing elit. Nobis, amet?</p>
-            <p>Lorem ipsum dolor sit amet consectetur, <span data-info="https://devmentor.pl">adipisicing</span> elit. Magnam temporibus necessitatibus repellendus! Earum fugit distinctio facere iusto nesciunt! Voluptatem, perspiciatis?</p>
-        </li>
-        <li class class="comments__item">
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <span data-info="https://devmentor.pl">Iure</span>, vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, amet?</p>
-            <p>Lorem ipsum dolor <span data-info="https://devmentor.pl">sit</span> amet consectetur, adipisicing elit. Magnam temporibus necessitatibus repellendus! Earum fugit distinctio facere iusto nesciunt! Voluptatem, perspiciatis?</p>
-        </li>
+      <li class="comments__item comments__item--newest">
+        <p>
+          Lorem ipsum
+          <span data-info="https://devmentor.pl">dolor</span>
+          sit amet consectetur adipisicing elit. Iure, vero!
+          <span data-info="https://devmentor.pl">Lorem</span>
+          ipsum dolor sit amet, consectetur adipisicing elit. Nobis, amet?
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur,
+          <span data-info="https://devmentor.pl">adipisicing</span>
+          elit. Magnam temporibus necessitatibus repellendus! Earum fugit distinctio facere iusto
+          nesciunt! Voluptatem, perspiciatis?
+        </p>
+      </li>
+      <li class class="comments__item">
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit.
+          <span data-info="https://devmentor.pl">Iure</span>
+          , vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, amet?
+        </p>
+        <p>
+          Lorem ipsum dolor
+          <span data-info="https://devmentor.pl">sit</span>
+          amet consectetur, adipisicing elit. Magnam temporibus necessitatibus repellendus! Earum
+          fugit distinctio facere iusto nesciunt! Voluptatem, perspiciatis?
+        </p>
+      </li>
     </ul>
 
     <script src="./app.js"></script>
-</body>
-</html>
+  </body>
+</html>
diff --git a/02/app.js b/02/app.js
@@ -1 +1,8 @@
-console.log('DOM');
+const aList = document.querySelectorAll('a[data-url]');
+
+let hasAttribute;
+
+const hasLink = aList.forEach((link) => {
+  hasAttribute = link.getAttribute('data-url');
+  link.setAttribute('href', hasAttribute);
+});
diff --git a/03/app.js b/03/app.js
@@ -1,14 +1,33 @@
 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: '1px solid #336699',
+    padding: '5px 20px',
+    color: '#444',
+  },
+  text: 'Click me!',
+};
+
+const button = document.createElement('button');
+
+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) {
+  button.style[key] = buttonSettings.css[key];
+}
+
+button.textContent = buttonSettings.text;
+
+const sectionEl = document.querySelector('section');
+sectionEl.appendChild(button);
diff --git a/04/app.js b/04/app.js
@@ -2,7 +2,27 @@ 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 navEl = document.querySelector('nav');
+
+const ulEl = document.createElement('ul');
+navEl.appendChild(ulEl);
+
+const arr = [];
+
+const createLinkList = menuItems.forEach((item) => {
+  const liStartEl = document.createElement('li');
+  ulEl.appendChild(liStartEl);
+
+  arr.push(liStartEl);
+
+  const addAEl = document.createElement('a');
+  liStartEl.appendChild(addAEl);
+
+  addAEl.setAttribute('href', item.url);
+  addAEl.textContent = item.text;
+});
diff --git a/05/app.js b/05/app.js
@@ -1,3 +1,32 @@
 console.log('DOM');
 
-const curr = document.querySelector('.js-curr');
+let curr = document.querySelector('.js-curr');
+const currParent = curr.parentElement;
+
+const currParentSibling = currParent.nextElementSibling;
+currParentSibling.setAttribute('title', 'nextSiblingElement');
+
+const currLastParentSibling = currParentSibling.nextElementSibling;
+const newParagraph = document.createElement('p');
+
+const cloneArt = currParent.cloneNode(true);
+const art = document.querySelector('.articles');
+
+art.insertAdjacentElement('afterbegin', cloneArt);
+
+newParagraph.textContent = 'Lorem Ipsum dolor sit amet';
+const pEl = currLastParentSibling.querySelector('p');
+currLastParentSibling.insertBefore(newParagraph, pEl);
+
+const btn = document.createElement('button');
+btn.textContent = 'Usuń z koszyka';
+curr.insertAdjacentElement('afterend', btn);
+
+let siblingEl = curr.parentElement.children;
+console.log(siblingEl);
+
+[...siblingEl].forEach((el) => {
+  if (el !== curr) {
+    el.className = 'siblings';
+  }
+});