diff --git a/01/app.js b/01/app.js index 1c9992e..4900ecf 100644 --- a/01/app.js +++ b/01/app.js @@ -1 +1,10 @@ -console.log('DOM'); \ No newline at end of file +console.log("DOM"); + +const element = document.querySelector( + ".comments__item.comments__item--newest" +); + +if (element) { + const dataSetElement = element.querySelectorAll("[data-info]"); + console.log(dataSetElement.length); +} diff --git a/02/app.js b/02/app.js index 1c9992e..4a044fa 100644 --- a/02/app.js +++ b/02/app.js @@ -1 +1,9 @@ -console.log('DOM'); \ No newline at end of file +console.log("DOM"); + +const dataUrl = document.querySelectorAll("[data-url"); +dataUrl.forEach(function (el) { + const url = el.dataset.url; + if (!el.hasAttribute("href")) { + el.setAttribute("href", url); + } +}); diff --git a/02/index.html b/02/index.html index 89a53f6..41ba13e 100644 --- a/02/index.html +++ b/02/index.html @@ -1,20 +1,24 @@ - - - - - + + + + + devmentor.pl - JS DOM Elements - #02 - - + +

Moje ulubione strony:

- - \ No newline at end of file + + diff --git a/03/app.js b/03/app.js index c299ca3..fef7255 100644 --- a/03/app.js +++ b/03/app.js @@ -1,14 +1,31 @@ -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 buttonParent = document.querySelector(".parent-for-button"); +const btn = document.createElement("button"); +const buttonText = document.createTextNode(buttonSettings.text); +buttonParent.appendChild(btn); + +if (btn) { + btn.appendChild(buttonText); + for (const property in buttonSettings.attr) { + btn.setAttribute(property, buttonSettings.attr[property]); + } + + for (const cssProperty in buttonSettings.css) { + console.log(cssProperty); + btn.style.setProperty(cssProperty, buttonSettings.css[cssProperty]); + } +} diff --git a/04/app.js b/04/app.js index e6411e4..f66b712 100644 --- a/04/app.js +++ b/04/app.js @@ -1,8 +1,44 @@ -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 ulElement = document.createElement("ul"); +const navElement = document.querySelector("nav"); +navElement.appendChild(ulElement); + +// Rozwiązanie bez tablicy +for (let i = 0; i < 3; i++) { + const newLiElement = document.createElement("li"); + const newLinkElement = document.createElement("a"); + ulElement.appendChild(newLiElement); + newLiElement.appendChild(newLinkElement); + if (i === 0) { + const firstTextNode = document.createTextNode("start"); + newLinkElement.appendChild(firstTextNode); + newLinkElement.setAttribute("href", "/"); + } else if (i === 1) { + const secondTextNode = document.createTextNode("galeria"); + newLinkElement.appendChild(secondTextNode); + newLinkElement.setAttribute("href", "/gallery"); + } else if (i === 2) { + const thirdTextNode = document.createTextNode("kontakt"); + newLinkElement.appendChild(thirdTextNode); + newLinkElement.setAttribute("href", "/contact"); + } +} + +// Rozwiązanie z tablicą + +menuItems.forEach(function (obj) { + const newLiElement = document.createElement("li"); + const newLinkElement = document.createElement("a"); + ulElement.appendChild(newLiElement); + newLiElement.appendChild(newLinkElement); + newLinkElement.append(obj.text); + newLinkElement.setAttribute("href", obj.url); +}); diff --git a/05/app.js b/05/app.js index 39abe5d..df6bfc1 100644 --- a/05/app.js +++ b/05/app.js @@ -1,3 +1,29 @@ -console.log('DOM'); +console.log("DOM"); -const curr = document.querySelector('.js-curr'); +const curr = document.querySelector(".js-curr"); +const removeBtn = document.createElement("button"); +const currParent = curr.parentElement; + +currParent.appendChild(removeBtn); +const removeBtnText = document.createTextNode("Usuń z koszyka"); +removeBtn.appendChild(removeBtnText); + +const siblings = currParent.children; +const siblingsArray = [...siblings]; + +siblingsArray.forEach(function (el) { + if (!el.classList.contains("js-curr")) { + el.classList.add("sibling"); + } +}); +if (currParent.nextElementSibling.classList.contains("article")) { + currParent.nextElementSibling.setAttribute("title", "nextElementSibling"); +} + +const articleParrent = currParent.parentElement; +const p = document.createElement("p"); +const lastBtn = articleParrent.lastElementChild.lastElementChild; +articleParrent.lastElementChild.insertBefore(p, lastBtn); + +const clonedArticle = currParent.cloneNode(true); +articleParrent.insertBefore(clonedArticle, currParent); diff --git a/05/index.html b/05/index.html index 6498955..270fd34 100644 --- a/05/index.html +++ b/05/index.html @@ -1,30 +1,42 @@ - - - - - + + + + + devmentor.pl - JS DOM Elements - #05 - - + +
-
-

JS - Elementy DOM

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur quo quibusdam, nemo neque consequuntur pariatur totam? Facere quaerat molestias hic.

- -
-
-

JS - Zdarzenia

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur quo quibusdam, nemo neque consequuntur pariatur totam? Facere quaerat molestias hic.

- -
-
-

JS - Formularze

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur quo quibusdam, nemo neque consequuntur pariatur totam? Facere quaerat molestias hic.

- -
+
+

JS - Elementy DOM

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur + quo quibusdam, nemo neque consequuntur pariatur totam? Facere quaerat + molestias hic. +

+ +
+
+

JS - Zdarzenia

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur + quo quibusdam, nemo neque consequuntur pariatur totam? Facere quaerat + molestias hic. +

+ +
+
+

JS - Formularze

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur + quo quibusdam, nemo neque consequuntur pariatur totam? Facere quaerat + molestias hic. +

+ +
- +