diff --git a/01/app.js b/01/app.js index 1c9992e..c9b7786 100644 --- a/01/app.js +++ b/01/app.js @@ -1 +1,11 @@ -console.log('DOM'); \ No newline at end of file +console.log('DOM'); +let sum = 0; +const commentsItems = document.querySelector('.comments__item.comments__item--newest'); +if (commentsItems) { + console.log(commentsItems); + const dataInfoElements = commentsItems.querySelectorAll('[data-info]'); + if (dataInfoElements) { + console.log('data-info wystepuje ' + dataInfoElements.length + ' razy'); + } + } + diff --git a/02/app.js b/02/app.js index 1c9992e..7ea840c 100644 --- a/02/app.js +++ b/02/app.js @@ -1 +1,15 @@ -console.log('DOM'); \ No newline at end of file +console.log('DOM'); +const aList = document.querySelectorAll('a'); +if (aList) { + const dataUrl = document.querySelectorAll('[data-url]'); + dataUrl.forEach(function (item) { + const link = item.getAttribute('data-url'); + console.log(item) + + item.setAttribute('href', link) + }); + + +} + + diff --git a/03/app.js b/03/app.js index c299ca3..395c309 100644 --- a/03/app.js +++ b/03/app.js @@ -1,14 +1,77 @@ +// Utwórz element , który: + +// zgodnie z powyższymi wytycznymi będzie posiadał odpowiednie atrybuty, style i tekst; do stworzenia tego obiektu (elementu HTML) spróbuj wykorzystać pętlę, np. for...in, +// zostanie wstawiony do elementu o klasie .parent-for-button przy pomocy JavaScriptu. +// Pamiętaj, aby ten przycisk był widoczny na stronie. + 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 +const sectionEl = document.querySelector('section') +if (sectionEl) { + const newButton = document.createElement('button'); + + const buttonSettings = { + attr: { + className: 'btn', + title: 'super button' + }, + css: { + border: '1px solid #336699', + padding: '5px 20px', + color: '#444' + }, + text: 'Click me!', + } + const styles = buttonSettings['css']; + // newButton.style['background'] = 'red'; + // newButton.style['padding'] = '5px 20px'; + // newButton.style['border'] = '1px solid #336699'; + // newButton.style['color'] = '#444'; + + for (const prop in buttonSettings['css']) { + const value = buttonSettings['css'][prop] + console.log(prop, value) + newButton.style[prop] = value; + } + // newButton['title'] = 'To jest tyul'; + // newButton['className'] = 'btn'; + + for (const key in buttonSettings['attr']) { + const value = buttonSettings['attr'][key] + newButton[key] = value; + } + newButton.innerText = buttonSettings.text; + + // const value = buttonSettings['attr']; + + // const value3 = buttonSettings['text']; + // for (const prop in buttonSettings) { + // // const value = buttonSettings[prop]; + // const value = buttonSettings['attr']; + // const value2 = buttonSettings['css']; + // const value3 = buttonSettings['text']; + // // newButton.classList.add('prop'); + // // console.log("this person " + prop+ ' is '+ value ) + // console.log(value); + // console.log(value2); + // console.log(value3); + // newButton.classList.add() + // // const title='title'; + // // console.log(buttonSettings['attr'][title]) + // } + + sectionEl.appendChild(newButton); +} +// const buttonSettings = { +// attr: { +// className: 'btn', +// title: 'super button' +// }, +// css: { +// border: '1px solid #336699', +// padding: '5px 20px', +// color: '#444' +// }, +// text: 'Click me!', +// } + diff --git a/04/app.js b/04/app.js index e6411e4..1e2b857 100644 --- a/04/app.js +++ b/04/app.js @@ -1,8 +1,71 @@ console.log('DOM'); +// Utwórz poniższą strukturę menu za pomocą JS: + +//
+// Całość wstaw do elementu . + +// Początkowo spróbuj wykonać to zadanie bez wykorzystania poniższej struktury: + +// const menuItems = [ +// {text: 'start', url: '/'}, +// {text: 'galeria', url: '/gallery'}, +// {text: 'kontakt', url: '/contact'}, +// ] +// Następnie zrób to samo, ale używając danych wraz z np. forEach. + + + // 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 navElement = document.querySelector('nav'); + + +if (navElement) { + const links = [ + { text: 'start', href: '/' }, + { text: 'galeria', href: '/gallery' }, + { text: 'kontakt', href: '/contact' } + ]; + + links.forEach(function (link) { + const liEl = document.createElement('li'); + const aEl = document.createElement('a'); + aEl.innerText = link.text; + aEl.setAttribute('href', link.href); + liEl.appendChild(aEl); + navElement.appendChild(liEl); + }) + // if (navElement) { + // const liEl = document.createElement('li'); + // const liEl2 = document.createElement('li'); + // const liEl3 = document.createElement('li'); + // const aEl = document.createElement('a'); + // const aEl2 = document.createElement('a'); + // const aEl3 = document.createElement('a'); + // aEl.innerText = 'start'; + // aEl2.innerText = 'galeria'; + // aEl3.innerText = 'kontakt'; + // aEl.setAttribute('href', '/'); + // aEl2.setAttribute('href', '/gallery'); + // aEl3.setAttribute('href', '/contact'); + + + // navElement.appendChild(liEl); + // liEl.appendChild(aEl); + // navElement.appendChild(liEl2); + // liEl2.appendChild(aEl2); + // navElement.appendChild(liEl3); + // liEl3.appendChild(aEl3); + + // } +} \ No newline at end of file diff --git a/05/app.js b/05/app.js index 39abe5d..f4ef913 100644 --- a/05/app.js +++ b/05/app.js @@ -1,3 +1,70 @@ console.log('DOM'); +// W pliku ./app.js znajdziesz zmienną curr, która wskazuje na element o klasie .js-curr. + +// Wykonaj poniższe zadania bez dodatkowych wyszukiwań. Po drzewie DOM możesz poruszać się tylko względem elementu ze zmiennej curr. + const curr = document.querySelector('.js-curr'); +const articleEl = curr.parentElement; + + +// Na początku listy dodaj kolejny artykuł, który będzie miał tę samą strukturę, co pozostałe artykuły. +if (curr) { + const sectionEl = articleEl.parentElement; + if (articleEl && sectionEl) { + const cloneArticle = articleEl.cloneNode(true); + sectionEl.insertBefore(cloneArticle, articleEl); + } +} + +// Utwórz kolejny przycisk, który będzie rodzeństwem (bratem) dla elementu ze zmiennej curr. Element ten niech zawiera napis usuń z koszyka. +if (curr) { + // console.log(articleEl); + const newButton = document.createElement('button') + newButton.innerText = 'Usun z koszyka'; + articleEl.appendChild(newButton); +} + +// Do wszystkich elementów, które są rodzeństwem elementu o klasie .js-curr, dodaj klasę .siblings (wykorzystaj pętlę). + +for (const child of articleEl.children) { + if (curr != child) { + child.classList.add('siblings') + } +} + + +// Do następnego elementu o klasie .article, który występuje zaraz po rodzicu elementu o klasie .js-curr, dodaj atrybut title o wartości nextElementSibling. +if (curr) { + const article2El = articleEl.nextElementSibling; + if (article2El) { + article2El.setAttribute('title', 'nextElementSibling') + } +} + + +// Do ostatniego artykułu dodaj dodatkowy paragraf i umieść go przed znacznikiem . + +if (curr) { + if (articleEl) { + const firstSiblingEl = articleEl.nextElementSibling; + // console.log(firstSiblingEl) + const secondSiblingEl = firstSiblingEl.nextElementSibling + // console.log(secondSiblingEl) + if (secondSiblingEl && secondSiblingEl.hasChildNodes()) { + // console.log(secondSiblingEl.hasChildNodes()) + const pEl = secondSiblingEl.children; + const button = secondSiblingEl.children[2]; + // console.log(button) + + if (pEl) { + const newParagraph = document.createElement('p') + newParagraph.innerText = 'Nowy paragraf...'; + + secondSiblingEl.insertBefore(newParagraph, button); + + } + } + } +} +