resolved exervises - js-dom-elements

01/app.js

@@ -1 +1,12 @@
-console.log('DOM');
+console.log('DOM');
+
+const element = document.querySelector('.comments__item.comments__item--newest');
+
+if (element){
+    const elementsWithAtribute = element.querySelectorAll('[data-info]');
+    console.log(elementsWithAtribute);
+    console.log(`Znaleziono ${elementsWithAtribute.length} elementy z podanym atrybutem`);
+
+} else {
+    console.log(`Nie znaleziono elementu o podanej klasie`);
+}

02/app.js

@@ -1 +1,10 @@
-console.log('DOM');
+console.log('DOM');
+
+const linksWithUrl = document.querySelectorAll('[data-url]');
+console.log(linksWithUrl);
+
+
+linksWithUrl.forEach((element) => {
+    const elementUrl = element.getAttribute('data-url');
+    element.setAttribute('href', elementUrl)
+})

03/app.js

@@ -11,4 +11,18 @@ const buttonSettings = {
         color: '#444'
     },
     text: 'Click me!',
-}
+}
+
+const newButton = document.createElement('button');
+for (const property in buttonSettings.attr){
+    newButton.setAttribute(property, buttonSettings.attr[property]);
+}
+
+for (const property in buttonSettings.css){
+    newButton.style[property] = buttonSettings.css[property];
+} 
+
+newButton.textContent = buttonSettings.text;
+
+const element = document.querySelector('.parent-for-button');
+element.appendChild(newButton);

04/app.js

@@ -5,4 +5,34 @@ 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');
+//     navElement.appendChild(ulElement);
+// }
+
+// const ulElement = document.querySelector('ul');
+// if(ulElement){
+//     const liElement1 = document.createElement('li');
+//     const liElement2 = document.createElement('li');
+//     const liElement3 = document.createElement('li');
+//     ulElement.appendChild(liElement1);
+//     ulElement.appendChild(liElement2);
+//     ulElement.appendChild(liElement3);
+// }
+
+const navElement = document.querySelector('nav');
+
+menuItems.forEach((el => {
+    const liElement = document.createElement('li');
+    const aElement = document.createElement('a');
+
+    aElement.innerText = el.text;
+    aElement.setAttribute('href', el.url)
+    navElement.appendChild(liElement);
+    liElement.appendChild(aElement);
+}))

05/app.js

@@ -1,3 +1,50 @@
 console.log('DOM');
 
 const curr = document.querySelector('.js-curr');
+
+// 1
+const currParent = curr.parentElement;
+const newButton = document.createElement('button');
+newButton.innerText = 'usuń z koszyka'
+currParent.appendChild(newButton);
+
+// 2
+const currSiblings = Array.from(currParent.children);
+currSiblings.filter((el) => !el.classList.contains('js-curr')).forEach(el => el.classList.add('siblings'));
+
+// 3
+currParent.nextElementSibling.setAttribute('title', 'nextElementSibling');
+
+// 4
+const lastSibling = currParent.parentElement.lastElementChild;
+const pElement = document.createElement('p');
+
+lastSibling.insertBefore(pElement, lastSibling.lastElementChild);
+
+
+// 5
+const newArticle = document.createElement('article');
+
+const articles = currParent.parentElement;
+console.log(articles);
+
+articles.insertBefore(newArticle, currParent);
+newArticle.classList.add('articles__item', 'article');
+
+const newTitle = document.createElement('h1')
+const newParagraph = document.createElement('p');
+const newBtn = document.createElement('button');
+
+newTitle.innerText = 'JS - New Article';
+newParagraph.innerText = 'Lorem test';
+newBtn.innerText = 'new btn'
+
+newTitle.classList.add('article__title');
+newParagraph.classList.add('article__description');
+newBtn.classList.add('article__btn');
+
+newArticle.appendChild(newTitle);
+newArticle.appendChild(newParagraph);
+newArticle.appendChild(newBtn);
+
+