aa

mail@pastecode.io avatar
unknown
html
2 years ago
3.9 kB
3
Indexable
<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>