devmentor-pl · Krystian-Bak · Jul 6, 2025 · devmentor-pl · Jul 7, 2025 · devmentor-pl
diff --git a/01/app.js b/01/app.js
@@ -1 +1,10 @@
-console.log('DOM');
+const elementList = document.querySelector('.comments__item.comments__item--newest');
+
+if (elementList  !== null){ // Wykonuje tylko wtedy kiedy element został znaleziony
+
+    const elementNewest = elementList.querySelectorAll('[data-info'); 
+
+    console.log(`Wszystkich elementów posiadających atrybut "data-info" oraz dwie klasy (comments__item, comments__item--newest) jest ${elementNewest.length}.`); // lenght - ilość elementów w tablicy zwrucona wartość to obiekt typu NodeList str. 22
+} else{
+    console.log('Elementów które posiadają atrybut "data-info" NIE ZNALEZIONO');
+}
diff --git a/02/app.js b/02/app.js
@@ -1 +1,21 @@
-console.log('DOM');
+const linkaDataUrl = document.querySelectorAll('a[data-url]'); // a z data-url
+
+linkaDataUrl.forEach(link => {
+
+    const dataAUrl = link.getAttribute('data-url');
+
+    if(dataAUrl){
+        link.setAttribute('href', dataAUrl);
+        link.removeAttribute('data-url'); // usuwam data-url
+    }
+
+    const href = link.getAttribute('href');
+
+  try {
+    new URL(href); // Jeśli nieprawidłowy – wyrzuci wyjątek
+    console.log(`Poprawne linkpwanie: ${href}`);
+  } catch (error) {
+    console.warn(`Niepoprawne linkowanie: ${href}`);
+    link.textContent += ' X';
+  }
+});
diff --git a/02/index.html b/02/index.html
@@ -13,8 +13,8 @@ <h1>Moje ulubione strony:</h1>
         <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://stackoverflow.com">stackoverflow.com</a></li>
-        <li><a>null</a></li>
+        <li><a>null</a></li> <!-- tutaj pasowało by zmienić NULL na "X" żeby użytkownik nie widział błędu -->
     </ul>
     <script src="./app.js"></script>
 </body>
-</html>
+</html>
diff --git a/03/app.js b/03/app.js
@@ -11,4 +11,34 @@ const buttonSettings = {
         color: '#444'
     },
     text: 'Click me!',
+}
+
+
+const contSection = document.querySelectorAll('section.parent-for-button');
+
+for(const section of contSection){
+    const button = document.createElement('button'); // Tworzę przycisk
+
+
+    button.className = buttonSettings.attr.className; // Dodaje klasę
+    button.title = buttonSettings.attr.title; // Dodaje atrybut title
+
+for(const styleName of Object.keys(buttonSettings.css)){ 
+    button.style[styleName] = buttonSettings.css[styleName];
+}
+
+/* 
+
+      Które rozwiązanie stostuje się generująć wartości z tablic / obiektów?
+
+      for (const [styleName, value] of Object.entries(buttonSettings.css)) {
+        button.style[styleName] = value;
+      } 
+
+
+*/
+
+button.textContent = buttonSettings.text; // Dodaje txt
+
+section.appendChild(button); // Dopalam przycisk
 }
diff --git a/03/index.html b/03/index.html
@@ -10,5 +10,6 @@
 <body>
     <section class="parent-for-button"></section>
     <script src="./app.js"></script>
+
 </body>
 </html>
diff --git a/04/app.js b/04/app.js
@@ -1,8 +1,48 @@
 console.log('DOM');
 
+
+
+
+// 1 - bez wykorzystaina tablicy i forEach
+
+const navMenu = document.querySelector('nav');
+const ulMenu = document.createElement('ul');
+
+const li1 = document.createElement('li');
+li1.textContent = 'home';
+ulMenu.appendChild(li1);
+
+const li2 = document.createElement('li');
+li2.textContent = 'gallery';
+ulMenu.appendChild(li2);
+
+const li3 = document.createElement('li');
+li3.textContent = 'contact';
+ulMenu.appendChild(li3);
+
+navMenu.appendChild(ulMenu);
+
+// 2 - z wykorzystaniem tablicy i forEach
+
+
+const navMenuFor = document.querySelector('nav');
+const ulMenuFor = document.createElement('ul');
+
 // struktura do wykorzystania w pętli
 const menuItems = [
     {text: 'start', url: '/'},
     {text: 'galeria', url: '/gallery'},
     {text: 'kontakt', url: '/contact'},
-];
+];
+
+
+menuItems.forEach(menuValue =>{ // uzycie "item" moze byc wykorzystywane przez innych programistów wiec tutaj będę zmienał zawsze na własną
+    const liFor = document.createElement('li');
+    const aFor = document.createElement('a');
+    aFor.textContent = menuValue.text;
+    aFor.href = menuValue.url;
+    liFor.appendChild(aFor);
+    ulMenuFor.appendChild(liFor);
+});
+
+navMenuFor.appendChild(ulMenuFor);
diff --git a/05/app.js b/05/app.js
@@ -1,3 +1,61 @@
 console.log('DOM');
 
 const curr = document.querySelector('.js-curr');
+
+
+
+// 1 kolejny przycisk, rodzeństwem dla elementu o zmiennej curr z txt "usuń z koszyka"
+
+const removeCart = document.createElement('button');
+removeCart.textContent = 'Usuń z koszyka';
+
+// dodaje przycisk
+
+curr.parentNode.appendChild(removeCart); // appendChild doda element na końcu jako ostatnie dziecko
+
+// lub bezpośrednio po nim curr.parentNode.insertBefore(removeCart, curr.nextSibling);
+
+
+// 2 do js-curr dodaje klase .siblings
+
+const siblings = curr.parentNode.children;
+
+for (let i = 0; i < siblings.length; i++){
+if (siblings[i]!== curr){
+    siblings[i].classList.add('siblings');
+}
+}
+
+// 3 do następnego elementu o klasie .article, po .js-curr dodaje atybut "title" o wartości 'nextEl..'
+
+const afterParent = curr.parentNode;
+
+const addTitle = afterParent.nextElementSibling;
+
+if (addTitle && addTitle.classList.contains('article')) {
+    addTitle.setAttribute('title', 'nextElementSibling')
+}
+
+// 4 Do ostatniego artykułu dodaj dodatkowy paragraf i umieść go przed znacznikiem `<button/>`.
+
+// ścieżka
+
+const currArticle = curr.parentElement; // - jestem w artykuł 
+const container = currArticle.parentElement; // - jestem w section
+const lastArticle = container.lastElementChild; // - ostatni artykuł
+const button = lastArticle.lastElementChild; // - przycisk jest ostatni 
+
+const paragraph = document.createElement('p');
+paragraph.textContent = 'Dodatkowy paragraf dodany';
+
+lastArticle.insertBefore(paragraph, button); // dodaje paragraf
+
+// 5 dodawnie na początku nowego artykuł
+
+const mainArticle = curr.parentElement;
+const mainContainer = mainArticle.parentElement;
+const nextArticle = mainArticle.nextElementSibling; // tutaj nie wiem jak skopiować artykuł bez wcześniejszych operacji dlatego wybrałem 3, wykonałbym to jako powiewsze. 
+
+const newArticle = nextArticle.cloneNode(true);
+
+container.insertBefore(newArticle, container.firstElementChild);
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,5 +10,6 @@ @@
     <body>
         <section class="parent-for-button"></section>
         <script src="./app.js"></script>
     </body>
     </html>