Skip to content

feat: DOM Elements practise #154

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
zanetasochon wants to merge 10 commits into
base: master
Choose a base branch
from
Open

feat: DOM Elements practise #154

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
85aa16c
feat(01): Find element include data-info atribute
Apr 21, 2025
1b0e0da
feat(02): Add href atributes to dataset elements
Apr 21, 2025
6e7f59f
feat(03): Display button by JS
Apr 23, 2025
d440a71
feat(04): Create unordered list with links
Apr 23, 2025
485da0d
feat(05): DOM elements practise
Apr 24, 2025
a66b708
fix(01): Improve search query selector method
Apr 26, 2025
e016568
fix: Read span elements number
Apr 26, 2025
f242cc2
fix: Get only a[data-url] selectiors
Apr 26, 2025
cb90bd7
fix(03): Refactor for loop
Apr 26, 2025
6de7c0a
fix(05): Improve search siblings elements
Apr 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 18 additions & 1 deletion 01/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,18 @@
console.log('DOM');
const commentsItemNewest = document.querySelector('.comments__item', '.comments__item--newest');
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Apr 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Czy faktycznie został wyszukany zadany element czy po prostu pierwszy o klasie .comments__item? (efekt ten sam, ale treść zadania była inna)

Tutaj selektor powinien wyglądać tak: querySelector('.comments__item.comments__item--newest'); - teraz zadziała jak należy :)

const childrenOfLi = commentsItemNewest.querySelectorAll('p');
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Apr 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TUtaj już mamy obiekt "tablicopodobny" czyli mamy dostęp do length więc zamiast pętli wystarczy po prostu: childrenOfLi.length


let listOfSpan;
const spanArr = [];

const listOfP = childrenOfLi.forEach((el) => {
listOfSpan = el.querySelectorAll('span');

for (let i = 0; i < listOfSpan.length; i++) {
spanArr.push(listOfSpan[i]);
}
});

console.log(
'Zostało znalezionych elementów posiadających atrybut data-info w liczbie:',
spanArr.length
);
54 changes: 37 additions & 17 deletions 01/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,44 @@
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="Mateusz Bogolubow">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="author" content="Mateusz Bogolubow" />
<title>devmentor.pl - JS DOM Elements - #01</title>
</head>
<body>
</head>
<body>
<ul class="comments">
<li class="comments__item comments__item--newest">
<p>Lorem ipsum <span data-info="https://devmentor.pl">dolor</span> sit amet consectetur adipisicing elit. Iure, vero! <span data-info="https://devmentor.pl">Lorem</span> ipsum dolor sit amet, consectetur adipisicing elit. Nobis, amet?</p>
<p>Lorem ipsum dolor sit amet consectetur, <span data-info="https://devmentor.pl">adipisicing</span> elit. Magnam temporibus necessitatibus repellendus! Earum fugit distinctio facere iusto nesciunt! Voluptatem, perspiciatis?</p>
</li>
<li class class="comments__item">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <span data-info="https://devmentor.pl">Iure</span>, vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, amet?</p>
<p>Lorem ipsum dolor <span data-info="https://devmentor.pl">sit</span> amet consectetur, adipisicing elit. Magnam temporibus necessitatibus repellendus! Earum fugit distinctio facere iusto nesciunt! Voluptatem, perspiciatis?</p>
</li>
<li class="comments__item comments__item--newest">
<p>
Lorem ipsum
<span data-info="https://devmentor.pl">dolor</span>
sit amet consectetur adipisicing elit. Iure, vero!
<span data-info="https://devmentor.pl">Lorem</span>
ipsum dolor sit amet, consectetur adipisicing elit. Nobis, amet?
</p>
<p>
Lorem ipsum dolor sit amet consectetur,
<span data-info="https://devmentor.pl">adipisicing</span>
elit. Magnam temporibus necessitatibus repellendus! Earum fugit distinctio facere iusto
nesciunt! Voluptatem, perspiciatis?
</p>
</li>
<li class class="comments__item">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<span data-info="https://devmentor.pl">Iure</span>
, vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, amet?
</p>
<p>
Lorem ipsum dolor
<span data-info="https://devmentor.pl">sit</span>
amet consectetur, adipisicing elit. Magnam temporibus necessitatibus repellendus! Earum
fugit distinctio facere iusto nesciunt! Voluptatem, perspiciatis?
</p>
</li>
</ul>

<script src="./app.js"></script>
</body>
</html>
</body>
</html>
12 changes: 11 additions & 1 deletion 02/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,11 @@
console.log('DOM');
const aList = document.querySelectorAll('a');
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Apr 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Można też od razu wyszukać odpowiednie przez querySelectorAll('a[data-url]');

console.log(aList);

let hasAttribute;

const hasLink = aList.forEach((link) => {
if (link.hasAttribute('data-url')) {
hasAttribute = link.getAttribute('data-url');
link.setAttribute('href', hasAttribute);
}
});
53 changes: 42 additions & 11 deletions 03/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,45 @@
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 button = document.createElement('button');

for (const key in buttonSettings) {
if (key === 'attr') {
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Apr 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Jeśli robimy if-y na każdy przypadek to nie będzie czytelniej zrobić to oddzielnie? tj.

for (const key in buttonSettings.attr) {
      if (key === 'className') {
        button.classList.add(key);
      } else {
        button.setAttribute(key, buttonSettings.attr[key]);
      }
    }
    
 for (const key in buttonSettings.css) {
      if (key === 'border') {
        button.style[key] = buttonSettings.css[key];
      } else if (key === 'padding') {
        button.style[key] = buttonSettings.css[key];
      } else if (key === 'color') {
        button.style[key] = buttonSettings.css[key];
      }
    }
    
    button.textContent = buttonSettings.text

Teraz widać, żę dla css można nawet prościej:

 for (const key in buttonSettings.css) {

       button.style[key] = buttonSettings.css[key];

}

for (const key in buttonSettings.attr) {
if (key === 'className') {
button.classList.add(key);
} else {
button.setAttribute(key, buttonSettings.attr[key]);
}
}
}

key === 'text' ? (button.textContent = buttonSettings.text) : undefined;

if (key === 'css') {
for (const key in buttonSettings.css) {
if (key === 'border') {
button.style[key] = buttonSettings.css[key];
} else if (key === 'padding') {
button.style[key] = buttonSettings.css[key];
} else if (key === 'color') {
button.style[key] = buttonSettings.css[key];
}
}
}
}

const sectionEl = document.querySelector('section');
sectionEl.appendChild(button);
28 changes: 24 additions & 4 deletions 04/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,27 @@ 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 navEl = document.querySelector('nav');

const ulEl = document.createElement('ul');
navEl.appendChild(ulEl);

const arr = [];

const createLinkList = menuItems.forEach((item) => {
const liStartEl = document.createElement('li');
ulEl.appendChild(liStartEl);

arr.push(liStartEl);

const addAEl = document.createElement('a');
liStartEl.appendChild(addAEl);

addAEl.setAttribute('href', item.url);
addAEl.textContent = item.text;
});
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Apr 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

34 changes: 33 additions & 1 deletion 05/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,35 @@
console.log('DOM');

const curr = document.querySelector('.js-curr');
let curr = document.querySelector('.js-curr');
const currParent = curr.parentElement;

const currParentSibling = currParent.nextElementSibling;
currParentSibling.setAttribute('title', 'nextSiblingElement');

const currLastParentSibling = currParentSibling.nextElementSibling;
console.log(currLastParentSibling);
const newParagraph = document.createElement('p');

const cloneArt = currParent.cloneNode(true);
const art = document.querySelector('.articles');

art.insertAdjacentElement('afterbegin', cloneArt);

newParagraph.textContent = 'Lorem Ipsum dolor sit amet';
const pEl = currLastParentSibling.querySelector('p');
currLastParentSibling.insertBefore(newParagraph, pEl);

const btn = document.createElement('button');
btn.textContent = 'Usuń z koszyka';
curr.insertAdjacentElement('afterend', btn);

let siblingEl = curr.nextElementSibling;
const siblingsArr = [];

while ((curr = curr.nextElementSibling)) {
siblingsArr.push(siblingEl);
}

siblingsArr.forEach((el) => {
el.className = '.siblings';
});
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Apr 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Co jeśli curr jest ostatnim dzieckiem? Czy to zadziała? Wygodniej jest zrobić curr.parentElement.children i wykluczyć curr przez if i mamy rozdzieństwo :)