practice-js-dom-elements tasks complete

01/app.js

@@ -1 +1,8 @@
-console.log('DOM');
+console.log('DOM');
+
+const commentsNewest = document.querySelector('.comments__item.comments__item--newest');
+
+if (commentsNewest) {
+  const commentsNewestWithDataInfo = commentsNewest.querySelectorAll('[data-info]');
+  console.log(`${commentsNewestWithDataInfo.length} elements found with data-info attribute.`);
+};

02/app.js

@@ -1 +1,8 @@
-console.log('DOM');
+console.log('DOM');
+
+const linksWithDataUrl = document.querySelectorAll('a[data-url]');
+
+linksWithDataUrl.forEach(link => {
+    const url = link.getAttribute('data-url');
+    link.setAttribute('href', url);
+});

03/app.js

@@ -10,5 +10,26 @@ const buttonSettings = {
         padding: '5px 20px',
         color: '#444'
     },
-    text: 'Click me!',
-}
+    textContent: 'Click me!'
+};
+
+const applySettings = (element, settings) => {
+    for (const [key, value] of Object.entries(settings)) {
+        if (key === 'attr') {
+            for (const [attr, attrValue] of Object.entries(value)) {
+                element[attr] = attrValue
+            }
+        } else if (key === 'css') {
+            for (const [prop, propValue] of Object.entries(value)) {
+                element.style[prop] = propValue;
+            }
+        } else {
+            element[key] = value;
+        }
+    }
+};
+
+const button = document.createElement('button');
+applySettings(button, buttonSettings);
+const buttonParent = document.querySelector('.parent-for-button');
+buttonParent.appendChild(button);

04/app.js

@@ -5,4 +5,20 @@ const menuItems = [
     {text: 'start', url: '/'},
     {text: 'galeria', url: '/gallery'},
     {text: 'kontakt', url: '/contact'},
-];
+];
+
+const navList = document.createElement('ul');
+
+menuItems.forEach(item => {
+    const listItem = document.createElement('li');
+    const listItemLink = document.createElement('a');
+
+    listItemLink.href = item.url;
+    listItemLink.textContent = item.text;
+
+    listItem.appendChild(listItemLink);
+    navList.appendChild(listItem);
+});
+
+const nav = document.querySelector('nav');
+nav.appendChild(navList);

05/app.js

@@ -1,3 +1,44 @@
 console.log('DOM');
 
 const curr = document.querySelector('.js-curr');
+if (curr) {
+    const currParent = curr.parentElement;
+    const articlesSection = currParent.parentElement;
+    const articles = articlesSection.children;
+    const lastArticle = articles[articles.length - 1];
+    const newArticle = lastArticle.cloneNode(true); // Used the last article as a template
+
+    //1
+    const removeButton = document.createElement('button');
+    removeButton.textContent = 'Usuń z koszyka';
+    currParent.insertBefore(removeButton, curr.nextElementSibling);
+
+    //2
+    for (let child of currParent.children) {
+        if (child !== curr) child.classList.add('siblings');
+    }
+
+    //3
+    const nextArticle = currParent.nextElementSibling;
+    if (nextArticle && nextArticle.classList.contains('article')) nextArticle.setAttribute('title', 'nextElementSibling');
+
+    //4
+    if (lastArticle) {
+        const extraParagraph = document.createElement('p');
+        extraParagraph.textContent = 'Extra paragraph';
+        const btnInLast = lastArticle.querySelector('button');
+
+        btnInLast ? lastArticle.insertBefore(extraParagraph, btnInLast) : lastArticle.appendChild(extraParagraph);
+    }
+
+    //5
+    const titleEl = newArticle.querySelector('.article__title');
+    if (titleEl) titleEl.textContent = 'JS - New Article';
+
+    const descEl = newArticle.querySelector('.article__description');
+    if (descEl) descEl.textContent = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+
+    articlesSection.insertBefore(newArticle, articlesSection.firstElementChild);
+} else {
+    console.error('.js-curr elem not found');
+}