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})`; }); }

[@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 }); }

[@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

[@riskiananda6047]

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

[@arisbimas]

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

[@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 👍

[@sapiqiuchannel4289]

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

[@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

[@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);

[@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.

[@ardianbeni6638]

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

[@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 + ")"; };

[@hanmuid9387]

Bermanfaat banget videonya, Pak. Terima kasih!

[@nandopookey9195]

Keren bangat, terima kasih banyak pak ilmunya

[@prass111]

15:20 saya seperti ini //tombol const buton = document.createElement("button"); const butek = document.createTextNode("ubah warna!"); buton.append(butek); buton.setAttribute("type", "button"); document.body.append(buton);

[@muhammadnurulhuda2737]

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

[@Ruslan-pi8zz]

NH Tutorial amin

[@wiheltv1943]

Smngt pa Dika, lnjut trus

[@muhammadwafa7786]

pak dika memang luar biasa :D

[@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...

[@pencarikeadilan5571]

alhamdulillah ada lagi. hadir

[@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})`; });

[@elisadoa8381]

Trimakasih bang dika ilmunya keren bangat

[@Ashkrik]

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

[@sapiqiuchannel4289]

mantaff pak dika, makasih atas ilmunya

[@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

[@jensen.33]

makasih banyak pak !

[@codinggoIndonesia]

terima kasih pak..saya sering mencobanya

[@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 🙏

[@muliadibgt9052]

di tunggu latihan berikutnya pak DIKA OK BGT VIDEONYA

[@iqbalputras2909]

mantap pak program nya trims

[@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

[@alwayslearn45]

Saluuutttt dahhhh

[@rariodamar7370]

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

[@muhammadrangga9644]

sangatt mindblowing

[@Studi_kasus]

keren pak

[@haneterujoseon7350]

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

[@AdamMDafa]

Ini ilmu mahal bgt, tapi gratis ❤️

[@androidcorners2964]

Dosen Programmer Indonesia 😅. Mantap pak

[@fcicoss648]

Efek kegabutan saya i) 0 < = rgb

[@jenkinzsz]

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

[@alifnurrohman9940]

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

[@lharun8320]

Bikin lampu diskotik kereeen

[@myasus5582]

keren

[@ihsannurulhabib9729]

Ajib pisan pak :D..

[@kleplopopon7471]

Makasih pak ilmunya,

[@nurmayunus6894]

mantab pak dika

[@dzakwanirfan5138]

terimaksih pak

[@Gustrio319]

*SEMOGA JADI WEB PROGRAMMER*

[@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

[@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

[@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"

[@kangkoment100]

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

[@hilmanfirdaus7139]

kerenn..

[@derisganesha1467]

Mantap pa 👍

[@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👍👍

[@Abdulaziz-qb8eg]

Lanjutkan pak

[@danielherysetiawan657]

terima kasih...

[@nabillaaaaa]

Terima kasih pak

[@zakial-ha6684]

mantap pak.

[@KawanLama_]

MUANTAB

[@teknikinformatikass664]

mantap

[@tommyalhamra84]

thanks pak

[@davideko8643]

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

[@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..

[@zorrobasher2947]

Thank You Pak :)

[@misifiksi2079]

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

[@labibstyohugihafaiz8236]

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

[@wibowomuhmmad]

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

[@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; }

[@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})` }) })

[@fs6783]

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

[@andryantoaman]

semoga bertambh ilmunya

[@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 ;

[@ihsannuruliman3656]

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

[@rudynisanr8694]

Nice

[@fatkur]

Mantapp pak :)

[@Kamuna22]

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

[@kodekreasi]

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 + ')' }) })

[@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);

[@kholidirfangi9346]

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

[@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

[@tuankrab7475]

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

[@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

[@raghibhabibi210]

30:40 mending pake function declaration Kan?

[@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' });

[@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

[@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?

[@rifkidiangozali8]

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

[@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.

[@mpferrypermana134]

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

[@AliArsa48]

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

[@whisnuys]

Pak Sandhika , NodeJS masuk list pembelajaran kah? kapan?

[@hendrisantosohutasoit7881]

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

[@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

[@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..

[@azims602]

Akhirnya saya tahu cara ngegunain Math.random()

[@fauzanady1342]

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

[@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 !!

[@mangrobert5721]

Pak Dika maaf saya belum mengerti untuk di menit 20:40, kenapa kita harus menambahkan + ya pak, apakah tidak bisa 'r' saja? Apakah dengan + kita merubah r menjadi integer ?

[@handikarafli9751]

izin menjawab ya mas, r kan di dalam variabel jadi jika variabel dimasukkan ke dalam string '' ' maka nilainya string bukan variabel

[@nizam6196]

Dengan contoh r = 2 ' + r + ' ' + 2 + ' ' 2 '