Skip to content

Commit b3f4ee7

Browse files
ProjectRavelProjectRavel
committed
Menambahkan Project Ubah warna JsDOM
1 parent c622d05 commit b3f4ee7

2 files changed

Lines changed: 106 additions & 0 deletions

File tree

‎5. Project Ubah Warna/index.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
<style>
8+
body{
9+
text-align: center;
10+
}
11+
.merah{
12+
background-color: red;
13+
width: 45px;
14+
height: 45px;
15+
margin: 10px auto;
16+
}
17+
.hijau{
18+
background-color: green;
19+
width: 45px;
20+
height: 45px;
21+
margin: 10px auto;
22+
}
23+
.biru{
24+
background-color: blue;
25+
width: 45px;
26+
height: 45px;
27+
margin: 10px auto;
28+
}
29+
</style>
30+
</head>
31+
<body id="body">
32+
<h1 class="h1">Latihan DOM</h1>
33+
<div class="button1">
34+
<button>Ubah warna merah</button>
35+
</div>
36+
<br><br>
37+
<div class="merah"></div>
38+
<input type="range" name="rMerah" min="1" max="255" value="0"> <br>
39+
<div class="hijau"></div>
40+
<input type="range" name="rHijau" min="1" max="255" value="0"> <br>
41+
<div class="biru"></div>
42+
<input type="range" name="rBiru" min="1" max="255" value="0">
43+
<script src="script.js"></script>
44+
</body>
45+
</html>

‎5. Project Ubah Warna/script.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
const button = document.querySelector('button');
2+
const body = document.querySelector('#body');
3+
const div = document.querySelector("div.button1")
4+
let reset
5+
const rMerah = document.querySelector('input[name="rMerah"]')
6+
const rHijau = document.querySelector('input[name="rHijau"]')
7+
const rBiru = document.querySelector('input[name="rBiru"]')
8+
9+
button.addEventListener('click', function(){
10+
document.body.style.backgroundColor = 'red'
11+
button.remove()
12+
const random = document.createElement('button');
13+
const tRandom = document.createTextNode('Acak Warna')
14+
15+
random.appendChild(tRandom)
16+
div.appendChild(random)
17+
18+
random.addEventListener('click', function(){
19+
let r = Math.round(Math.random() * 255 + 1)
20+
let g = Math.round(Math.random() * 255 + 1)
21+
let b = Math.round(Math.random() * 255 + 1)
22+
document.body.style.backgroundColor = 'rgb('+ r +', '+ g +', '+ b +')'
23+
if(!reset){
24+
console.log(reset)
25+
reset = document.createElement('button');
26+
tReset = document.createTextNode('reset')
27+
reset.appendChild(tReset)
28+
reset.setAttribute('type', 'reset')
29+
div.appendChild(reset)
30+
reset.addEventListener('click', function(){
31+
window.location.reload()
32+
})
33+
}
34+
35+
})
36+
})
37+
38+
rMerah.addEventListener('change', function(){
39+
document.body.style.backgroundColor = 'rgb('+ rMerah.value +','+ rHijau.value +','+ rBiru.value +')'
40+
})
41+
42+
rHijau.addEventListener('change', function(){
43+
document.body.style.backgroundColor = 'rgb('+ rMerah.value +','+ rHijau.value +','+ rBiru.value +')'
44+
})
45+
46+
rBiru.addEventListener('change', function(){
47+
document.body.style.backgroundColor = 'rgb('+ rMerah.value +','+ rHijau.value +','+ rBiru.value +')'
48+
})
49+
50+
window.addEventListener("mousemove", function(e){
51+
const xPos = e.clientX
52+
const yPos = e.clientY
53+
const windowWidth = window.innerWidth
54+
const windowHeight = window.innerHeight
55+
// console.log(xPos)
56+
57+
const redXPos = Math.round((xPos / windowWidth) * 255);
58+
const greenXPos = Math.round((yPos / windowHeight) * 255);
59+
60+
document.body.style.backgroundColor = 'rgb('+ redXPos +','+ greenXPos +',0)'
61+
})

0 commit comments

Comments
 (0)