diff --git a/01/app.js b/01/app.js index 1c9992e..dc38cf5 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 ulElement = document.querySelector( + ".comments__item.comments__item--newest" +); + +if (ulElement) { + const dateInfoElements = ulElement.querySelectorAll("[data-info]"); + console.log(`The elemnts with data-info are ${dateInfoElements.length}`); +} \ No newline at end of file diff --git a/02/app.js b/02/app.js index 1c9992e..d846e61 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 linksElement = document.querySelectorAll('a[data-url]') + +linksElement.forEach(function(link) { + const dataUrl = link.getAttribute('data-url') + link.href = dataUrl +}) + diff --git a/03/app.js b/03/app.js index c299ca3..1a8a837 100644 --- a/03/app.js +++ b/03/app.js @@ -1,14 +1,32 @@ -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: "10px solid #336699", + padding: "5px 20px", + color: "#444", + }, + text: "Click me!", +}; + +const btnElement = document.createElement("BUTTON"); + +for (const key in buttonSettings.attr) { + btnElement[key] = buttonSettings.attr[key]; +} + +for (const key in buttonSettings.css) { + btnElement.style[key] = buttonSettings.css[key]; +} + +btnElement.textContent = buttonSettings.text; + +const parent = document.querySelector(".parent-for-button"); + +if (parent) { + parent.appendChild(btnElement); +} diff --git a/04/app.js b/04/app.js index e6411e4..69a3c96 100644 --- a/04/app.js +++ b/04/app.js @@ -1,8 +1,49 @@ -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 ulEl = document.createElement("ul"); +const navEl = document.querySelector("nav"); +navEl.appendChild(ulEl); + +// const liFirst = document.createElement("li"); +// const liFirstLink = document.createElement("a"); + +// liFirstLink.href = "/"; +// liFirstLink.innerText = "home"; + +// liFirst.appendChild(liFirstLink); +// ulEl.appendChild(liFirst); + +// const liSecond = document.createElement("li"); +// const liSecondLink = document.createElement("a"); + +// liSecondLink.href = "/gallery"; +// liSecondLink.innerText = "gallery"; + +// liSecond.appendChild(liSecondLink); +// ulEl.appendChild(liSecond); + +// const liThird = document.createElement("li"); +// const liThirdLink = document.createElement("a"); + +// liThirdLink.href = "/contact"; +// liThirdLink.innerText = "contact"; + +// liThird.appendChild(liThirdLink); +// ulEl.appendChild(liThird); + +menuItems.forEach(function (el) { + const liEl = document.createElement("li"); + const linkEl = document.createElement("a"); + linkEl.innerText = el.text; + linkEl.href = el.url; + + liEl.appendChild(linkEl); + ulEl.appendChild(liEl); +}); diff --git a/05/app.js b/05/app.js index 39abe5d..1f8e6d4 100644 --- a/05/app.js +++ b/05/app.js @@ -1,3 +1,26 @@ -console.log('DOM'); +console.log("DOM"); -const curr = document.querySelector('.js-curr'); +const curr = document.querySelector(".js-curr"); +const newBtn = document.createElement("BUTTON"); +newBtn.innerText = "usuń z koszyka"; +const parentCurr = curr.parentNode; + +parentCurr.appendChild(newBtn); + +const parentChildren = parentCurr.children; +for (const el of parentChildren) { + el.classList.add("siblings"); +} + +const secondChild = parentCurr.nextElementSibling; +secondChild.setAttribute("title", "nextElementSibling"); + +const articleParent = parentCurr.parentNode; +const articleLastChild = articleParent.lastElementChild; +const newParagraf = document.createElement("p"); +newParagraf.innerText = "Dodatkowy paragraf"; +const articleLastChildBtn = articleLastChild.lastElementChild; +articleLastChild.insertBefore(newParagraf, articleLastChildBtn); + +const newArticle = parentCurr.cloneNode(true); +articleParent.insertBefore(newArticle, parentCurr);