From defa6c1109f3fe381c4bdbdd97a0f391beb1e519 Mon Sep 17 00:00:00 2001 From: TetraMeister Date: Sun, 18 Jan 2026 11:41:24 +0100 Subject: [PATCH] Tasks Done --- 01/app.js | 10 +++++++- 02/app.js | 8 ++++++- 03/app.js | 20 +++++++++++++++- 04/app.js | 32 ++++++++++++++++++++++---- 05/app.js | 69 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 132 insertions(+), 7 deletions(-) diff --git a/01/app.js b/01/app.js index 1c9992ed..08c9ecd9 100644 --- a/01/app.js +++ b/01/app.js @@ -1 +1,9 @@ -console.log('DOM'); \ No newline at end of file +console.log('DOM'); + + +const element = document.querySelector('.comments__item.comments__item--newest'); + +if (element) { + const count1 = element.querySelectorAll('[data-info]').length; + console.log(count1) +}; diff --git a/02/app.js b/02/app.js index 1c9992ed..d3499cec 100644 --- a/02/app.js +++ b/02/app.js @@ -1 +1,7 @@ -console.log('DOM'); \ No newline at end of file +console.log('DOM'); + +aList = document.querySelectorAll('[data-url]'); + +aList.forEach(element => { + element.setAttribute('href', element.dataset.url); +}); \ No newline at end of file diff --git a/03/app.js b/03/app.js index c299ca32..d938afa6 100644 --- a/03/app.js +++ b/03/app.js @@ -1,4 +1,5 @@ console.log('DOM'); +const parent = document.querySelector('.parent-for-button') const buttonSettings = { attr: { @@ -11,4 +12,21 @@ const buttonSettings = { color: '#444' }, text: 'Click me!', -} \ No newline at end of file +}; + +const newBtn = document.createElement("button"); +newBtn.innerText = buttonSettings.text; + +for (const key in buttonSettings.css) { + newBtn.style[key] = buttonSettings.css[key]; +}; + +for (const key in buttonSettings.attr) { + if (key === "className") { + newBtn.className = buttonSettings.attr.className; + } else { + newBtn.setAttribute(key, buttonSettings.attr[key]); + } +}; + +parent.appendChild(newBtn); \ No newline at end of file diff --git a/04/app.js b/04/app.js index e6411e4e..e374824d 100644 --- a/04/app.js +++ b/04/app.js @@ -2,7 +2,31 @@ 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") +const menu1 = document.createElement("ul") +const menu2 = document.createElement("ul") + +// Struktura innerHTML + +menu1.innerHTML = "
  • home
  • gallery
  • contact
  • "; + +nav.appendChild(menu1); + +// Pętla + +menuItems.forEach(function (e) { + const li = document.createElement('li'); + const a = document.createElement('a'); + + a.innerText = e.text; + a.setAttribute("href", e.url); + + menu2.appendChild(li).appendChild(a); +}); + +nav.appendChild(menu2); \ No newline at end of file diff --git a/05/app.js b/05/app.js index 39abe5d5..5ecec2d1 100644 --- a/05/app.js +++ b/05/app.js @@ -1,3 +1,72 @@ console.log('DOM'); const curr = document.querySelector('.js-curr'); + +const parent = curr.parentElement; +const parentChildrenList = parent.children; +const parentSibling = parent.nextElementSibling; +const parentOfParent = parent.parentElement; +const lastParent0fParentChild = parentOfParent.lastElementChild; +const lastParent0fParentChildButton = lastParent0fParentChild.lastElementChild; + +const newBtn = document.createElement('button'); +const newP = document.createElement('p'); +newP.innerText = "Lorem Ipsum"; +newBtn.innerText = 'Usuń z koszyka'; + +parent.appendChild(newBtn); + +for (const child of parentChildrenList) { + if (child !== curr) { + child.classList.add("siblings"); + }; +}; + +parentSibling.setAttribute('title', 'nextElementSibling'); + +lastParent0fParentChild.insertBefore(newP, lastParent0fParentChildButton); + + +createArticle(); + +function createArticle(title = "Default Title") { + + const articleStructure = { + className: "articles__item article", + content: { + h1: { + className: "article__title", + text: title, + }, + p: { + className: "article__description", + text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur quo quibusdam, nemo neque consequuntur pariatur totam? Facere quaerat molestias hic.", + }, + button: { + className: "article__btn", + text: "Kupuję!", + }, + }, + }; + + + const newArticle = document.createElement("article"); + + newArticle.className = articleStructure.className; + + for (const key in articleStructure.content) { + const newProp = document.createElement(key); + + for (const e in articleStructure.content[key]) { + if (e === "className") { + newProp.className = articleStructure.content[key][e]; + } else { + newProp.innerText = articleStructure.content[key][e]; + } + } + + newArticle.appendChild(newProp); + }; + + parentOfParent.insertBefore(newArticle, parentOfParent.firstElementChild); +}; \ No newline at end of file