diff --git a/01/app.js b/01/app.js index 1c9992e..9f80040 100644 --- a/01/app.js +++ b/01/app.js @@ -1 +1,11 @@ -console.log('DOM'); \ No newline at end of file + +const liElement = document.querySelector('.comments__item.comments__item--newest'); +const dataInfoList = liElement.querySelectorAll('[data-info]'); + +if(liElement && dataInfoList) { + console.log(`Znaleziono ${dataInfoList.length} poniższe elementy z atrybutem data-info :`); + + dataInfoList.forEach(function(element) { + console.log(element) + }); +} \ No newline at end of file diff --git a/02/app.js b/02/app.js index 1c9992e..8f74649 100644 --- a/02/app.js +++ b/02/app.js @@ -1 +1,10 @@ -console.log('DOM'); \ No newline at end of file +const linkList = document.querySelectorAll('[data-url') + +linkList.forEach(function(link) { + const url = link.getAttribute('data-url'); + + if(url) { + link.setAttribute('href', url) + } +}); + diff --git a/03/app.js b/03/app.js index c299ca3..e7a4c6e 100644 --- a/03/app.js +++ b/03/app.js @@ -11,4 +11,20 @@ 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.textContent = buttonSettings.text; + +const parentButton = document.querySelector('.parent-for-button'); +if (parentButton) { + parentButton.appendChild(button); } \ No newline at end of file diff --git a/04/app.js b/04/app.js index e6411e4..b4d9cef 100644 --- a/04/app.js +++ b/04/app.js @@ -1,8 +1,24 @@ -console.log('DOM'); // 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) { + const li = document.createElement('li'); + const a = document.createElement('a'); + a.href = item.url; + a.textContent = item.text; + + li.appendChild(a); + ul.appendChild(li); +}); + +nav.appendChild(ul); \ No newline at end of file diff --git a/05/app.js b/05/app.js index 39abe5d..90b179f 100644 --- a/05/app.js +++ b/05/app.js @@ -1,3 +1,45 @@ -console.log('DOM'); - const curr = document.querySelector('.js-curr'); + +// +const newButton = document.createElement('button'); +newButton.classList.add('article__btn'); +newButton.textContent = 'usuń z koszyka' + +curr.parentElement.insertBefore(newButton, curr.nextElementSibling); + + +// +let sibling = curr.parentElement.firstElementChild; +while (sibling) { + if (sibling !== curr) { + sibling.classList.add('siblings'); + } + sibling = sibling.nextElementSibling; +} + + +// +const nextArticle = curr.closest('.article').nextElementSibling; +if(nextArticle && nextArticle.classList.contains('article')) { + nextArticle.setAttribute('title', 'nextElementSibling'); +} + + +// +const lastArticle = document.querySelector('.articles__item:last-child'); +const paragraph = document.createElement('p'); +paragraph.textContent = 'Dodskowy paragraf.'; +const button = lastArticle.querySelector('.article__btn'); +lastArticle.insertBefore(paragraph, button); + +// +const newArticle = document.createElement('article'); +newArticle.classList.add('articles__item', 'article'); +const articlesSection = document.querySelector('.articles'); +articlesSection.insertBefore(newArticle, articlesSection.firstElementChild); + +newArticle.innerHTML = ` +

JS- Nowy Artykuł

+

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

+ +`; \ No newline at end of file