diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6b665aa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/01/app.js b/01/app.js index 1c9992e..585b05b 100644 --- a/01/app.js +++ b/01/app.js @@ -1 +1,7 @@ -console.log('DOM'); \ No newline at end of file +const commentsItemNewest = document.querySelector('.comments__item.comments__item--newest'); +const childrenOfP = commentsItemNewest.querySelectorAll('span'); + +console.log( + 'Zostało znalezionych elementów posiadających atrybut data-info w liczbie:', + childrenOfP.length +); diff --git a/01/index.html b/01/index.html index 41f83e9..053c1d3 100644 --- a/01/index.html +++ b/01/index.html @@ -1,24 +1,44 @@ - - - - - + + + + + devmentor.pl - JS DOM Elements - #01 - - + + - - \ No newline at end of file + + diff --git a/02/app.js b/02/app.js index 1c9992e..475fc35 100644 --- a/02/app.js +++ b/02/app.js @@ -1 +1,8 @@ -console.log('DOM'); \ No newline at end of file +const aList = document.querySelectorAll('a[data-url]'); + +let hasAttribute; + +const hasLink = aList.forEach((link) => { + hasAttribute = link.getAttribute('data-url'); + link.setAttribute('href', hasAttribute); +}); diff --git a/03/app.js b/03/app.js index c299ca3..029e57f 100644 --- a/03/app.js +++ b/03/app.js @@ -1,14 +1,33 @@ 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) { + if (key === 'className') { + button.classList.add(key); + } else { + button.setAttribute(key, buttonSettings.attr[key]); + } +} + +for (const key in buttonSettings.css) { + button.style[key] = buttonSettings.css[key]; +} + +button.textContent = buttonSettings.text; + +const sectionEl = document.querySelector('section'); +sectionEl.appendChild(button); diff --git a/04/app.js b/04/app.js index e6411e4..cef39de 100644 --- a/04/app.js +++ b/04/app.js @@ -2,7 +2,27 @@ 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 navEl = document.querySelector('nav'); + +const ulEl = document.createElement('ul'); +navEl.appendChild(ulEl); + +const arr = []; + +const createLinkList = menuItems.forEach((item) => { + const liStartEl = document.createElement('li'); + ulEl.appendChild(liStartEl); + + arr.push(liStartEl); + + const addAEl = document.createElement('a'); + liStartEl.appendChild(addAEl); + + addAEl.setAttribute('href', item.url); + addAEl.textContent = item.text; +}); diff --git a/05/app.js b/05/app.js index 39abe5d..94f8a73 100644 --- a/05/app.js +++ b/05/app.js @@ -1,3 +1,32 @@ console.log('DOM'); -const curr = document.querySelector('.js-curr'); +let curr = document.querySelector('.js-curr'); +const currParent = curr.parentElement; + +const currParentSibling = currParent.nextElementSibling; +currParentSibling.setAttribute('title', 'nextSiblingElement'); + +const currLastParentSibling = currParentSibling.nextElementSibling; +const newParagraph = document.createElement('p'); + +const cloneArt = currParent.cloneNode(true); +const art = document.querySelector('.articles'); + +art.insertAdjacentElement('afterbegin', cloneArt); + +newParagraph.textContent = 'Lorem Ipsum dolor sit amet'; +const pEl = currLastParentSibling.querySelector('p'); +currLastParentSibling.insertBefore(newParagraph, pEl); + +const btn = document.createElement('button'); +btn.textContent = 'Usuń z koszyka'; +curr.insertAdjacentElement('afterend', btn); + +let siblingEl = curr.parentElement.children; +console.log(siblingEl); + +[...siblingEl].forEach((el) => { + if (el !== curr) { + el.className = 'siblings'; + } +});