add tasks 1-5

01/app.js

@@ -1 +1,11 @@
-console.log('DOM');
+const el = document.querySelector('.comments__item.comments__item--newest');
+
+if (el) {
+	const items = el.querySelectorAll('[data-info]');
+
+	console.log(`Liczba elementów z data-info: ${items.length}`);
+
+	items.forEach(el => {
+		console.log(el.dataset.info);
+	});
+}

02/app.js

@@ -1 +1,11 @@
-console.log('DOM');
+console.log('DOM');
+const links = document.querySelectorAll('[data-url]');
+console.log(links);
+
+links.forEach(link => {
+	const url = link.dataset.url;
+
+	if (url) {
+		link.href = url;
+	}
+});

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!',
-}
+	attr: {
+		className: 'btn',
+		title: 'super button',
+	},
+	css: {
+		border: '1px solid #336699',
+		padding: '5px 20px',
+		color: '#444',
+	},
+	text: 'Click me!',
+};
+
+const btnParent = document.querySelector('.parent-for-button');
+
+if (btnParent) {
+	const button = document.createElement('button');
+
+	for (const key in buttonSettings.attr) {
+		button[key] = buttonSettings.attr[key];
+	}
+
+	for (const key in buttonSettings.css) {
+		button.style[key] = buttonSettings.css[key];
+	}
+
+	button.textContent = buttonSettings.text;
+
+	btnParent.appendChild(button);
+}

04/app.js

@@ -1,8 +1,55 @@
-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'},
-];
+	{ text: 'start', url: '/' },
+	{ text: 'galeria', url: '/gallery' },
+	{ text: 'kontakt', url: '/contact' },
+];
+
+const nav = document.querySelector('nav');
+
+if (nav) {
+	const menu = document.createElement('ul');
+
+	const li1 = document.createElement('li');
+	const a1 = document.createElement('a');
+	a1.href = '/';
+	a1.textContent = 'start';
+	li1.appendChild(a1);
+
+	const li2 = document.createElement('li');
+	const a2 = document.createElement('a');
+	a2.href = '/gallery';
+	a2.textContent = 'galeria';
+	li2.appendChild(a2);
+
+	const li3 = document.createElement('li');
+	const a3 = document.createElement('a');
+	a3.href = '/contact';
+	a3.textContent = 'kontakt';
+	li3.appendChild(a3);
+
+	menu.appendChild(li1);
+	menu.appendChild(li2);
+	menu.appendChild(li3);
+
+	nav.appendChild(menu);
+}
+
+if (nav) {
+	const menu = document.createElement('ul');
+
+	menuItems.forEach(item => {
+		const li = document.createElement('li');
+		const a = document.createElement('a');
+
+		a.textContent = item.text;
+		a.href = item.url;
+
+		li.appendChild(a);
+		menu.appendChild(li);
+	});
+
+	nav.appendChild(menu);
+}

05/app.js

@@ -1,3 +1,27 @@
-console.log('DOM');
+// console.log('DOM');
 
 const curr = document.querySelector('.js-curr');
+
+if (curr) {
+	const parent = curr.parentElement;
+
+	const deleteBtn = document.createElement('button');
+	deleteBtn.textContent = 'usuń z koszyka';
+	parent.appendChild(deleteBtn);
+
+	[...parent.children].forEach(el => {
+		if (el !== curr) el.classList.add('siblings');
+	});
+
+	parent.nextElementSibling.setAttribute('title', 'nextElementSibling');
+
+	const lastArticle = parent.parentElement.lastElementChild;
+	const p = document.createElement('p');
+	p.textContent = 'Dodatkowy paragraf';
+	lastArticle.insertBefore(p, lastArticle.querySelector('button'));
+
+	const newArticle = parent.cloneNode(true);
+	const newCurrBtn = newArticle.querySelector('.js-curr');
+	if (newCurrBtn) newCurrBtn.classList.remove('js-curr');
+	parent.parentElement.insertBefore(newArticle, parent);
+}