diff --git a/01/app.js b/01/app.js index 1c9992e..ab6e587 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 commentsItem = document.querySelector('.comments__item ', '.comments__item--newest') +const DataInfoElements = commentsItem.querySelectorAll('[data-info]') +console.log(`znaleziono ${DataInfoElements.length} elementów wewnątrz elementu z tagiem ${commentsItem.nodeName}`) \ No newline at end of file diff --git a/02/app.js b/02/app.js index 1c9992e..3fb537e 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 allLinks = document.querySelectorAll("[data-url]") +console.log(allLinks) +allLinks.forEach(link => { + const value = link.dataset.url + link.setAttribute('href', value) +}) \ No newline at end of file diff --git a/03/app.js b/03/app.js index c299ca3..e049fda 100644 --- a/03/app.js +++ b/03/app.js @@ -11,4 +11,33 @@ const buttonSettings = { color: '#444' }, text: 'Click me!', -} \ No newline at end of file +} + +const newBtn = document.createElement('button') +for(const key in buttonSettings) { + const value = buttonSettings[key] + if(typeof value === 'object' && value !== null ) { + if(key == 'attr') { + for(const property in value) { + newBtn.setAttribute(property, value[property]) + console.log(`${property}: ${value[property]}`) + + } + } + if(key == 'css') { + for(const property in value) { + newBtn.style[property] = value[property] + console.log(`${property}: ${value[property]}`) + } + } + + } else { + console.log(`${key}: ${value}`) + newBtn.innerText = value + } +} + +const parent = document.querySelector('.parent-for-button') +console.log(parent) +parent.appendChild(newBtn) + diff --git a/04/app.js b/04/app.js index e6411e4..34b6ce5 100644 --- a/04/app.js +++ b/04/app.js @@ -2,7 +2,30 @@ 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' + }, +]; + +const ulList = document.createElement('ul') +menuItems.forEach(item => { + newLi = document.createElement('li') + newA = document.createElement('a') + newA.innerText = item.text + newA.setAttribute('href',item.url) + + newLi.appendChild(newA) + ulList.appendChild(newLi) + +}) +const nav = document.querySelector('nav') +nav.appendChild(ulList) \ No newline at end of file diff --git a/05/app.js b/05/app.js index 39abe5d..1f20346 100644 --- a/05/app.js +++ b/05/app.js @@ -1,3 +1,34 @@ console.log('DOM'); const curr = document.querySelector('.js-curr'); +const parent = curr.parentElement +const newBtn = document.createElement('button') +newBtn.innerText = "Usuń z koszyka" +parent.appendChild(newBtn) + +const children = Array.from(parent.children) + +const sliblings = children.filter(child => child !== curr) + +console.log(sliblings) +console.log(sliblings) +for(let i = 0; i < sliblings.length; i++){ + sliblings[i].classList.toggle('sliblings') +} + +parent.nextElementSibling.setAttribute('title','nextElementSlibling') + +const lastArticle = parent.parentElement.lastElementChild +const pElement = document.createElement('p') +pElement.innerText = 'new paragraph' +const articlebutton = lastArticle.querySelector('button') +lastArticle.insertBefore(pElement,articlebutton) + +const newArticle = document.createElement('article') +newArticle.classList.add('articles__item', 'article') +newArticle.innerHTML = + `

JS - Elementy DOM2

+

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

+ ` + +parent.parentElement.insertBefore(newArticle,parent) \ No newline at end of file