practice-js-dom-elements

01/app.js

@@ -1 +1,11 @@
-console.log('DOM');
+console.log('DOM');
+let sum = 0;
+const commentsItems = document.querySelector('.comments__item.comments__item--newest');
+if (commentsItems) {
+    console.log(commentsItems);
+    const dataInfoElements = commentsItems.querySelectorAll('[data-info]');
+    if (dataInfoElements) {
+            console.log('data-info wystepuje ' + dataInfoElements.length + ' razy');
+        }
+    }
+

02/app.js

@@ -1 +1,15 @@
-console.log('DOM');
+console.log('DOM');
+const aList = document.querySelectorAll('a');
+if (aList) {
+    const dataUrl = document.querySelectorAll('[data-url]');
+    dataUrl.forEach(function (item) {
+        const link = item.getAttribute('data-url');
+        console.log(item)
+
+        item.setAttribute('href', link)
+    });
+
+
+}
+
+

03/app.js

@@ -1,14 +1,77 @@
+// Utwórz element <button/>, który:
+
+// zgodnie z powyższymi wytycznymi będzie posiadał odpowiednie atrybuty, style i tekst; do stworzenia tego obiektu (elementu HTML) spróbuj wykorzystać pętlę, np. for...in,
+// zostanie wstawiony do elementu o klasie .parent-for-button przy pomocy JavaScriptu.
+// Pamiętaj, aby ten przycisk był widoczny na stronie.
+
 console.log('DOM');
 
-const buttonSettings = {
-    attr: {
-        className: 'btn',
-        title: 'super button'
-    },
-    css: {
-        border: '1px solid #336699',
-        padding: '5px 20px',
-        color: '#444'
-    },
-    text: 'Click me!',
-}
+const sectionEl = document.querySelector('section')
+if (sectionEl) {
+    const newButton = document.createElement('button');
+
+    const buttonSettings = {
+        attr: {
+            className: 'btn',
+            title: 'super button'
+        },
+        css: {
+            border: '1px solid #336699',
+            padding: '5px 20px',
+            color: '#444'
+        },
+        text: 'Click me!',
+    }
+    const styles = buttonSettings['css'];
+    // newButton.style['background'] = 'red';
+    // newButton.style['padding'] = '5px 20px';
+    // newButton.style['border'] = '1px solid #336699';
+    // newButton.style['color'] = '#444';
+
+    for (const prop in buttonSettings['css']) {
+        const value = buttonSettings['css'][prop]
+        console.log(prop, value)
+        newButton.style[prop] = value;
+    }
+    // newButton['title'] = 'To jest tyul';
+    // newButton['className'] = 'btn';
+
+    for (const key in buttonSettings['attr']) {
+        const value = buttonSettings['attr'][key]
+        newButton[key] = value;
+    }
+    newButton.innerText = buttonSettings.text;
+
+    //   const value = buttonSettings['attr'];
+
+    //     const value3 = buttonSettings['text'];
+    // for (const prop in buttonSettings) {
+    //     // const value = buttonSettings[prop];
+    //     const value = buttonSettings['attr'];
+    //     const value2 = buttonSettings['css'];
+    //     const value3 = buttonSettings['text'];
+    //     // newButton.classList.add('prop');
+    //     // console.log("this person " + prop+ ' is '+ value )
+    //     console.log(value);
+    //     console.log(value2);
+    //     console.log(value3);
+    //     newButton.classList.add()
+    //     // const title='title';
+    //     // console.log(buttonSettings['attr'][title])
+    // }
+
+    sectionEl.appendChild(newButton);
+}
+// const buttonSettings = {
+//     attr: {
+//         className: 'btn',
+//         title: 'super button'
+//     },
+//     css: {
+//         border: '1px solid #336699',
+//         padding: '5px 20px',
+//         color: '#444'
+//     },
+//     text: 'Click me!',
+// }
+

04/app.js

@@ -1,8 +1,71 @@
 console.log('DOM');
 
+// Utwórz poniższą strukturę menu za pomocą JS:
+
+// <ul>
+//     <li><a href="/">start</a></li>
+//     <li><a href="/gallery">galeria</a></li>
+//     <li><a href="/contact">kontakt</a></li>
+// </ul>
+// Całość wstaw do elementu <nav/>.
+
+// Początkowo spróbuj wykonać to zadanie bez wykorzystania poniższej struktury:
+
+// const menuItems = [
+//     {text: 'start', url: '/'},
+//     {text: 'galeria', url: '/gallery'},
+//     {text: 'kontakt', url: '/contact'},
+// ]
+// Następnie zrób to samo, ale używając danych wraz z np. forEach.
+
+
+
 // 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 navElement = document.querySelector('nav');
+
+
+if (navElement) {
+    const links = [
+        { text: 'start', href: '/' },
+        { text: 'galeria', href: '/gallery' },
+        { text: 'kontakt', href: '/contact' }
+    ];
+
+    links.forEach(function (link) {
+        const liEl = document.createElement('li');
+        const aEl = document.createElement('a');
+        aEl.innerText = link.text;
+        aEl.setAttribute('href', link.href);
+        liEl.appendChild(aEl);
+        navElement.appendChild(liEl);
+    })
+    // if (navElement) {
+    //     const liEl = document.createElement('li');
+    //     const liEl2 = document.createElement('li');
+    //     const liEl3 = document.createElement('li');
+    //     const aEl = document.createElement('a');
+    //     const aEl2 = document.createElement('a');
+    //     const aEl3 = document.createElement('a');
+    //     aEl.innerText = 'start';
+    //     aEl2.innerText = 'galeria';
+    //     aEl3.innerText = 'kontakt';
+    //     aEl.setAttribute('href', '/');
+    //     aEl2.setAttribute('href', '/gallery');
+    //     aEl3.setAttribute('href', '/contact');
+
+
+    //     navElement.appendChild(liEl);
+    //     liEl.appendChild(aEl);
+    //     navElement.appendChild(liEl2);
+    //     liEl2.appendChild(aEl2);
+    //     navElement.appendChild(liEl3);
+    //     liEl3.appendChild(aEl3);
+
+    // }
+}

05/app.js

@@ -1,3 +1,70 @@
 console.log('DOM');
+// W pliku ./app.js znajdziesz zmienną curr, która wskazuje na element o klasie .js-curr.
+
+// Wykonaj poniższe zadania bez dodatkowych wyszukiwań. Po drzewie DOM możesz poruszać się tylko względem elementu ze zmiennej curr.
+
 
 const curr = document.querySelector('.js-curr');
+const articleEl = curr.parentElement;
+
+
+// Na początku listy dodaj kolejny artykuł, który będzie miał tę samą strukturę, co pozostałe artykuły.
+if (curr) {
+    const sectionEl = articleEl.parentElement;
+    if (articleEl && sectionEl) {
+        const cloneArticle = articleEl.cloneNode(true);
+        sectionEl.insertBefore(cloneArticle, articleEl);
+    }
+}
+
+// Utwórz kolejny przycisk, który będzie rodzeństwem (bratem) dla elementu ze zmiennej curr. Element ten niech zawiera napis usuń z koszyka.
+if (curr) {
+    // console.log(articleEl);
+    const newButton = document.createElement('button')
+    newButton.innerText = 'Usun z koszyka';
+    articleEl.appendChild(newButton);
+}
+
+// Do wszystkich elementów, które są rodzeństwem elementu o klasie .js-curr, dodaj klasę .siblings (wykorzystaj pętlę).
+
+for (const child of articleEl.children) {
+    if (curr != child) {
+        child.classList.add('siblings')
+    }
+}
+
+
+// Do następnego elementu o klasie .article, który występuje zaraz po rodzicu elementu o klasie .js-curr, dodaj atrybut title o wartości nextElementSibling.
+if (curr) {
+    const article2El = articleEl.nextElementSibling;
+    if (article2El) {
+        article2El.setAttribute('title', 'nextElementSibling')
+    }
+}
+
+
+// Do ostatniego artykułu dodaj dodatkowy paragraf i umieść go przed znacznikiem <button/>.
+
+if (curr) {
+    if (articleEl) {
+        const firstSiblingEl = articleEl.nextElementSibling;
+        // console.log(firstSiblingEl)
+        const secondSiblingEl = firstSiblingEl.nextElementSibling
+        // console.log(secondSiblingEl)
+        if (secondSiblingEl && secondSiblingEl.hasChildNodes()) {
+            // console.log(secondSiblingEl.hasChildNodes())
+            const pEl = secondSiblingEl.children;
+            const button = secondSiblingEl.children[2];
+            // console.log(button)
+
+            if (pEl) {
+                const newParagraph = document.createElement('p')
+                newParagraph.innerText = 'Nowy paragraf...';
+
+                secondSiblingEl.insertBefore(newParagraph, button);
+
+            }
+        }
+    }
+}
+