devmentor-pl · AlexKry96 · Sep 16, 2025 · Sep 17, 2025 · Sep 17, 2025 · Sep 17, 2025
diff --git a/01/app.js b/01/app.js
@@ -1 +1,10 @@
-console.log('DOM');
+console.log('DOM');
+
+const elementClass = document.querySelector('.comments__item.comments__item--newest')
+// elementClass.textContent = ''
+
+
+const dataInfoList = elementClass.querySelectorAll('[data-info]')
+
+console.log(elementClass)
+console.log(dataInfoList.length)
diff --git a/01/index.html b/01/index.html
@@ -1,24 +1,47 @@
 <!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">
+    <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>
     <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>
+            <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
+            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>
diff --git a/02/app.js b/02/app.js
@@ -1 +1,12 @@
-console.log('DOM');
+console.log('DOM');
+
+const links = document.querySelectorAll('a[data-url]');
+
+
+console.log(links);
+
+
+links.forEach(function(link) {
+    const url = link.getAttribute('data-url');
+    link.setAttribute('href', url);
+});
diff --git a/02/index.html b/02/index.html
@@ -11,7 +11,7 @@
     <h1>Moje ulubione strony:</h1>
     <ul>
         <li><a data-url="https://devmentor.pl">devmentor.pl</a></li>
-        <li><a data-url="https://developer.mozilla.org/pl/">eveloper.mozilla.org</a></li>
+        <li><a data-url="https://developer.mozilla.org/pl/">developer.mozilla.org</a></li>
         <li><a data-url="https://stackoverflow.com">stackoverflow.com</a></li>
         <li><a>null</a></li>
     </ul>

diff --git a/03/app.js b/03/app.js
@@ -11,4 +11,19 @@ const buttonSettings = {
         color: '#444'
     },
     text: 'Click me!',
-}
+}
+
+const btn = document.createElement('button');
+
+
+for (let key in buttonSettings.attr) {
+    btn[key] = buttonSettings.attr[key];
+}
+
+for (let key in buttonSettings.css) {
+    btn.style[key] = buttonSettings.css[key];
+}
+
+btn.innerText = buttonSettings.text;
+
+document.querySelector('.parent-for-button').appendChild(btn);
diff --git a/04/app.js b/04/app.js
@@ -1,8 +1,57 @@
 console.log('DOM');
 
+// Metod 1
+
+// const ul = document.createElement('ul')
+// const li1 = document.createElement('li')
+// const a1 = document.createElement('a')
+// a1.href = '/';
+// a1.innerText = 'start';
+
+// li1.appendChild(a1)
+
+
+// const li2 = document.createElement('li')
+// const a2 = document.createElement('a')
+// a2.href = '/gallery';
+// a2.innerText = 'gallery';
+
+// li2.appendChild(a2)
+
+
+// const li3 = document.createElement('li')
+// const a3 = document.createElement('a')
+// a3.href = '/contact';
+// a3.innerText = 'contact';
+
+// li3.appendChild(a3)
+
+// ul.appendChild(li1)
+// ul.appendChild(li2)
+// ul.appendChild(li3)
+
+// document.querySelector('nav').appendChild(ul)
+
+// Metod 2
 // struktura do wykorzystania w pętli
 const menuItems = [
     {text: 'start', url: '/'},
     {text: 'galeria', url: '/gallery'},
     {text: 'kontakt', url: '/contact'},
-];
+];
+
+
+const ul = document.createElement('ul')
+
+menuItems.forEach(function(item){
+    const li = document.createElement('li')
+    const a = document.createElement('a')
+
+    a.href = item.url
+    a.innerText = item.text
+
+    li.appendChild(a)
+    ul.appendChild(li)
+})
+
+document.querySelector('nav').appendChild(ul)
diff --git a/05/app.js b/05/app.js
@@ -1,3 +1,38 @@
 console.log('DOM');
 
 const curr = document.querySelector('.js-curr');
+
+const newBtn = document.createElement('button');
+newBtn.innerText = 'usuń z koszyka';
+curr.parentElement.appendChild(newBtn);
+
+const parent = curr.parentElement;
+[...parent.children].forEach(function(child){
+    if (child !== curr){
+        child.classList.add('sibling')
+    }
+});
+
+const nextArticle = parent.nextElementSibling;
+if(nextArticle && nextArticle.classList.contains('article')){
+    nextArticle.setAttribute('title', 'nextElementSibling')
+};
+
+const lastArticle = parent.parentElement.lastElementChild;
+const extraP = document.createElement('p');
+extraP.innerText = 'Paragraf w ostatnim artykule';
+lastArticle.insertBefore(extraP, lastArticle.querySelector('button'));
+
+const firstArticle = parent.parentElement.firstElementChild;
+const newArticle = document.createElement('article')
+newArticle.classList.add('articles__item', 'article')
+newArticle.innerHTML = `
+    <h1 class="article__title">Nowy artykuł</h1>
+    <p class="article__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur quo quibusdam, nemo neque consequuntur pariatur totam? Facere quaerat molestias hic.</p>
+    <button class="article__btn">Kupuję!</button>
+`;
+
+parent.parentElement.insertBefore(newArticle, firstArticle)
+
+
+