diff --git a/01/app.js b/01/app.js index 1c9992e..107d1f4 100644 --- a/01/app.js +++ b/01/app.js @@ -1 +1,5 @@ -console.log('DOM'); \ No newline at end of file +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); \ No newline at end of file diff --git a/02/app.js b/02/app.js index 1c9992e..9bbb043 100644 --- a/02/app.js +++ b/02/app.js @@ -1 +1,9 @@ -console.log('DOM'); \ No newline at end of file +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) +}) diff --git a/03/app.js b/03/app.js index c299ca3..a7a9aa5 100644 --- a/03/app.js +++ b/03/app.js @@ -11,4 +11,23 @@ const buttonSettings = { color: '#444' }, text: 'Click me!', -} \ No newline at end of file +} + +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); \ No newline at end of file diff --git a/04/app.js b/04/app.js index e6411e4..a6c324b 100644 --- a/04/app.js +++ b/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'}, -]; \ No newline at end of file +]; +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); \ No newline at end of file diff --git a/05/app.js b/05/app.js index 39abe5d..8dd4634 100644 --- a/05/app.js +++ b/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); \ No newline at end of file diff --git a/05/index.html b/05/index.html index 6498955..c36d407 100644 --- a/05/index.html +++ b/05/index.html @@ -13,6 +13,7 @@
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur quo quibusdam, nemo neque consequuntur pariatur totam? Facere quaerat molestias hic.
+