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 🙏

[@riskiananda6047]

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

[@sapiqiuchannel4289]

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

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

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

[@ardianbeni6638]

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

[@hanmuid9387]

Bermanfaat banget videonya, Pak. Terima kasih!

[@nandopookey9195]

Keren bangat, terima kasih banyak pak ilmunya

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

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

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

[@jensen.33]

makasih banyak pak !

[@wiheltv1943]

Smngt pa Dika, lnjut trus

[@codinggoIndonesia]

terima kasih pak..saya sering mencobanya

[@muhammadwafa7786]

pak dika memang luar biasa :D

[@muliadibgt9052]

di tunggu latihan berikutnya pak DIKA OK BGT VIDEONYA

[@rariodamar7370]

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

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

[@elisadoa8381]

Trimakasih bang dika ilmunya keren bangat

[@pencarikeadilan5571]

alhamdulillah ada lagi. hadir

[@Ashkrik]

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

[@sapiqiuchannel4289]

mantaff pak dika, makasih atas ilmunya

[@muhammadnurulhuda2737]

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

[@Ruslan-pi8zz]

NH Tutorial amin

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

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

[@dzakwanirfan5138]

terimaksih pak

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

[@iqbalputras2909]

mantap pak program nya trims

[@alifnurrohman9940]

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

[@danielherysetiawan657]

terima kasih...

[@AdamMDafa]

Ini ilmu mahal bgt, tapi gratis ❤️

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

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

[@kangkoment100]

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

[@muhammadrangga9644]

sangatt mindblowing

[@kleplopopon7471]

Makasih pak 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 ;

[@nabillaaaaa]

Terima kasih pak

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

[@androidcorners2964]

Dosen Programmer Indonesia 😅. Mantap pak

[@misifiksi2079]

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

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

[@lharun8320]

Bikin lampu diskotik kereeen

[@labibstyohugihafaiz8236]

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

[@andryantoaman]

semoga bertambh ilmunya

[@Studi_kasus]

keren pak

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

[@myasus5582]

keren

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

[@teknikinformatikass664]

mantap

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

[@Gustrio319]

*SEMOGA JADI WEB PROGRAMMER*

[@KawanLama_]

MUANTAB

[@zorrobasher2947]

Thank You Pak :)

[@alwayslearn45]

Saluuutttt dahhhh

[@nurmayunus6894]

mantab pak dika

[@hilmanfirdaus7139]

kerenn..

[@wibowomuhmmad]

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

[@tommyalhamra84]

thanks pak

[@zakial-ha6684]

mantap pak.

[@rifkidiangozali8]

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

[@Abdulaziz-qb8eg]

Lanjutkan pak

[@haneterujoseon7350]

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

[@ihsannurulhabib9729]

Ajib pisan pak :D..

[@azims602]

Akhirnya saya tahu cara ngegunain Math.random()

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

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

[@rudynisanr8694]

Nice

[@derisganesha1467]

Mantap pa 👍

[@whisnuys9030]

Pak Sandhika , NodeJS masuk list pembelajaran kah? kapan?

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

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

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

[@fatkur]

Mantapp pak :)

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

[@fs6783]

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

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

[@davideko8643]

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

[@tuankrab7475]

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

[@kholidirfangi9346]

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

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

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

[@hendrisantosohutasoit7881]

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

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

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

[@jenkinzsz]

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

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

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

[@neongenesis3574]

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

[@raghibhabibi210]

30:40 mending pake function declaration Kan?

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

[@Tapak_Tilas37]

hallo kk klau untuk body nya berubah warna dalam 1 detik secarah otomatis bagaimna caranya ya kk?

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