Zadania DOM

01/app.js

@@ -1 +1,5 @@
-console.log('DOM');
+console.log('DOM');
+const item = document.querySelector('.comments__item.comments__item--newest');
+console.log(item);
+const spanList = item.querySelectorAll('[data-info]');
+console.log(spanList.length);

02/app.js

@@ -1 +1,9 @@
-console.log('DOM');
+console.log('DOM');
+const linkList = document.querySelectorAll('[data-url]');
+console.log(linkList);
+linkList.forEach(function(item){
+    console.log(item);
+    const url = item.getAttribute('data-url')
+    item.setAttribute('href', url);
+    console.log(url)
+})

03/app.js

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

04/app.js

@@ -1,8 +1,44 @@
 console.log('DOM');
+/*
+const nav = document.querySelector('nav');
+const ul = document.createElement('ul');
+const li1 = document.createElement('li');
+const a1 = document.createElement('a')
+a1.setAttribute('href','/');
+a1.innerText = 'start';
+li1.appendChild(a1);
+ul.appendChild(li1);
+nav.appendChild(ul);
 
+const li2 = document.createElement('li');
+const a2 = document.createElement('a');
+a2.setAttribute('href','/gallery');
+a2.innerText = 'galeria';
+ul.appendChild(li2);
+li2.appendChild(a2);
+
+const li3 = document.createElement('li');
+const a3 = document.createElement('a');
+a3.setAttribute('href', '/contact');
+a3.innerText = 'kontakt';
+ul.appendChild(li3);
+li3.appendChild(a3);
+*/
 // struktura do wykorzystania w pętli
 const menuItems = [
     {text: 'start', url: '/'},
     {text: 'galeria', url: '/gallery'},
     {text: 'kontakt', url: '/contact'},
-];
+];
+const nav = document.querySelector('nav');
+const ul = document.createElement('ul');
+menuItems.forEach(function(item) {
+    console.log(item)
+    const li = document.createElement('li');
+    const a = document.createElement('a');
+    li.appendChild(a);
+    ul.appendChild(li);
+    a.setAttribute('href', item.url);
+    a.innerText = item.text;
+});
+nav.appendChild(ul);

05/app.js

@@ -1,3 +1,35 @@
 console.log('DOM');
 
 const curr = document.querySelector('.js-curr');
+// 1.  Utwórz kolejny przycisk, który będzie rodzeństwem (bratem) dla elementu ze zmiennej `curr`. Element ten niech zawiera napis `usuń z koszyka`.
+const newButton = document.createElement('button');
+newButton.innerText = 'usuń z koszyka';
+curr.parentElement.appendChild(newButton);
+//2. Do wszystkich elementów, które są rodzeństwem elementu o klasie `.js-curr`, dodaj klasę `.siblings` (wykorzystaj pętlę).
+console.log(curr.parentElement.children);
+const children = Array.from(curr.parentElement.children)
+children.forEach(function(child){
+    if(child !== curr) {
+        child.classList.add('siblings')
+    }
+})
+curr.parentElement.nextElementSibling.setAttribute('title', 'nextElementSibling');
+const newPar = document.createElement('p')
+const lastArticle = curr.parentElement.nextElementSibling.nextElementSibling
+lastArticle.insertBefore(newPar, lastArticle.querySelector('p'));
+const firstArticle = document.createElement('article');
+firstArticle.classList.add('articles.item','article' );
+const heading = document.createElement('h1');
+heading.classList.add('article__title');
+heading.innerText = 'Czy to sie uda?';
+firstArticle.appendChild(heading);
+const secondPar = document.createElement('p')
+secondPar.classList.add('article__description');
+secondPar.innerText = 'Zobaczymy'
+firstArticle.appendChild(secondPar);
+const lastButton = document.createElement('button')
+lastButton.classList.add('article__btn');
+lastButton.innerText = 'Wkrótce';
+firstArticle.appendChild(lastButton);
+const addArticle = curr.parentElement.parentElement;
+addArticle.insertBefore(firstArticle, addArticle.firstChild);

05/index.html

@@ -13,6 +13,7 @@
             <h1 class="article__title">JS - Elementy DOM</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 js-curr">Kupuję!</button>
+            <!-- tutaj ma być button -->
         </article>
         <article class="articles__item article">
             <h1 class="article__title">JS - Zdarzenia</h1>