Untitled

<html>

<head>

    <title>jQuery Module</title>
    <!-- <link rel="stylesheet" type="text/css" href="index.css"> -->
    <script type="text/javascript" src="jquery-3.3.1.js"></script>

    <style type="text/css">

    *{

        margin:0;
        padding:0;
        box-sizing: border-box;
        }

        #main-iframe{

        width: 600px;
        height: 600px;
        }


        .green-circle{

        margin: 40px;
        width: 150px;
        height: 150px;
        border: 2px solid black;
        border-radius: 50%;
        background-color: green;
        }


        .red-square{

        margin: 40px;
        width: 150px;
        height: 150px;
        border: 2px solid black;
        background-color: red;
        }

    </style>

</head>


<body>

    <div class="green-circle"></div>
    <p class="circle-colour"></p>
    <div class="green-circle"></div>
    <p class="circle-colour"></p>

    <script type="text/javascript">

    function randomColour(){

        var hexArray = '0123456789ABCDEF';
        var colour = '#';

        for (var i=0; i<6; i++){

            colour += hexArray[Math.floor((Math.random() * 16))];
        }

        return colour;
    }

    /* $("#fading-button").click(function(){

        if ($("#fading-text").css("display") == "none"){

            $("#fading-text").fadeIn(1200);
        }
        else{
            $("#fading-text").fadeOut(1200);
        }
    }) */

    $(".green-circle").click(function(){

        $(this).css("background-color", randomColour());

        $(this).animate({
            width:"400px",
            height:"400px",
            marginLeft: "600px",
            marginTop: "350px"
        }, 2000, function(){

            console.log("Callback function started.");

            $(this).animate({
                width:"150px",
                height:"150px",
                marginLeft: "40px",
                marginTop: "40px"
            }, 2000);

            console.log("Callback function ended.");
        });

        $(this).fadeOut(1200, function(){

            console.log("Fade out function started.");
            $(this).css("background-color", randomColour());
        });

        $(this).fadeIn(1200);
        console.log("Fade In function started.");

    })

    </script>

</body>

</html>