diff --git a/01/app.js b/01/app.js index 1c9992e..23f0d8b 100644 --- a/01/app.js +++ b/01/app.js @@ -1 +1,8 @@ -console.log('DOM'); \ No newline at end of file +console.log('DOM'); + +const commentsNewest = document.querySelector('.comments__item.comments__item--newest'); + +if (commentsNewest) { + const commentsNewestWithDataInfo = commentsNewest.querySelectorAll('[data-info]'); + console.log(`${commentsNewestWithDataInfo.length} elements found with data-info attribute.`); +}; \ No newline at end of file diff --git a/02/app.js b/02/app.js index 1c9992e..ebd4064 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 linksWithDataUrl = document.querySelectorAll('a[data-url]'); + +linksWithDataUrl.forEach(link => { + const url = link.getAttribute('data-url'); + link.setAttribute('href', url); +}); \ No newline at end of file diff --git a/03/app.js b/03/app.js index c299ca3..12767f8 100644 --- a/03/app.js +++ b/03/app.js @@ -10,5 +10,26 @@ const buttonSettings = { padding: '5px 20px', color: '#444' }, - text: 'Click me!', -} \ No newline at end of file + textContent: 'Click me!' +}; + +const applySettings = (element, settings) => { + for (const [key, value] of Object.entries(settings)) { + if (key === 'attr') { + for (const [attr, attrValue] of Object.entries(value)) { + element[attr] = attrValue + } + } else if (key === 'css') { + for (const [prop, propValue] of Object.entries(value)) { + element.style[prop] = propValue; + } + } else { + element[key] = value; + } + } +}; + +const button = document.createElement('button'); +applySettings(button, buttonSettings); +const buttonParent = document.querySelector('.parent-for-button'); +buttonParent.appendChild(button); \ No newline at end of file diff --git a/04/app.js b/04/app.js index e6411e4..8811374 100644 --- a/04/app.js +++ b/04/app.js @@ -5,4 +5,20 @@ const menuItems = [ {text: 'start', url: '/'}, {text: 'galeria', url: '/gallery'}, {text: 'kontakt', url: '/contact'}, -]; \ No newline at end of file +]; + +const navList = document.createElement('ul'); + +menuItems.forEach(item => { + const listItem = document.createElement('li'); + const listItemLink = document.createElement('a'); + + listItemLink.href = item.url; + listItemLink.textContent = item.text; + + listItem.appendChild(listItemLink); + navList.appendChild(listItem); +}); + +const nav = document.querySelector('nav'); +nav.appendChild(navList); \ No newline at end of file diff --git a/05/app.js b/05/app.js index 39abe5d..04be152 100644 --- a/05/app.js +++ b/05/app.js @@ -1,3 +1,44 @@ console.log('DOM'); const curr = document.querySelector('.js-curr'); +if (curr) { + const currParent = curr.parentElement; + const articlesSection = currParent.parentElement; + const articles = articlesSection.children; + const lastArticle = articles[articles.length - 1]; + const newArticle = lastArticle.cloneNode(true); // Used the last article as a template + + //1 + const removeButton = document.createElement('button'); + removeButton.textContent = 'UsuĊ„ z koszyka'; + currParent.insertBefore(removeButton, curr.nextElementSibling); + + //2 + for (let child of currParent.children) { + if (child !== curr) child.classList.add('siblings'); + } + + //3 + const nextArticle = currParent.nextElementSibling; + if (nextArticle && nextArticle.classList.contains('article')) nextArticle.setAttribute('title', 'nextElementSibling'); + + //4 + if (lastArticle) { + const extraParagraph = document.createElement('p'); + extraParagraph.textContent = 'Extra paragraph'; + const btnInLast = lastArticle.querySelector('button'); + + btnInLast ? lastArticle.insertBefore(extraParagraph, btnInLast) : lastArticle.appendChild(extraParagraph); + } + + //5 + const titleEl = newArticle.querySelector('.article__title'); + if (titleEl) titleEl.textContent = 'JS - New Article'; + + const descEl = newArticle.querySelector('.article__description'); + if (descEl) descEl.textContent = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'; + + articlesSection.insertBefore(newArticle, articlesSection.firstElementChild); +} else { + console.error('.js-curr elem not found'); +} \ No newline at end of file