diff --git a/01/app.js b/01/app.js index 1c9992e..885786a 100644 --- a/01/app.js +++ b/01/app.js @@ -1 +1,11 @@ -console.log('DOM'); \ No newline at end of file +console.log("DOM"); + +const element = document.querySelector( + ".comments__item.comments__item--newest" +); + +if (element) { + const elementsInfoList = element.querySelectorAll(`*[data-info]`); + + console.log(`Found: ${elementsInfoList.length} elements`); +} diff --git a/01/index.html b/01/index.html index 41f83e9..a028dc7 100644 --- a/01/index.html +++ b/01/index.html @@ -1,24 +1,43 @@ - - - - - + + + + + devmentor.pl - JS DOM Elements - #01 - - + + - - \ No newline at end of file + + diff --git a/02/app.js b/02/app.js index 1c9992e..94ab3fb 100644 --- a/02/app.js +++ b/02/app.js @@ -1 +1,8 @@ -console.log('DOM'); \ No newline at end of file +console.log("DOM"); + +const linksList = document.querySelectorAll("a[data-url]"); + +linksList.forEach((link) => { + const href = link.dataset.url; + link.setAttribute("href", href); +}); diff --git a/03/app.js b/03/app.js index c299ca3..26cb77f 100644 --- a/03/app.js +++ b/03/app.js @@ -1,14 +1,28 @@ -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 button = document.createElement("button"); +button.innerText = buttonSettings.text; + +for (const propety in buttonSettings.attr) { + button.setAttribute(propety, buttonSettings.attr[propety]); +} + +for (const propety in buttonSettings.css) { + button.style[propety] = buttonSettings.css[propety]; +} + +const parent = document.querySelector(".parent-for-button"); +if (parent) parent.appendChild(button); diff --git a/04/app.js b/04/app.js index e6411e4..e7331f8 100644 --- a/04/app.js +++ b/04/app.js @@ -1,8 +1,24 @@ -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 menuElement = document.createElement("ul"); + +menuItems.forEach((item) => { + const itemElement = document.createElement("li"); + + const linkElement = document.createElement("a"); + linkElement.setAttribute("href", item.url); + linkElement.textContent = item.text; + + itemElement.appendChild(linkElement); + menuElement.appendChild(itemElement); +}); + +const navigationElement = document.querySelector("nav"); +if (navigationElement) navigationElement.appendChild(menuElement); diff --git a/05/app.js b/05/app.js index 39abe5d..4137e0f 100644 --- a/05/app.js +++ b/05/app.js @@ -1,3 +1,59 @@ -console.log('DOM'); +console.log("DOM"); -const curr = document.querySelector('.js-curr'); +const curr = document.querySelector(".js-curr"); + +if (curr) { + // Task 1 + const newButtonEl = document.createElement("button"); + newButtonEl.textContent = "Usun z koszyka"; + + curr.parentElement.appendChild(newButtonEl); + + // 2 + Array.from(curr.parentElement.children).forEach((child) => { + if (child === curr) return; + child.classList.add("siblings"); + }); + + // 3 + const articleEl = curr.parentElement.nextElementSibling; + if (articleEl) articleEl.setAttribute("title", "nextElementSibling"); + + // 4 + const lastArticleEl = curr.parentElement.parentElement.lastElementChild; + if (lastArticleEl && lastArticleEl.tagName === "ARTICLE") { + const buttonEl = lastArticleEl.querySelector("button"); + + if (buttonEl) { + const newParagraphEl = document.createElement("p"); + newParagraphEl.textContent = "Additional paragraph"; + lastArticleEl.insertBefore(newParagraphEl, buttonEl); + } + } + + // 5 + const sectionEl = curr.parentElement.parentElement; + if (sectionEl && sectionEl.tagName === "SECTION") { + const newArticle = document.createElement("article"); + newArticle.className = "articles__item article"; + + const heading = document.createElement("h1"); + heading.classList.add("article__title"); + heading.textContent = "Heading"; + + const paragraph = document.createElement("p"); + paragraph.classList.add("article__description"); + paragraph.textContent = "Paragraph"; + + const button = document.createElement("button"); + button.classList.add("article__button"); + button.textContent = "Kupuje!"; + + newArticle.appendChild(heading); + newArticle.appendChild(paragraph); + newArticle.appendChild(button); + + const firstArticle = sectionEl.firstChild; + sectionEl.insertBefore(newArticle, firstArticle); + } +}