Color Changer w JavaScript - kurs front-end zaawansowany - bonus 11

Trening JavaScript w ramach 11. dnia nauki w kursie Front-end zaawansowany. W materiale bonusowym do zrobienia przez Ciebie "zmieniacz kolorów tła".
codepen.io/web... - tu rozpocznij zadanie
codepen.io/web... - rozwiązanie
Ucz się z moich kursów na Udemy. Mam dla Ciebie zniżki na moje kursy.
👉 Kod do kursu Web developer od podstaw w 15 intensywnych dni: websamuraj.pl/...
👉 Front-end średniozaawansowany w 15 intensywnych dni: websamuraj.pl/...
👉 Kod do kursu Kompletny kurs programowanie w JavaScript: websamuraj.pl/...
👉 Kod do kursu Zaawansowane projekty w CSS i JavaScript: websamuraj.pl/...
Kod do kursu React od podstaw: websamuraj.pl/...
👉 Kod do kursu Node.js, Express i MongoDB: websamuraj.pl/...
Ten kurs to drugi etap (z sześciu) w projekcie od podstaw do pierwszej pracy jako front-end developer (szczegóły na websamuraj.pl)
#javascript #praktykaCzyniCuda #kurs #front-end

[@SamurajProgramowania]

Na kolejny dzień zapraszam w piątek!

[@bobolek10]

ale kursu czy bonusu?

[@SamurajProgramowania]

bonusu

[@agnieszkalewandowska9896]

Jestem pod nieustającym wrażeniem, jak prosto tłumaczysz skomplikowane i nowe zagadnienia. Dzięki! :)

[@kove5762]

Dzięki tym wszystkim poradnikom i kursom zdecydowałem się na wybór informatyki jako przedmiot rozszerzający. Dużo się od Pana dowiedziałem i mam nadzieję, że jeszcze więcej się dowiem :)

[@MaestroDJDaniello]

Akurat byłem zmuszony do użycia .js podczas tworzenia www, a film rozjaśnił mi podstawy. sam zastanawiałem się, jak skrócić kod, a tutaj otrzymałem bardzo przyjemne rozwiązanie, dziękuję!

[@paweszybaj904]

Moje rozwiązanie trochę inne ale też działa:
const bg = document.querySelector("body");
bg.addEventListener("click", colorChange);
function colorChange(e) {
if (e.target !== e.currentTarget) {
bg.style.background = e.target.classList;
}
e.stopPropagation();
}

[@konradsudo7473]

W sam raz po kolacji :)

[@sebastianszarejko6579]

Bartku czy przy kursie reacta będziesz coś mówił o instalacji i konfiguracji webpacka?

[@dominikr2927]

świetny film! Bartku proszę przemyśl przeprowadzenie na udemy kursu javascript...

[@SamurajProgramowania]

Dominik, będzie od 17.09 :)

[@aleksandergorczyk1582]

const colors = document.querySelectorAll('div');
colors.forEach(function (color) {
color.addEventListener("click", changeColor);
})
function changeColor() {
document.body.classList.toggle(this.className);
}
Tu jeszcze opcja z togglem w kodzie uniwersalnym.

[@emileq18]

Ja zamiast używać className odwołałem się do styli body i też działa.

[@Blazeyos]

Witam, czy na kursie javascript od Pana na udemy będzie wszystko od początku, jeśli chodzi o JS? Czy zaczynamy z wiadomościami z kursu zaawansowany front-end? Pozdr

[@SamurajProgramowania]

Jest tam wprowadzenie, które pozwoli się odnaleźć także tym, którzy nie poznali wcześniej Javascript i nie programowali.

[@Blazeyos]

@@SamurajProgramowania dzięki wielkie za informację. Także mogę kupić sobie kurs w ciemno. Pozdr

[@sylwesterjot921]

Można też tak:
function changeColor() {
document.body.style.backgroundColor = this.className;
}

[@barttux6436]

Pewnie, że można, ale to nie jest dobrą praktyką ;) W Twoim przykładzie, bezpośrednio w JS, manipulujemy "wyglądem" DOMu, a za wszelkie zmiany w "wyglądzie" DOMu powinien odpowiadać CSS - właśnie dlatego lepiej w CSS napisać osobne style pod poszczególne zachowania, które to obsłużymy JSem. Bartek zrobił to perfekcyjnie ;)

[@amiikoma]

wymyśliłem takie coś:
const divs = document.querySelectorAll('div')
for (let i = 0; i < divs.length; i++) {
divs[i].addEventListener("click", function () {
document.body.className = divs[i].className;
});
}

[@adammodzelewski4204]

Ja pominąłem pętle i inne takie i napisałem to tak:
document.body.onclick = (e) => {
document.body.className = '';
document.body.classList.add(e.srcElement.className);
}

[@adammodzelewski4204]

albo w jednej linii tak:
document.body.onclick = e => document.body.className = e.srcElement.className;

[@Falwack]

const div = document.querySelectorAll('.active')
for(let i=0; i

[@ziolekcch]

let rects = document.querySelectorAll('div');
rects.forEach(item => item.addEventListener('click', () => document.body.style.backgroundColor = item.className));

[@cieplosystemowe]

const divs = document.getElementsByTagName('div');
const bd = document.body;
for(var i=0; i

[@thigrand]

Mieszane uczucia. Bo materiał przyjemny i fajnie tłumaczony. Ale pobieranie wszystkich divów z dokumentu, to case totalnie z czapy. Nigdy w praktyce się tego nie robi. Bo zawsze masz więcej divów niż te które chcesz pobrać. Może to czepianie się. Ale nowicjuszom takie rzeczy wchodzą do głowy podświadomie. Że tak się robiło na kursie. A później kombinując ze swoimi pierwszymi aplikacjami natrafią na problem, którego nie będą w stanie obejść. Bo zapną więcej eventów niż planowali.

[@qqba]

Myślę, że bardziej chodzi o pokazanie tego mechanizmu i oczywiste jest, że nikt nie pobierze wszystkich divów, tylko użyje klasy.

[@thigrand]

To jest oczywiste dla ludzi z branży a nie dla uczących się.

[@SamurajProgramowania]

Myślę, że dla uczących się na tym poziomie też to już jest oczywiste ;) Totalnie z czapy jest też przykład z kolorami, ale myślę, że nie chodzi o to czy przykład jest życiowy (praktyczny), a o to, że dzięki niemu możemy wyodrębnić problem/zagadnienie i pokazać rozwiązanie. W każdym razie oczywiście szanuję prawo do opinii i i oceny i naprawdę dzięki za komentarz :)

[@thigrand]

To wciąż jest poziom elementarzowy i wielu ludzi może tego nie ogarniać. Moim zdaniem powinno się chociażby wspomnieć o takich rzeczach. Przesiadując na grupach dla początkujących i próbując im pomóc mogę spokojnie stwierdzić, że ludzie takich rzeczy mogą nie ogarnąć.