diff --git a/01/app.js b/01/app.js index 1c9992e..5692883 100644 --- a/01/app.js +++ b/01/app.js @@ -1 +1,11 @@ -console.log('DOM'); \ No newline at end of file +const el = document.querySelector('.comments__item.comments__item--newest'); + +if (el) { + const items = el.querySelectorAll('[data-info]'); + + console.log(`Liczba elementów z data-info: ${items.length}`); + + items.forEach(el => { + console.log(el.dataset.info); + }); +} diff --git a/02/app.js b/02/app.js index 1c9992e..e648b44 100644 --- a/02/app.js +++ b/02/app.js @@ -1 +1,11 @@ -console.log('DOM'); \ No newline at end of file +console.log('DOM'); +const links = document.querySelectorAll('[data-url]'); +console.log(links); + +links.forEach(link => { + const url = link.dataset.url; + + if (url) { + link.href = url; + } +}); diff --git a/03/app.js b/03/app.js index c299ca3..3c84aea 100644 --- a/03/app.js +++ b/03/app.js @@ -1,14 +1,32 @@ -console.log('DOM'); +// 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 btnParent = document.querySelector('.parent-for-button'); + +if (btnParent) { + const button = document.createElement('button'); + + for (const key in buttonSettings.attr) { + button[key] = buttonSettings.attr[key]; + } + + for (const key in buttonSettings.css) { + button.style[key] = buttonSettings.css[key]; + } + + button.textContent = buttonSettings.text; + + btnParent.appendChild(button); +} diff --git a/04/app.js b/04/app.js index e6411e4..04bc384 100644 --- a/04/app.js +++ b/04/app.js @@ -1,8 +1,55 @@ -console.log('DOM'); +// 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 nav = document.querySelector('nav'); + +if (nav) { + const menu = document.createElement('ul'); + + const li1 = document.createElement('li'); + const a1 = document.createElement('a'); + a1.href = '/'; + a1.textContent = 'start'; + li1.appendChild(a1); + + const li2 = document.createElement('li'); + const a2 = document.createElement('a'); + a2.href = '/gallery'; + a2.textContent = 'galeria'; + li2.appendChild(a2); + + const li3 = document.createElement('li'); + const a3 = document.createElement('a'); + a3.href = '/contact'; + a3.textContent = 'kontakt'; + li3.appendChild(a3); + + menu.appendChild(li1); + menu.appendChild(li2); + menu.appendChild(li3); + + nav.appendChild(menu); +} + +if (nav) { + const menu = document.createElement('ul'); + + menuItems.forEach(item => { + const li = document.createElement('li'); + const a = document.createElement('a'); + + a.textContent = item.text; + a.href = item.url; + + li.appendChild(a); + menu.appendChild(li); + }); + + nav.appendChild(menu); +} diff --git a/05/app.js b/05/app.js index 39abe5d..4d4f127 100644 --- a/05/app.js +++ b/05/app.js @@ -1,3 +1,27 @@ -console.log('DOM'); +// console.log('DOM'); const curr = document.querySelector('.js-curr'); + +if (curr) { + const parent = curr.parentElement; + + const deleteBtn = document.createElement('button'); + deleteBtn.textContent = 'usuń z koszyka'; + parent.appendChild(deleteBtn); + + [...parent.children].forEach(el => { + if (el !== curr) el.classList.add('siblings'); + }); + + parent.nextElementSibling.setAttribute('title', 'nextElementSibling'); + + const lastArticle = parent.parentElement.lastElementChild; + const p = document.createElement('p'); + p.textContent = 'Dodatkowy paragraf'; + lastArticle.insertBefore(p, lastArticle.querySelector('button')); + + const newArticle = parent.cloneNode(true); + const newCurrBtn = newArticle.querySelector('.js-curr'); + if (newCurrBtn) newCurrBtn.classList.remove('js-curr'); + parent.parentElement.insertBefore(newArticle, parent); +}