From 42adaa5535ca5fa7a5eedc2092d375c66847c2f4 Mon Sep 17 00:00:00 2001 From: Bartosz Dudziak Date: Mon, 23 Dec 2024 16:35:10 +0100 Subject: [PATCH 1/6] Task 01 completed --- 01/app.js | 12 +++++++++++- 01/index.html | 53 ++++++++++++++++++++++++++++++++++----------------- 2 files changed, 47 insertions(+), 18 deletions(-) diff --git a/01/app.js b/01/app.js index 1c9992ed..885786aa 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 41f83e91..a028dc7b 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 + + From ea92b8ec5ae543aa0d533541b2f176611b81f38f Mon Sep 17 00:00:00 2001 From: Bartosz Dudziak Date: Mon, 23 Dec 2024 16:40:08 +0100 Subject: [PATCH 2/6] Task 02 completed --- 02/app.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/02/app.js b/02/app.js index 1c9992ed..f5d6090b 100644 --- a/02/app.js +++ b/02/app.js @@ -1 +1,10 @@ -console.log('DOM'); \ No newline at end of file +console.log("DOM"); + +const linksList = document.querySelectorAll("a[data-url]"); + +if (linksList) { + linksList.forEach((link) => { + const href = link.dataset.url; + link.setAttribute("href", href); + }); +} From bf20587564e5b99bbf45b571b99fcfd912337ebc Mon Sep 17 00:00:00 2001 From: Bartosz Dudziak Date: Mon, 23 Dec 2024 17:19:12 +0100 Subject: [PATCH 3/6] Task 03 completed --- 03/app.js | 36 ++++++++++++++++++++++++------------ 1 file changed, 24 insertions(+), 12 deletions(-) diff --git a/03/app.js b/03/app.js index c299ca32..454b8f8a 100644 --- a/03/app.js +++ b/03/app.js @@ -1,14 +1,26 @@ -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.classList.add(buttonSettings.attr.className); +button.setAttribute("title", buttonSettings.attr.title); +button.innerText = buttonSettings.text; + +for (const propety in buttonSettings.css) { + button.style[propety] = buttonSettings.css[propety]; +} + +const parent = document.querySelector(".parent-for-button"); +if (parent) parent.appendChild(button); From 329ab346e790b808a507bb27a102e68fa033587c Mon Sep 17 00:00:00 2001 From: Bartosz Dudziak Date: Mon, 23 Dec 2024 17:29:44 +0100 Subject: [PATCH 4/6] Task 04 completed --- 04/app.js | 26 +++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/04/app.js b/04/app.js index e6411e4e..e7331f8c 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); From 3eccfaf11c5cb1b03b0d40b348534ad81509fe88 Mon Sep 17 00:00:00 2001 From: Bartosz Dudziak Date: Mon, 23 Dec 2024 18:02:48 +0100 Subject: [PATCH 5/6] Task 05 completed --- 05/app.js | 59 +++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 57 insertions(+), 2 deletions(-) diff --git a/05/app.js b/05/app.js index 39abe5d5..de193ba0 100644 --- a/05/app.js +++ b/05/app.js @@ -1,3 +1,58 @@ -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) => + 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); + } +} From c3d8ae4d51222b1e737d90b598cb94bb95e65b78 Mon Sep 17 00:00:00 2001 From: Bartosz Dudziak Date: Thu, 26 Dec 2024 21:04:13 +0100 Subject: [PATCH 6/6] Tasks: 02, 03, 05 - improvements --- 02/app.js | 10 ++++------ 03/app.js | 6 ++++-- 05/app.js | 7 ++++--- 3 files changed, 12 insertions(+), 11 deletions(-) diff --git a/02/app.js b/02/app.js index f5d6090b..94ab3fba 100644 --- a/02/app.js +++ b/02/app.js @@ -2,9 +2,7 @@ console.log("DOM"); const linksList = document.querySelectorAll("a[data-url]"); -if (linksList) { - linksList.forEach((link) => { - const href = link.dataset.url; - link.setAttribute("href", href); - }); -} +linksList.forEach((link) => { + const href = link.dataset.url; + link.setAttribute("href", href); +}); diff --git a/03/app.js b/03/app.js index 454b8f8a..26cb77fa 100644 --- a/03/app.js +++ b/03/app.js @@ -14,10 +14,12 @@ const buttonSettings = { }; const button = document.createElement("button"); -button.classList.add(buttonSettings.attr.className); -button.setAttribute("title", buttonSettings.attr.title); 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]; } diff --git a/05/app.js b/05/app.js index de193ba0..4137e0fd 100644 --- a/05/app.js +++ b/05/app.js @@ -10,9 +10,10 @@ if (curr) { curr.parentElement.appendChild(newButtonEl); // 2 - Array.from(curr.parentElement.children).forEach((child) => - child.classList.add("siblings") - ); + Array.from(curr.parentElement.children).forEach((child) => { + if (child === curr) return; + child.classList.add("siblings"); + }); // 3 const articleEl = curr.parentElement.nextElementSibling;