<html>
<head>
<title>JQuery</title>
<style>
#kotak{
width:50px;
height:50px;
border: 1px solid black;
margin:10px;
}
.groupKotak{
width:50px;
height:50px;
border: 1px solid black;
margin:10px;
display:inline-block;
}
.warna{
background-color:red;
}
.warnahijau{
background-color: green;
}
</style>
</head>
<body>
<h1 id="judul"></h1>
<div id="kotak"></div>
<input type="button" value="fade out" id ="buttonFadeOut">
<input type="button" value="fade in" id ="buttonFadeIn">
<input type="button" value="Fade Toggle" id="buttonFadeToggle">
<input type="button" value="Reset Color" id="buttonReset">
<br>
<div class="groupKotak ">1</div>
<div class="groupKotak">2</div>
<div class="groupKotak">3</div>
<div class="groupKotak">4</div>
<div class="groupKotak">5</div>
<script src="10680_library JQuery - jQuery v3.6.1.js"></script>
<script>
$(document).ready(function(){
//variable
let h1Judul = $("#judul");
let divKotak = $("#kotak");
let buttonFadeOut = $("#buttonFadeOut");
let buttonFadeIn = $("#buttonFadeIn");
let buttonFadeToggle = $("#buttonFadeToggle");
let groupKotak = $(".groupKotak");
$(".groupKotak:eq(1)").addClass("warnahijau");
$(".groupKotak:eq(3)").addClass("warnahijau");
//function
function changeBox(){
h1Judul.text(h1Judul.text()+"a");
}
function changeColor(){
}
//event listener
divKotak.click(function(){
changeBox();
if(divKotak.hasClass("warna")){
divKotak.removeClass("warna");
}
else{
divKotak.addClass("warna")
}
// if(divKotak.css("background-color") == "red"){
// divKotak.css("background-color","");
// }
// else{
// divKotak.css("background-color","red");
// }
});
buttonFadeOut.click(function(){
divKotak.fadeOut();
})
buttonFadeIn.click(function(){
divKotak.fadeIn();
})
buttonFadeToggle.click(function(){
divKotak.fadeToggle();
})
groupKotak.click(function(){
if($(this).hasClass("warna")){
$(this).removeClass("warna");
var currentIndex = $(groupKotak).index(this);
if(currentIndex == 1 || currentIndex == 3 ){
$(this).addClass("warnahijau");
}
}
else{
$(this).removeClass("warnahijau").addClass("warna");
}
})
$("#buttonReset").click(function(){
groupKotak.removeClass("warna");
})
});
</script>
</body>
</html>