diff --git a/01/app.js b/01/app.js index 1c9992e..fc200f3 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 UlElement = document.querySelector('ul'); +if (UlElement) { + const classElement = UlElement.querySelector( + '.comments__item.comments__item--newest' + ); + const dataInfo = classElement.querySelectorAll('[data-info]'); + console.log(dataInfo.length); +} diff --git a/02/app.js b/02/app.js index 1c9992e..1333af2 100644 --- a/02/app.js +++ b/02/app.js @@ -1 +1,7 @@ -console.log('DOM'); \ No newline at end of file +console.log('DOM'); + +const linksEl = document.querySelectorAll('[data-url]'); +linksEl.forEach((link) => { + const url = link.dataset.url; + link.setAttribute('href', url); +}); diff --git a/03/app.js b/03/app.js index c299ca3..e7bb5ec 100644 --- a/03/app.js +++ b/03/app.js @@ -1,14 +1,28 @@ console.log('DOM'); const buttonSettings = { - attr: { - className: 'btn', - title: 'super button' - }, - css: { - border: '1px solid #336699', - padding: '5px 20px', - color: '#444' - }, - text: 'Click me!', -} \ No newline at end of file + attr: { + className: 'btn', + title: 'super button', + }, + css: { + border: '1px solid #336699', + padding: '5px 20px', + color: '#444', + }, + text: 'Click me!', +}; + +const button = document.createElement('button'); +for (const key in buttonSettings.attr) { + button[key] = buttonSettings.attr[key]; +} +for (const styleKey in buttonSettings.css) { + button.style[styleKey] = buttonSettings.css[styleKey]; +} +button.innerText = buttonSettings.text; + +const parentElement = document.querySelector('.parent-for-button'); +if (parentElement) { + parentElement.appendChild(button); +} diff --git a/04/app.js b/04/app.js index e6411e4..e975c0e 100644 --- a/04/app.js +++ b/04/app.js @@ -2,7 +2,54 @@ 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 + { text: 'start', url: '/' }, + { text: 'galeria', url: '/gallery' }, + { text: 'kontakt', url: '/contact' }, +]; + +// z użyciem pętli +const navElement = document.querySelector('nav'); +const ulElement = document.createElement('ul'); + +menuItems.forEach((item) => { + const li = document.createElement('li'); + const a = document.createElement('a'); + + a.setAttribute('href', item.url); + a.innerText = item.text; + + li.appendChild(a); + ulElement.appendChild(li); + }); + + navElement.appendChild(ulElement); + +//bez pętli + +const ulElement = document.createElement('ul'); +const li1 = document.createElement('li'); +const a1 = document.createElement('a'); +const li2 = document.createElement('li'); +const a2 = document.createElement('a'); +const li3 = document.createElement('li'); +const a3 = document.createElement('a'); +const navElement = document.querySelector('nav'); +a1.setAttribute('href', '/'); +a1.innerText = 'start'; +li1.appendChild(a1); +ulElement.appendChild(li1); + + +a2.setAttribute('href', '/gallery'); +a2.innerText = 'galeria'; +li2.appendChild(a2); +ulElement.appendChild(li2); + +a3.setAttribute('href', '/contact'); +a3.innerText = 'kontakt'; +li3.appendChild(a3); +ulElement.appendChild(li3); + + +navElement.appendChild(ulElement); + diff --git a/05/app.js b/05/app.js index 39abe5d..c2d7c26 100644 --- a/05/app.js +++ b/05/app.js @@ -1,3 +1,52 @@ console.log('DOM'); const curr = document.querySelector('.js-curr'); +const button = document.createElement('button'); +button.innerText = 'usuń z koszyka'; +curr.parentElement.appendChild(button); + +const parent = curr.parentElement; +const children = parent.children; + +for (let i = 0; i < children.length; i++) { + if (children[i] !== curr) { + children[i].classList.add('siblings'); + } +} + +const nextArticle = parent.nextElementSibling; +if (nextArticle && nextArticle.classList.contains('article')) { + nextArticle.setAttribute('title', 'nextElementSibling'); +} + +const articles = document.querySelectorAll('.article'); +const lastArticle = articles[articles.length - 1]; +const lastButton = lastArticle.querySelector('button'); +const newParagraph = document.createElement('p'); +newParagraph.innerText = 'Nowy paragraf przed przyciskiem'; + +lastArticle.insertBefore(newParagraph, lastButton); + +const newArticle = document.createElement('article'); +newArticle.classList.add('articles__item', 'article'); + +const newTitle = document.createElement('h1'); +newTitle.classList.add('article__title'); +newTitle.innerText = 'Nowy artykuł'; + +const newDescription = document.createElement('p'); +newDescription.classList.add('article__description'); +newDescription.innerText = 'Nowy opis'; + +const newButton = document.createElement('button'); +newButton.classList.add('article__btn'); +newButton.innerText = 'Nowy przycisk'; + +newArticle.appendChild(newTitle); +newArticle.appendChild(newDescription); +newArticle.appendChild(newButton); + + +const articlesContainer = document.querySelector('.articles'); + +articlesContainer.insertBefore(newArticle, articlesContainer.firstChild);