Javascript & DOM #8 - Bermain dengan WARNA (Latihan DOM 1)

[@IqbalEmran]

Ini mungkin salah satu alternatif cara yg lebih efektif pak: const range = document.querySelectorAll('input'); for (let i = 0; i < range.length; i++) { range[i].addEventListener('input', function () { const r = range[0].value; const g = range[1].value; const b = range[2].value; document.body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`; }); }

[@ujangbrudin1554]

11:58 kasus 2 | bikin warna random 20:39 concatenasi bisa pake backtik(`) jadi nanti tulisannya ga perlu ('string' + 'misalIniVariable') nantinya bakal jadi `string ${misalIniVariable}` 22:15 kasus 3 | bikin slider 34:29 kasus 4 | cursor bergerak

[@Nyandoto]

33:46 Mungkin ini yang lebih efektif ya pak? const SWarna = document.getElementsByClassName("sWarna"); //tangkap semua slider, sebelumnya dikasih class sWarna untuk semua slider //cek event value masing-masing slider dengan loop for (let i = 0; i < SWarna.length; i++) { SWarna[i].addEventListener("input", function () { const r = SWarna[0].value; //menangkap value r const g = SWarna[1].value; //menangkap value g const b = SWarna[2].value; //menangkap value b document.body.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")"; // console.log(r, g, b); //cek console rgb }); }

[@arisbimas]

Coba semua dosen saya spt bapak, jago semua mhsnya 😅 ,trims ilmunya pak 🙏

[@michaelbrandon4308]

bagi temen temen yang eror pada saat mengikuti ka Sandhika ada kata 'biru-muda' dibuatkan dlu pada style deket title dibawah .body { }dengan .biru-muda { backgroundColor : 'lightblue' }; dan kalau keyword after kalian gabisa pakai ini tombolUbahWarna.insertAdjacentElement('afterend', tombolAcakWarna);

[@ahmadfahmi8347]

ketemu nih pak cara yg menurut saya efektif,.. sebelum sintaks : sMerah.addEventListener('input', function(){} kita beri nilai nol dulu pada masing-masing value nya const r = sMerah.value=0; const g = sHijau.value=0; const b = sBiru.value=0; soalnya klo nggak kita kasih nilai nol, kita console dia mulai dari 128 nilai nya

[@adityarizki1845]

bukan harusnya pakai let ya kalau nilainya berubah-ubah

[@dustinsebastian5497]

mantap pak pembelajrannya. Baru belajar di 2021 agak telat mungkin komennya, menurut saya mungkin yang efektif di htmlnya di tambahin: div id="nama id bebas" di sebelum membuat rangenya supaya di javascriptnya tidak perlu membuat 3 document.addEventListener seperti itu. mungkin itu menurut saya kalo ada salah mungkin bisa dikoreksi atau ditambahkan. Mantap pak teruskan pembelajarannya! sukses selalu pak

[@sailormoon16]

@Rafki Desramadhan yg div kan ada 2 class: yg kotak ngasi lebar dan tinggi persegi disetiap rgb, kalo merah,hijau, biru warna yg diatas slidernya. CMIIW.

[@kaspun7556]

33:49 paling efektif sih pake forEach const range = document.querySelectorAll('input[type="range"]'); const body = document.body; range.forEach(input => { input.addEventListener('input', () => { const color = `rgb(${range[0].value}, ${range[1].value}, ${range[2].value})`; body.style.backgroundColor = color; }); });

[@adihsipemulungkoin]

Cakep nih kode nya mudah di fahami 👍

[@danielman59]

mengganti nilai hijau pada mousemove bisa menggunakan math random document.body.addEventListener("mousemove", (e) => { const posX = Math.round((e.clientX / window.innerWidth) * 255); const posY = Math.round((e.clientY / window.innerWidth) * 255); const green = Math.round(Math.random() * 255); document.body.style.backgroundColor = `rgb(${posX}, ${posY}, ${green})`; });

[@riskiananda6047]

Makin semangat belajar nya karna pak Dika padahal materinya sulit tapi mudah dipahami,makasi pak🙏

[@dimassu]

Saya mau tambahin pak, jadi jika user meng-inputkan warna dari input yang bertipe "color", maka background akan berubah sesuai yang kita input-kan tadi: **HTML** **JavaScript** const colorPickerBG = document.querySelector('input[type=color]'); colorPickerBG.addEventListener('change', function() { const rgb = colorPickerBG.value; document.body.style.backgroundColor = rgb; }

[@sapiqiuchannel4289]

baru tahu nih pak, ternyata dengan javascript web kita jadi lebih menarik, trus perdalam pak dika materi tentang javascrpt-nya...

[@adhityaaryo6984]

Mungkin cara terbaik untuk menghilangkan bug terakhir menurut saya adalah pada saat mau menggunakan eventListenernya, ruang lingkupnya diubah yang tadinya document.body.- menjadi document.- saja.

[@terranojazilfadiatmoko4149]

mantaps bang

[@yud4nta]

33:45 mungkin yang ini lebih efektif pak // range const cMerah = document.querySelector('.merah'); const cGreen = document.querySelector('.green'); const cBlue = document.querySelector('.blue'); let rgb = () => { const r = cMerah.value; const g = cGreen.value; const b = cBlue.value; let rgbs = (document.body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`); return rgbs; }; cMerah.addEventListener('input', rgb); cGreen.addEventListener('input', rgb); cBlue.addEventListener('input', rgb);

[@galantixa8339]

work bro. makasih

[@muhammadrafirahmanhabibi2951]

bisa juga gini, pakai query selector all, terus di foreeach: const sMerah = document.querySelector('input[name=sMerah]') const sHijau = document.querySelector('input[name=sHijau]') const sBiru = document.querySelector('input[name=sBiru]') const inputWarna = document.querySelectorAll('input[type=range]') inputWarna.forEach(input => { input.addEventListener('input', function () { const r = sMerah.value const g = sHijau.value const b = sBiru.value body.style.backgroundColor = `rgb(${r}, ${g}, ${b})` }) })

[@uum1626]

mantap...

[@junevenlee1979]

Sedikit kegabutan saya , oh iya untuk html tinggal komenin input range aj soalnya cuma kepakai satu input range bisa di copy atau buat baru lagi // Ini untuk memuncul angka random const h1 = document.querySelector('h1'); const button = document.querySelector('button'); button.addEventListener('click', function() { const angkaRandom = Math.floor(Math.random() * 10) + 1; h1.innerHTML = angkaRandom; }); //Ini untuk atur volume untuk yang ini kelen tinggal tambahin h3 aj dengan judul Atur Volume dan untuk h4 saya tambahin nya lewat javascript saja dan jika ada yang heran mengapa langsung 50% soalnya saya langsung mengikuti posisi range nya soalnya titik awal rangenya ditengah const slider = document.querySelector('input'); const h3 = document.querySelector('h3'); const h4 = document.createElement('h4'); const teks = document.createTextNode('50%'); h4.append(teks); h3.append(h4); slider.addEventListener('input', function() { const volume = slider.value; h4.innerHTML = `${volume}%`; }); sekian terimakasih dan selama mencoba ;

[@fajargumilang6686]

ya allah baru ngeuh ini yang komen 4 5 6 tahun yang lalu😅, berkah selalu ilmu nya pak galih, saya mhsiswa semester 1 yng sedang beljr javaScript di tahun 2024

[@LukmanulHakim_]

mantap

[@marhaensa]

Seru banget pak,walaupun masih sering error karna kecerobohan saya menggunakan variable yang cepet saya lupa,dan lupa menggunakan huruf kapital jika ada 2 kata

[@ardianbeni6638]

Tutorial yang niat banget..mantap Pak. Semoga bisa terus continue.

[@muhammadnurulhuda2737]

Mantap Pak Dika :D Lanjut terus pak. Mudah-mudahan selalu di berikan kesehatan selalu .. aamiin

[@Ruslan-pi8zz]

NH Tutorial amin

[@fatah3826]

maaf telat banyak tahun tapi ini caraku const range = document.querySelectorAll('input[type=range]') range.forEach(() => { e.addEventListener('input', () => { body.style.backgroundColor = 'rgb(' + range[0].value + ',' + range[1].value + ',' + range[2].value + ')' }) })

[@yudirunatmasneno9963]

33:42, code js saya yang efektiif let range = document.getElementsByTagName("input")[0]; range.addEventListener("input", function () { semuaRGB(); }); let range1 = document.getElementsByTagName("input")[1]; range1.addEventListener("input", function () { semuaRGB(); }); let range2 = document.getElementsByTagName("input")[2]; console.log(range2); range2.addEventListener("input", function () { semuaRGB(); }); let semuaRGB = function () { let gerak = range.value; let gerak2 = range1.value; let gerak3 = range2.value; document.body.style.backgroundColor = "rgb(" + gerak + "," + gerak2 + "," + gerak3 + ")"; };

[@MuhammadIlham-ze4jz]

untuk yang terakhir kayanya lebih simple gini const range = document.querySelectorAll('input[type="range"]'); range.forEach( e => { e.addEventListener("input", ()=> { document.body.style.backgroundColor = `rgb(${range[0].value},${range[1].value},${range[2].value})` }) })

[@hanmuid9387]

Bermanfaat banget videonya, Pak. Terima kasih!

[@rariodamar7370]

mantab Pak.. bisa untuk membuat web mode Dark/Light

[@zaskhacodecraft]

KASUS 3 - Kode Efektif menurut saya const sMerah = document.querySelector('input[name=sMerah]'); const sHijau = document.querySelector('input[name=sHijau]'); const sBiru = document.querySelector('input[name=sBiru]'); function updateBackgroundColor() { const r = sMerah.value; const g = sHijau.value; const b = sBiru.value; document.body.style.backgroundColor = `rgb(${r},${g},${b})`; } sMerah.addEventListener('input', updateBackgroundColor); sHijau.addEventListener('input', updateBackgroundColor); sBiru.addEventListener('input', updateBackgroundColor);

[@muhammadwafa7786]

pak dika memang luar biasa :D

[@Ruslan-pi8zz]

mantap.. tambah bagus mas video pembelajarannya, mudah dimengerti dan dipelajari. sudah agak paham javascript sekarang mas. update trus video pembelajarannya karna apa yang anda lakukan sangat mempermudah dalam belajar. 1. ada video studi kasus perancangan database gak buat web dengan php? Lanjut trus. ditunggu videonya. terima kasih.

[@sandhikagalihWPU]

cek playlist "Belajar PHP Untuk Pemula"

[@wiheltv1943]

Smngt pa Dika, lnjut trus

[@alifnurrohman9940]

Keren bangettttt, cuma bingung, masih banyak yg belum di ketahui, mulai dari method sama eventsnya

[@muliadibgt9052]

di tunggu latihan berikutnya pak DIKA OK BGT VIDEONYA

[@wibowomuhmmad]

pas buat rgb pake concatination, skrng udah ada template literals wkwkk parah dulu agak ribet juga yaa

[@hafishendriansyah6503]

mungkin bisa menggunakan forEach pak const sMerah = document.querySelector("input[name=sMerah]"); const sHijau = document.querySelector("input[name=sHijau]"); const sBiru = document.querySelector("input[name=sBiru]"); const slider = document.querySelectorAll("input"); slider.forEach(function (slide) { slide.addEventListener("input", function () { const r = sMerah.value; const g = sHijau.value; const b = sBiru.value; document.body.style.backgroundColor = "rgb(" + r + ", " + g + ", " + b + ")"; }); });

[@AliArsa48]

Daripada di edit di css, mungkin di document.body.addEventListener bisa diganti jadi document.addEventListener pak.

[@nandopookey9195]

Keren bangat, terima kasih banyak pak ilmunya

[@pencarikeadilan5571]

alhamdulillah ada lagi. hadir

[@faizalabdulhakim348]

terimakasih pak

[@ASkrik]

hadir... sehat, maju, and sukses selalu bung!!!

[@kangkoment100]

wah keren mungkin ini bisa saya pake untuk menampilkan cek harga sewa dari jarak ke jarak ijin coba :D

[@Gustrio319]

*SEMOGA JADI WEB PROGRAMMER*

[@jenkinzsz]

@jenkinzsz 0 seconds ago 34:22 "kalo kalian ngerti dom kalian punya kuasa" -pak sandhika😄; epic word of 2023

[@misifiksi2079]

kapan kapan livestream dong pak biar bisa tanya jawab langsung hehe :)

[@mpferrypermana134]

Saya pusing tetapi saya tidak menyerah karena saya sudah memutuskan untuk ke web development sebelum ke yg lain lain karena it luas

[@elisadoa8381]

Trimakasih bang dika ilmunya keren bangat

[@sapiqiuchannel4289]

mantaff pak dika, makasih atas ilmunya

[@jessica-tv6ep]

Keren, Pak! Saya udah coba, tp untuk yg terakhir, walau html & body udah disett hight ke 100%,kenapa ya bagian atas H1 tetep ngga menggenerate random color ketika mouse-nya digerakkan, Pak..

[@codinggoIndonesia]

terima kasih pak..saya sering mencobanya

[@garryf7254]

6:38 Oiya ngembaliin html collection... makannya kok ga berubah berubah dari tadi const btn = document.getElementById('btn'); const background = document.getElementsByTagName('body')[0]; btn.addEventListener('click', function(){ background.style.backgroundColor = 'orange' });

[@jensen.33]

makasih banyak pak !

[@dzakwanirfan5138]

terimaksih pak

[@androidcorners2964]

Dosen Programmer Indonesia 😅. Mantap pak

[@yudayudistira8329]

-1:49 (waktu mundur) Pertanyaan : selector body & html. jika body di beri height 100% berarti dia penuh pada parent nya, yaitu tag html. saya lihat pak sandhika memberi tag html dengan height 100% juga, artinya tag html tidak penuh pada DOM document! apa benar begitu pak? #ask #selector

[@agisahriza]

Pak dika, saya ada pertanyaan. Bukannya pembuatan variabel menggunakan const isinya tidak bisa dirubah ? Tapi kenapa const r untuk pergerakan mouse selalu terubah pak ? Terimakasih

[@kholidirfangi9346]

setau saya bisa hanya saja tidak bisa dirubah total, misal const x = [1,2,3] x = [1,2,3,4] itu boleh. Mohon dikoreksi kalo salah

[@fs6783]

Kalau kita mau slidernya pindah sendiri sesuai warnanya pas kita tekan tombol warna random pakai apa ya?

[@septikoaji]

nice tutorial Mas Dhika, sangat interaktif.. oiya mas Dhika saya sedang menunggu animasi dengan elemen canvas nya lho hehe.. nuhun dan sehat selalu Mas..

[@naufalyasin1315]

untuk math randomnya kan antarar 0-1, nah tapi di fungsinya kok x*255+1, kalo begitu saat x=1, hasilnya 256 dan itu diluar dari scope rgb kan?

[@fcicoss648]

Efek kegabutan saya i) 0 < = rgb

[@adipati27ma]

Keren abiss wkwk mantap pak dhika bisa dilanjutkan dengan ide-ide luar biasa lainnya ya buat video2 selanjutnya hehe, tetap semangat pak! btw ini channel kesayangan banget parah👍👍

[@akbargame1863]

kenapa ya tombol yang terkait dengan fungsi toggle hanya bisa dilakukan ketika fungsi lainnya belum di gunakan ? misal : ketika saya sudah menggunakan tombol yang berfungsi untuk random warna, lalu kemudian saya menggunakan tombol yang terkait dengan toggle. jadi tidak berfungsi.

[@labibstyohugihafaiz8236]

Sangat bermanfaat sekaliii 😍 saya harap next time ada tutorial android studio kak hehe.

[@haneterujoseon7350]

saya langsung ngakak di bagian "Terutama IE" wkwkw 23:45

[@anbiabohlam5468]

let tombol = document.getElementById('tombol'); let i = 0; let j = 0; let k = 0; let warna = ['blue','red','green','yellow','black','white']; tombol.addEventListener('click',function(){ document.body.classList.toggle('biru-muda'); }) let rTombol = document.createElement('button'); let teksTombol = document.createTextNode('Acak Warna'); rTombol.appendChild(teksTombol); rTombol.setAttribute('type','button'); rTombol.setAttribute('id','acak'); rTombol.style.marginLeft = '5px'; tombol.after(rTombol); let br = document.createElement('br'); rTombol.after(br); rTombol.after(br); let sRed = document.querySelector('input[name=red'); let sBlue = document.querySelector('input[name=blue'); let sGreen = document.querySelector('input[name=green'); i = sRed.value; j = sGreen.value; k = sBlue.value; document.body.style.backgroundColor = 'rgb('+i+','+j+','+k+')' ; sRed.addEventListener('input',function(){ i = sRed.value; document.body.style.backgroundColor = 'rgb('+i+','+j+','+k+')' ; }); sGreen.addEventListener('input',function(){ j = sGreen.value; document.body.style.backgroundColor = 'rgb('+i+','+j+','+k+')' ; }); sBlue.addEventListener('input',function(){ k = sBlue.value; document.body.style.backgroundColor = 'rgb('+i+','+j+','+k+')' ; }); rTombol.addEventListener('click',function(){ i = Math.floor(Math.random() * 256); sRed.value = i; j = Math.floor(Math.random() * 256); sGreen.value = j; k = Math.floor(Math.random() * 256); sBlue.value = k; document.body.style.backgroundColor = 'rgb('+i+','+j+','+k+')' ; }); document.addEventListener('mousemove', function(event){ let xPos = Math.floor((event.clientX / window.innerWidth) * 255); let yPos = Math.floor((event.clientY / window.innerHeight) * 255); document.body.style.backgroundColor = 'rgb('+xPos+','+yPos+','+k+')' ; }); 33:45 mungkin yang ini lebih efektif pak 🙏

[@junevenlee1979]

Ini cara efektif versi HTMLCollections cara sama dengan querySelectorAll punya abang Iqbal const sliders = document.getElementsByTagName('input'); for(let i = 0; i < sliders.length; i++) { sliders[i].addEventListener('input', function() { const r = sliders[0].value; const g = sliders[1].value; const b = sliders[2].value; document.body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`; }); }

[@davideko8643]

event pada input slide saya ganti "oninput" agar lebih responsif. kalau pake onchange harus nunggu dulu slide berhenti

[@rezaprarama8844]

Cara saya begini pak... gimana. document.body.addEventListener('mousemove', function(event){ const namaVar = Math.round((Math.random() * (event.clientX / event.clientY) )*(255*255*255)).toString(16); document.body.style.backgroundColor = '#'+ namaVar ; *ket : (255*255*255) => Posibility warna body css => transition: .5s; (atau sesuai selera) .toString(16) => convert ke HEX color

[@sandhikagalihWPU]

wow keren Za, ga kepikiran saya untuk ubah jadi bilangan hexa.. good job!! 👍

[@rezaprarama8844]

iya pak saya pernah baca ttg 16 million color(256*256*256) sama ttg konversi desimal ke Hexa. di implementasikan ke tutorial pa sandhika jadi seru banget hehe !!

[@tuankrab7475]

Itu ngitungnya gimana pak yang (event.clientx/window.innerWidth) * 255? Hitung"annya gimana

[@alwayslearn45]

Saluuutttt dahhhh

[@hafidhkhalifah9702]

Terima kasih bapak atas ilmunya. Pak izin pak cuman pas saya coba di tombol dengan classList.togglenya kok gk bisa dipake lagi ya pak ? Izin diskusi

[@fatmaadisaputra3114]

Maaf pak dika sedikit koreksi, kalo diawal kita klik btn (Acak Warna) setelah itu klik btn (Ubah Warna) itu btn (Ubah Warna) jd gak fungsi pak, karna ketiban atribut dari btn (Acak Warna), seharusnya pada function dari btn (Ubah Warna) ditambahkan method removeAttribute() pak dika🙏

[@jessica-tv6ep]

Keren, Mas! tapi saya dari tadi ngulik belum ketemu cara biar yg button awal tetep berfungsi. Jadi harusnya penulisan kode-nya gimana, ya?

[@MichelleIndahJayawardana]

@@jessica-tv6ep tambahkan document.body.removeAttribute("style"); di dalam addEventListener nya btn ubah warna

[@AdamMDafa]

Ini ilmu mahal bgt, tapi gratis ❤️

[@muhammadrangga9644]

sangatt mindblowing

[@iqbalputras2909]

mantap pak program nya trims

[@hamdanibayuputra5312]

33:42 . saya ketemu pak :D , cara yang mungkin lebih efektif pastebin.com/LbfCc2UE

[@pudypay]

Bener, pake section

[@muhammadsupriyadi1622]

iya lebih simple mantap

[@denandaprayoga5269]

mau nanya pak, kan itu yg di beri eventListener section nya, cara dapetin nilai range nya itu gimana pak ? masih bingung saya

[@zainalmutaqin7386]

@@denandaprayoga5269 kaya nya itu nilai default aja sih jadinya ya udah bagitu aja ya logika terdekat aja ini mah sih

[@drichas7270]

@@denandaprayoga5269 kan di html nya dikasih nilai min & max bro ,, lalu nilai min & max itu dikirim ke javascript dengan nama.value

[@andidaffaliefalza]

const inputs = document.querySelectorAll('input'); inputs.forEach(function(input) { input.addEventListener("input", () => { const r = inputs[0].value; const g = inputs[1].value; const b = inputs[2].value; document.body.style.backgroundColor = `rgb(${r} ${g} ${b} )`; }); });

[@tamirrusydihega_0693]

damnn keren bett

[@albertuskevin920]

saat random warna, pa dhika nulis angka rgb, saya inget cara random pas tutorial js dasar main tebak angka

[@kholidirfangi9346]

mau tanya punya saya ko hanya bisa di klik sekali klik berikutnya warnanya tetap

[@ihsannuruliman3656]

menit 20:00 saya bingung kenapa kudu dikurang 1 (-1), pdhl rangenya kan dr 0 sd 255 bkn 0 sd 256.

[@ryandraathaya2866]

kalo kyk gini pendek kgk si pada kasus slider, hasilnya si sama. const sMerah = document.querySelector('input[name=sMerah'); const sHijau = document.querySelector('input[name=sHijau'); const sBiru = document.querySelector('input[name=sBiru'); document.body.addEventListener('input',function(){ document.body.style.backgroundColor='rgb('+sMerah.value+','+sHijau.value+','+sBiru.value+')'; })

[@lharun8320]

Bikin lampu diskotik kereeen

[@rifkidiangozali8]

Mantap pak sering-sering buat latihan pak.salam titik koma;

[@danielherysetiawan657]

terima kasih...

[@herusukmafama]

Mantap pak.

[@andryantoaman]

semoga bertambh ilmunya

[@hendrisantosohutasoit7881]

setAttribute sepanjang saya belajar JS DOM di pl unpas tidak dipelajari bg, boleh bagi link vidio nya bg

[@whisnuys9030]

Pak Sandhika , NodeJS masuk list pembelajaran kah? kapan?

[@nurmayunus6894]

mantab pak dika

[@ihsannurulhabib9729]

Ajib pisan pak :D..

[@kleplopopon7471]

Makasih pak ilmunya,

[@myasus5582]

keren

[@azims602]

Akhirnya saya tahu cara ngegunain Math.random()

[@diosatriadarma9882]

di 38:59 akan lebih masuk akal klo document.innerWidth ketimbang window.innerWidth tapi gk tahu kenapa di pakenya window.innerWidth

[@ItzMeHio]

mungkin karena window mencangkupnya lebih luas kali menurut gw

[@AliArsa48]

parseInt(Math.random() * 255 + 1); jika kita parseInt begini apa hasilnya tetap antara 1 - 255 ?

[@zorrobasher2947]

Thank You Pak :)

[@teknikinformatikass664]

mantap

[@Bramsiregar]

Thanks pak

[@fauzanady1342]

error pak seperti ini: Uncaught TypeError: Cannot read property 'addEventListener' of null at script.js:633

[@robertomancini2610]

Maaf pertanyaan nya melenceng dari konten pak. #namespace #use Saya sedang blajar oop php pak, yg mau saya tanyakan, cara untuk import class dari file lain menggunakan keyword 'use' apa harus file nya di include/require terlebih dahulu ? soalnya ak baca2 tutorial di internet file nya kok gag di include trlebih dahulu. Tapi ak coba import class dari file lain menggunakan 'use' tanpa ak include/require terlebih dahulu gag berhasil. Mohon jawabannya untuk memastikan pak.

[@hilmanfirdaus7139]

kerenn..

[@derisganesha1467]

Mantap pa 👍

[@Abdulaziz-qb8eg]

Lanjutkan pak