diff --git a/01/app.js b/01/app.js index 1c9992e..f08ffc8 100644 --- a/01/app.js +++ b/01/app.js @@ -1 +1,10 @@ -console.log('DOM'); \ No newline at end of file +console.log('DOM'); + +const elementClass = document.querySelector('.comments__item.comments__item--newest') +// elementClass.textContent = '' + + +const dataInfoList = elementClass.querySelectorAll('[data-info]') + +console.log(elementClass) +console.log(dataInfoList.length) diff --git a/01/index.html b/01/index.html index 41f83e9..5a88801 100644 --- a/01/index.html +++ b/01/index.html @@ -1,24 +1,47 @@ + - - - + + + devmentor.pl - JS DOM Elements - #01 + + \ No newline at end of file diff --git a/02/app.js b/02/app.js index 1c9992e..aa7b2a3 100644 --- a/02/app.js +++ b/02/app.js @@ -1 +1,12 @@ -console.log('DOM'); \ No newline at end of file +console.log('DOM'); + +const links = document.querySelectorAll('a[data-url]'); + + +console.log(links); + + +links.forEach(function(link) { + const url = link.getAttribute('data-url'); + link.setAttribute('href', url); +}); \ No newline at end of file diff --git a/02/index.html b/02/index.html index 89a53f6..a397da7 100644 --- a/02/index.html +++ b/02/index.html @@ -11,7 +11,7 @@

Moje ulubione strony:

diff --git a/03/app.js b/03/app.js index c299ca3..bb7a069 100644 --- a/03/app.js +++ b/03/app.js @@ -11,4 +11,19 @@ const buttonSettings = { color: '#444' }, text: 'Click me!', -} \ No newline at end of file +} + +const btn = document.createElement('button'); + + +for (let key in buttonSettings.attr) { + btn[key] = buttonSettings.attr[key]; +} + +for (let key in buttonSettings.css) { + btn.style[key] = buttonSettings.css[key]; +} + +btn.innerText = buttonSettings.text; + +document.querySelector('.parent-for-button').appendChild(btn); \ No newline at end of file diff --git a/04/app.js b/04/app.js index e6411e4..bf174b1 100644 --- a/04/app.js +++ b/04/app.js @@ -1,8 +1,57 @@ console.log('DOM'); +// Metod 1 + +// const ul = document.createElement('ul') +// const li1 = document.createElement('li') +// const a1 = document.createElement('a') +// a1.href = '/'; +// a1.innerText = 'start'; + +// li1.appendChild(a1) + + +// const li2 = document.createElement('li') +// const a2 = document.createElement('a') +// a2.href = '/gallery'; +// a2.innerText = 'gallery'; + +// li2.appendChild(a2) + + +// const li3 = document.createElement('li') +// const a3 = document.createElement('a') +// a3.href = '/contact'; +// a3.innerText = 'contact'; + +// li3.appendChild(a3) + +// ul.appendChild(li1) +// ul.appendChild(li2) +// ul.appendChild(li3) + +// document.querySelector('nav').appendChild(ul) + +// Metod 2 // struktura do wykorzystania w pętli const menuItems = [ {text: 'start', url: '/'}, {text: 'galeria', url: '/gallery'}, {text: 'kontakt', url: '/contact'}, -]; \ No newline at end of file +]; + + +const ul = document.createElement('ul') + +menuItems.forEach(function(item){ + const li = document.createElement('li') + const a = document.createElement('a') + + a.href = item.url + a.innerText = item.text + + li.appendChild(a) + ul.appendChild(li) +}) + +document.querySelector('nav').appendChild(ul) diff --git a/05/app.js b/05/app.js index 39abe5d..5ad6688 100644 --- a/05/app.js +++ b/05/app.js @@ -1,3 +1,38 @@ console.log('DOM'); const curr = document.querySelector('.js-curr'); + +const newBtn = document.createElement('button'); +newBtn.innerText = 'usuń z koszyka'; +curr.parentElement.appendChild(newBtn); + +const parent = curr.parentElement; +[...parent.children].forEach(function(child){ + if (child !== curr){ + child.classList.add('sibling') + } +}); + +const nextArticle = parent.nextElementSibling; +if(nextArticle && nextArticle.classList.contains('article')){ + nextArticle.setAttribute('title', 'nextElementSibling') +}; + +const lastArticle = parent.parentElement.lastElementChild; +const extraP = document.createElement('p'); +extraP.innerText = 'Paragraf w ostatnim artykule'; +lastArticle.insertBefore(extraP, lastArticle.querySelector('button')); + +const firstArticle = parent.parentElement.firstElementChild; +const newArticle = document.createElement('article') +newArticle.classList.add('articles__item', 'article') +newArticle.innerHTML = ` +

Nowy artykuł

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur quo quibusdam, nemo neque consequuntur pariatur totam? Facere quaerat molestias hic.

+ +`; + +parent.parentElement.insertBefore(newArticle, firstArticle) + + +