From 043dbd3761a8e3f196c36071dc5d376d606514a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krystian=20B=C4=85k?= Date: Sun, 6 Jul 2025 19:17:23 +0200 Subject: [PATCH] Zadania wykonane --- 01/app.js | 11 +++++++++- 02/app.js | 22 ++++++++++++++++++- 02/index.html | 4 ++-- 03/app.js | 30 ++++++++++++++++++++++++++ 03/index.html | 1 + 04/app.js | 42 ++++++++++++++++++++++++++++++++++++- 05/app.js | 58 +++++++++++++++++++++++++++++++++++++++++++++++++++ 7 files changed, 163 insertions(+), 5 deletions(-) diff --git a/01/app.js b/01/app.js index 1c9992ed..b21d0be4 100644 --- a/01/app.js +++ b/01/app.js @@ -1 +1,10 @@ -console.log('DOM'); \ No newline at end of file +const elementList = document.querySelector('.comments__item.comments__item--newest'); + +if (elementList !== null){ // Wykonuje tylko wtedy kiedy element został znaleziony + + const elementNewest = elementList.querySelectorAll('[data-info'); + + console.log(`Wszystkich elementów posiadających atrybut "data-info" oraz dwie klasy (comments__item, comments__item--newest) jest ${elementNewest.length}.`); // lenght - ilość elementów w tablicy zwrucona wartość to obiekt typu NodeList str. 22 +} else{ + console.log('Elementów które posiadają atrybut "data-info" NIE ZNALEZIONO'); +} diff --git a/02/app.js b/02/app.js index 1c9992ed..ebfe3745 100644 --- a/02/app.js +++ b/02/app.js @@ -1 +1,21 @@ -console.log('DOM'); \ No newline at end of file +const linkaDataUrl = document.querySelectorAll('a[data-url]'); // a z data-url + +linkaDataUrl.forEach(link => { + + const dataAUrl = link.getAttribute('data-url'); + + if(dataAUrl){ + link.setAttribute('href', dataAUrl); + link.removeAttribute('data-url'); // usuwam data-url + } + + const href = link.getAttribute('href'); + + try { + new URL(href); // Jeśli nieprawidłowy – wyrzuci wyjątek + console.log(`Poprawne linkpwanie: ${href}`); + } catch (error) { + console.warn(`Niepoprawne linkowanie: ${href}`); + link.textContent += ' X'; + } +}); \ No newline at end of file diff --git a/02/index.html b/02/index.html index 89a53f6d..75723293 100644 --- a/02/index.html +++ b/02/index.html @@ -13,8 +13,8 @@

Moje ulubione strony:

  • devmentor.pl
  • eveloper.mozilla.org
  • stackoverflow.com
    • -
  • null
    • +
  • null
    • - \ No newline at end of file + diff --git a/03/app.js b/03/app.js index c299ca32..888fe4c1 100644 --- a/03/app.js +++ b/03/app.js @@ -11,4 +11,34 @@ const buttonSettings = { color: '#444' }, text: 'Click me!', +} + + +const contSection = document.querySelectorAll('section.parent-for-button'); + +for(const section of contSection){ + const button = document.createElement('button'); // Tworzę przycisk + + + button.className = buttonSettings.attr.className; // Dodaje klasę + button.title = buttonSettings.attr.title; // Dodaje atrybut title + +for(const styleName of Object.keys(buttonSettings.css)){ + button.style[styleName] = buttonSettings.css[styleName]; +} + +/* + + Które rozwiązanie stostuje się generująć wartości z tablic / obiektów? + + for (const [styleName, value] of Object.entries(buttonSettings.css)) { + button.style[styleName] = value; + } + + +*/ + +button.textContent = buttonSettings.text; // Dodaje txt + +section.appendChild(button); // Dopalam przycisk } \ No newline at end of file diff --git a/03/index.html b/03/index.html index 4a58a28a..28654b61 100644 --- a/03/index.html +++ b/03/index.html @@ -10,5 +10,6 @@
    + \ No newline at end of file diff --git a/04/app.js b/04/app.js index e6411e4e..193928d2 100644 --- a/04/app.js +++ b/04/app.js @@ -1,8 +1,48 @@ console.log('DOM'); + + + +// 1 - bez wykorzystaina tablicy i forEach + +const navMenu = document.querySelector('nav'); +const ulMenu = document.createElement('ul'); + +const li1 = document.createElement('li'); +li1.textContent = 'home'; +ulMenu.appendChild(li1); + +const li2 = document.createElement('li'); +li2.textContent = 'gallery'; +ulMenu.appendChild(li2); + +const li3 = document.createElement('li'); +li3.textContent = 'contact'; +ulMenu.appendChild(li3); + +navMenu.appendChild(ulMenu); + +// 2 - z wykorzystaniem tablicy i forEach + + +const navMenuFor = document.querySelector('nav'); +const ulMenuFor = document.createElement('ul'); + // 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 +]; + + +menuItems.forEach(menuValue =>{ // uzycie "item" moze byc wykorzystywane przez innych programistów wiec tutaj będę zmienał zawsze na własną + const liFor = document.createElement('li'); + const aFor = document.createElement('a'); + aFor.textContent = menuValue.text; + aFor.href = menuValue.url; + liFor.appendChild(aFor); + ulMenuFor.appendChild(liFor); +}); + +navMenuFor.appendChild(ulMenuFor); \ No newline at end of file diff --git a/05/app.js b/05/app.js index 39abe5d5..6fa73148 100644 --- a/05/app.js +++ b/05/app.js @@ -1,3 +1,61 @@ console.log('DOM'); const curr = document.querySelector('.js-curr'); + + + +// 1 kolejny przycisk, rodzeństwem dla elementu o zmiennej curr z txt "usuń z koszyka" + +const removeCart = document.createElement('button'); +removeCart.textContent = 'Usuń z koszyka'; + +// dodaje przycisk + +curr.parentNode.appendChild(removeCart); // appendChild doda element na końcu jako ostatnie dziecko + +// lub bezpośrednio po nim curr.parentNode.insertBefore(removeCart, curr.nextSibling); + + +// 2 do js-curr dodaje klase .siblings + +const siblings = curr.parentNode.children; + +for (let i = 0; i < siblings.length; i++){ +if (siblings[i]!== curr){ + siblings[i].classList.add('siblings'); +} +} + +// 3 do następnego elementu o klasie .article, po .js-curr dodaje atybut "title" o wartości 'nextEl..' + +const afterParent = curr.parentNode; + +const addTitle = afterParent.nextElementSibling; + +if (addTitle && addTitle.classList.contains('article')) { + addTitle.setAttribute('title', 'nextElementSibling') +} + +// 4 Do ostatniego artykułu dodaj dodatkowy paragraf i umieść go przed znacznikiem `