diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..21dc07c Binary files /dev/null and b/.DS_Store differ diff --git a/01/app.js b/01/app.js index 1c9992e..ee47c2a 100644 --- a/01/app.js +++ b/01/app.js @@ -1 +1,12 @@ -console.log('DOM'); \ No newline at end of file +console.log('DOM'); + +const element = document.querySelector('.comments__item.comments__item--newest'); + +if (element){ + const elementsWithAtribute = element.querySelectorAll('[data-info]'); + console.log(elementsWithAtribute); + console.log(`Znaleziono ${elementsWithAtribute.length} elementy z podanym atrybutem`); + +} else { + console.log(`Nie znaleziono elementu o podanej klasie`); +} diff --git a/02/app.js b/02/app.js index 1c9992e..bf33138 100644 --- a/02/app.js +++ b/02/app.js @@ -1 +1,10 @@ -console.log('DOM'); \ No newline at end of file +console.log('DOM'); + +const linksWithUrl = document.querySelectorAll('[data-url]'); +console.log(linksWithUrl); + + +linksWithUrl.forEach((element) => { + const elementUrl = element.getAttribute('data-url'); + element.setAttribute('href', elementUrl) +}) \ No newline at end of file diff --git a/03/app.js b/03/app.js index c299ca3..36e17df 100644 --- a/03/app.js +++ b/03/app.js @@ -11,4 +11,18 @@ const buttonSettings = { color: '#444' }, text: 'Click me!', -} \ No newline at end of file +} + +const newButton = document.createElement('button'); +for (const property in buttonSettings.attr){ + newButton.setAttribute(property, buttonSettings.attr[property]); +} + +for (const property in buttonSettings.css){ + newButton.style[property] = buttonSettings.css[property]; +} + +newButton.textContent = buttonSettings.text; + +const element = document.querySelector('.parent-for-button'); +element.appendChild(newButton); \ No newline at end of file diff --git a/04/app.js b/04/app.js index e6411e4..bc08326 100644 --- a/04/app.js +++ b/04/app.js @@ -5,4 +5,34 @@ const menuItems = [ {text: 'start', url: '/'}, {text: 'galeria', url: '/gallery'}, {text: 'kontakt', url: '/contact'}, -]; \ No newline at end of file +]; + + +// const navElement = document.querySelector('nav'); + +// if (navElement){ +// const ulElement = document.createElement('ul'); +// navElement.appendChild(ulElement); +// } + +// const ulElement = document.querySelector('ul'); +// if(ulElement){ +// const liElement1 = document.createElement('li'); +// const liElement2 = document.createElement('li'); +// const liElement3 = document.createElement('li'); +// ulElement.appendChild(liElement1); +// ulElement.appendChild(liElement2); +// ulElement.appendChild(liElement3); +// } + +const navElement = document.querySelector('nav'); + +menuItems.forEach((el => { + const liElement = document.createElement('li'); + const aElement = document.createElement('a'); + + aElement.innerText = el.text; + aElement.setAttribute('href', el.url) + navElement.appendChild(liElement); + liElement.appendChild(aElement); +})) \ No newline at end of file diff --git a/05/app.js b/05/app.js index 39abe5d..f8d58b9 100644 --- a/05/app.js +++ b/05/app.js @@ -1,3 +1,50 @@ console.log('DOM'); const curr = document.querySelector('.js-curr'); + +// 1 +const currParent = curr.parentElement; +const newButton = document.createElement('button'); +newButton.innerText = 'usuĊ„ z koszyka' +currParent.appendChild(newButton); + +// 2 +const currSiblings = Array.from(currParent.children); +currSiblings.filter((el) => !el.classList.contains('js-curr')).forEach(el => el.classList.add('siblings')); + +// 3 +currParent.nextElementSibling.setAttribute('title', 'nextElementSibling'); + +// 4 +const lastSibling = currParent.parentElement.lastElementChild; +const pElement = document.createElement('p'); + +lastSibling.insertBefore(pElement, lastSibling.lastElementChild); + + +// 5 +const newArticle = document.createElement('article'); + +const articles = currParent.parentElement; +console.log(articles); + +articles.insertBefore(newArticle, currParent); +newArticle.classList.add('articles__item', 'article'); + +const newTitle = document.createElement('h1') +const newParagraph = document.createElement('p'); +const newBtn = document.createElement('button'); + +newTitle.innerText = 'JS - New Article'; +newParagraph.innerText = 'Lorem test'; +newBtn.innerText = 'new btn' + +newTitle.classList.add('article__title'); +newParagraph.classList.add('article__description'); +newBtn.classList.add('article__btn'); + +newArticle.appendChild(newTitle); +newArticle.appendChild(newParagraph); +newArticle.appendChild(newBtn); + +