Akifcan · August 16, 2022 19:45
diff --git a/stacked-cards.js b/stacked-cards.js
 <!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>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: sans-serif;
        }

        body {
            display: grid;
            place-items: center;
            min-height: 100vh;
        }

        .card-wrapper {
            position: relative;
            width: 500px;
            height: 250px;
            outline: 1px solid red;
        }

        .card {
            transition: 500ms cubic-bezier(0.19, 1, 0.22, 1);
            position: absolute;
            left: calc(20px - (var(--queue) * 10px));
            right: calc(20px - (var(--queue) * 10px));
            bottom: 0;
            top: calc(40px - (var(--queue) * 10px));
        }

        .card.red {
            background-color: red;
        }

        .card.blue {
            background-color: blue;
        }

        .card.black {
            background-color: black;
        }

        .card.pink {
            background-color: pink;
        }

        .card.orange {
            background-color: orange;
        }
    </style>

 </head>

 <body>
    <div class="card-wrapper">
        <div class="card red"></div>
        <div class="card black"></div>
        <div class="card blue"></div>
        <div class="card orange"></div>
        <div class="card pink"></div>

    </div>

    <script>
        const wrapper = document.querySelector(".card-wrapper")
        const cards = document.querySelectorAll(".card")


        cards.forEach((element, index) => {
            element.addEventListener("click", () => listenClick(element))
        });

        sort()

        function listenClick(element) {
            const q = element.getAttribute("q")
            const copy = element.cloneNode()
            element.remove()
            wrapper.prepend(copy)
            copy.addEventListener("click", () => listenClick(copy))
            sort()
        }


        function sort() {
            const cards = document.querySelectorAll(".card")
            cards.forEach((element, index) => {
                element.setAttribute("data-queue", cards.length - index)
                element.style.zIndex = index
                const num = Number(element.dataset.queue)
                element.style.left = 20 - (num * 10) + "px"
                element.style.right = 20 - (num * 10) + "px"
                element.style.top = 40 - (num * 10) + "px"
            });
        }   
    </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>Document</title>

	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: sans-serif;
	}

	body {
	display: grid;
	place-items: center;
	min-height: 100vh;
	}

	.card-wrapper {
	position: relative;
	width: 500px;
	height: 250px;
	outline: 1px solid red;
	}

	.card {
	transition: 500ms cubic-bezier(0.19, 1, 0.22, 1);
	position: absolute;
	left: calc(20px - (var(--queue) * 10px));
	right: calc(20px - (var(--queue) * 10px));
	bottom: 0;
	top: calc(40px - (var(--queue) * 10px));
	}

	.card.red {
	background-color: red;
	}

	.card.blue {
	background-color: blue;
	}

	.card.black {
	background-color: black;
	}

	.card.pink {
	background-color: pink;
	}

	.card.orange {
	background-color: orange;
	}
	</style>

	</head>

	<body>
	<div class="card-wrapper">
	<div class="card red"></div>
	<div class="card black"></div>
	<div class="card blue"></div>
	<div class="card orange"></div>
	<div class="card pink"></div>

	</div>

	<script>
	const wrapper = document.querySelector(".card-wrapper")
	const cards = document.querySelectorAll(".card")


	cards.forEach((element, index) => {
	element.addEventListener("click", () => listenClick(element))
	});

	sort()

	function listenClick(element) {
	const q = element.getAttribute("q")
	const copy = element.cloneNode()
	element.remove()
	wrapper.prepend(copy)
	copy.addEventListener("click", () => listenClick(copy))
	sort()
	}


	function sort() {
	const cards = document.querySelectorAll(".card")
	cards.forEach((element, index) => {
	element.setAttribute("data-queue", cards.length - index)
	element.style.zIndex = index
	const num = Number(element.dataset.queue)
	element.style.left = 20 - (num * 10) + "px"
	element.style.right = 20 - (num * 10) + "px"
	element.style.top = 40 - (num * 10) + "px"
	});
	}
	</script>

	</body>

	</html>