All tasks js-dom-elements finished

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}

01/app.js

@@ -1 +1,8 @@
-console.log('DOM');
+console.log('DOM');
+
+const commentsElements = document.querySelector('.comments__item.comments__item--newest');
+if(commentsElements) {
+    const dataInfoEl = commentsElements.querySelectorAll('[data-info]');
+    console.log(dataInfoEl.length);
+}
+

02/app.js

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

03/app.js

@@ -11,4 +11,36 @@ const buttonSettings = {
         color: '#444'
     },
     text: 'Click me!',
-}
+}
+
+
+const buttonSection  = document.querySelector('.parent-for-button')
+
+
+// if(buttonSection) {
+//     const button = document.createElement('button');
+
+//     button.classList.add(buttonSettings.attr.className);
+//     button.title = buttonSettings.attr.title;
+//     button.style.border = buttonSettings.css.border;
+//     button.style.padding = buttonSettings.css.padding;
+//     button.style.color = buttonSettings.css.color;
+//     button.textContent = buttonSettings.text;
+
+//     buttonSection.appendChild(button)
+// }
+
+
+const button = document.createElement('button');
+
+for(let key in buttonSettings.attr) {
+    button.setAttribute(key, buttonSettings.attr[key])
+}
+for(let key in buttonSettings.css) {
+    button.setAttribute(key, buttonSettings.css[key])
+}
+
+button.textContent = buttonSettings.text;
+
+buttonSection.appendChild(button)
+

04/app.js

@@ -5,4 +5,35 @@ const menuItems = [
     {text: 'start', url: '/'},
     {text: 'galeria', url: '/gallery'},
     {text: 'kontakt', url: '/contact'},
-];
+];
+
+
+const navElement = document.querySelector('nav');
+if(navElement) {
+    const ulElement = document.createElement('ul');
+if(ulElement) {
+    menuItems.forEach( function(item) {
+        const liElement = document.createElement('li')
+        const linkElement = document.createElement('a')
+        linkElement.setAttribute('href', item.url)
+        linkElement.innerText = item.text
+        liElement.appendChild(linkElement)
+        ulElement.appendChild(liElement)
+
+    } )
+
+
+    // for(let key in menuItems) {
+    //     const liElement = document.createElement('li')
+    //     const linkElement = document.createElement('a')
+    //     linkElement.setAttribute('href', menuItems[key].url)
+    //     linkElement.innerText = menuItems[key].text
+    //     liElement.appendChild(linkElement)
+    //     ulElement.appendChild(liElement)
+
+    // }
+}
+
+    navElement.appendChild(ulElement)
+}
+

05/app.js

@@ -1,3 +1,36 @@
 console.log('DOM');
 
 const curr = document.querySelector('.js-curr');
+if(curr) {
+    const buttonsParent = curr.parentElement
+    const nextButton = document.createElement('button');
+
+    nextButton.innerText = 'Usuń z koszyka'
+
+    buttonsParent.appendChild(nextButton);
+
+    for(let i = 0; i < buttonsParent.children.length; i++) {
+        if(buttonsParent.children[i] !== curr) {
+            buttonsParent.children[i].classList.add('.siblings')
+        }
+    }
+
+    buttonsParent.nextElementSibling.setAttribute('title', 'nextElementSibling')
+
+    const buttonsParentParent = buttonsParent.parentElement
+    const lastArticle = buttonsParentParent.lastElementChild
+    const lastButton = lastArticle.querySelector('button')
+    const pEl = document.createElement('p')
+
+    pEl.innerText = 'Paragraf przed buttonem'
+    lastArticle.insertBefore(pEl, lastButton)
+
+
+    const article = buttonsParentParent.querySelector('article')
+    const newArticle = article.cloneNode(true)
+
+    buttonsParentParent.insertBefore(newArticle, buttonsParentParent.firstElementChild)
+
+
+
+}