Lnirmohi/animation_assignment.html

## animation_assignment.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation assignment</title>
</head>

<body>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 2rem;

            width: 100vw;
            height: 100vh;
        }

        .box-container {
            display: flex;
            width: 80%;
            height: 216px;
            background: black;
            border: 8px solid black;
        }

        .box {
            align-self: flex-end;
            flex-grow: 1;
            height: 200px;
            min-width: 50px;
        }

        #box-1 {
            background: yellowgreen;
        }

        #box-2 {
            background: green;
        }

        #box-3 {
            background: teal;
        }

        #box-4 {
            background: orange;
        }

        #box-5 {
            background: orangered;
        }

        .actions {
            display: flex;
            justify-content: space-around;

            width: 80%;
        }

        button {
            padding: 0.5rem 1rem;
            font-size: 1rem;

            letter-spacing: 1.5px;
        }

        .action-btn {
            color: white;
            border: none;
        }

        button:hover {
            cursor: pointer;
        }

        #start-btn {
            background: green;
        }

        #stop-btn {
            background: red;
        }
    </style>
    <div class="box-container">
        <div class="box" id="box-1"></div>
        <div class="box" id="box-2"></div>
        <div class="box" id="box-3"></div>
        <div class="box" id="box-4"></div>
        <div class="box" id="box-5"></div>
    </div>

    <div class="actions">
        <button class="action-btn" id="start-btn">Start</button>
        <button class="action-btn" id="stop-btn">Stop</button>
    </div>
    <script>
        window.addEventListener("load", () => {
            console.log("Loaded");

            const boxes = [...document.querySelectorAll(".box")];

            const startBtn = document.getElementById("start-btn");
            const stopBtn = document.getElementById("stop-btn");

            let animations = [];
            let stopAnimation = false;

            const handleStart = async () => {

                // clear animations
                animations = [];

                while (!stopAnimation) {

                    boxes.forEach(box => {
                        animations.push({
                            animate: addAnimationToElement(box)
                        });
                    });


                    for(let i = 0; i < animations.length; i++) {
                        const eachAnimation = animations[i];

                        const animationObj = await eachAnimation.animate.finished;

                        setElementHeightAfterAnimation(animationObj);
                    }
                }
            }

            startBtn.addEventListener("click", () => {

                stopAnimation = false;

                handleStart();

            });

            stopBtn.addEventListener("click", () => {

                stopAnimation = true;
            });
        });

        function addAnimationToElement(element) {

            // since the height of each box is 200px
            // dividing the offsetHeight by 2(200/2) to
            // convert the box's height to percentage
            const start = `${element.offsetHeight/2}%`;
            const end = `${Math.floor(Math.random() * 100) + 1}%`;

            return element.animate(
                [
                    {
                        height: start
                    },
                    {
                        height: end
                    }
                ], {
                    duration: 700,
                    easing: "ease-in"
                }
            );
        }

        function setElementHeightAfterAnimation(animation) {

            // get target element whose animation ended
            const srcElement = animation.effect.target;

            // get height at which the animation ended
            // keyframes returned contains the value at index 1 where
            // animation ended
            const newBoxHeight = animation.effect.getKeyframes()[1].height;

            // set the height of the element equal to newBoxHeight
            // so that the animation should start from new height
            srcElement.style.height = newBoxHeight;
        }
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Animation assignment</title>
	</head>

	<body>
	<style>
	* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	}

	body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 2rem;

	width: 100vw;
	height: 100vh;
	}

	.box-container {
	display: flex;
	width: 80%;
	height: 216px;
	background: black;
	border: 8px solid black;
	}

	.box {
	align-self: flex-end;
	flex-grow: 1;
	height: 200px;
	min-width: 50px;
	}

	#box-1 {
	background: yellowgreen;
	}

	#box-2 {
	background: green;
	}

	#box-3 {
	background: teal;
	}

	#box-4 {
	background: orange;
	}

	#box-5 {
	background: orangered;
	}

	.actions {
	display: flex;
	justify-content: space-around;

	width: 80%;
	}

	button {
	padding: 0.5rem 1rem;
	font-size: 1rem;

	letter-spacing: 1.5px;
	}

	.action-btn {
	color: white;
	border: none;
	}

	button:hover {
	cursor: pointer;
	}

	#start-btn {
	background: green;
	}

	#stop-btn {
	background: red;
	}
	</style>
	<div class="box-container">
	<div class="box" id="box-1"></div>
	<div class="box" id="box-2"></div>
	<div class="box" id="box-3"></div>
	<div class="box" id="box-4"></div>
	<div class="box" id="box-5"></div>
	</div>

	<div class="actions">
	<button class="action-btn" id="start-btn">Start</button>
	<button class="action-btn" id="stop-btn">Stop</button>
	</div>
	<script>
	window.addEventListener("load", () => {
	console.log("Loaded");

	const boxes = [...document.querySelectorAll(".box")];

	const startBtn = document.getElementById("start-btn");
	const stopBtn = document.getElementById("stop-btn");

	let animations = [];
	let stopAnimation = false;

	const handleStart = async () => {

	// clear animations
	animations = [];

	while (!stopAnimation) {

	boxes.forEach(box => {
	animations.push({
	animate: addAnimationToElement(box)
	});
	});


	for(let i = 0; i < animations.length; i++) {
	const eachAnimation = animations[i];

	const animationObj = await eachAnimation.animate.finished;

	setElementHeightAfterAnimation(animationObj);
	}
	}
	}

	startBtn.addEventListener("click", () => {

	stopAnimation = false;

	handleStart();

	});

	stopBtn.addEventListener("click", () => {

	stopAnimation = true;
	});
	});

	function addAnimationToElement(element) {

	// since the height of each box is 200px
	// dividing the offsetHeight by 2(200/2) to
	// convert the box's height to percentage
	const start = `${element.offsetHeight/2}%`;
	const end = `${Math.floor(Math.random() * 100) + 1}%`;

	return element.animate(
	[
	{
	height: start
	},
	{
	height: end
	}
	], {
	duration: 700,
	easing: "ease-in"
	}
	);
	}

	function setElementHeightAfterAnimation(animation) {

	// get target element whose animation ended
	const srcElement = animation.effect.target;

	// get height at which the animation ended
	// keyframes returned contains the value at index 1 where
	// animation ended
	const newBoxHeight = animation.effect.getKeyframes()[1].height;

	// set the height of the element equal to newBoxHeight
	// so that the animation should start from new height
	srcElement.style.height = newBoxHeight;
	}
	</script>
	</body>

	</html>