<header>
	Pizza App!
	<button class="cartButton">🛒 Cart</button>
</header>
<main>
	<h1>Your Delicious Order:</h1>
	<div class="pizza">
		<span class="slice">🍕</span>
	</div>
	<form class="options">
		<span>Add your Extras</span>
		<label>
			<input type="checkbox" />
			🌶️ Peppers
		</label>
		
		<label>
			<input type="checkbox" />
			🍅 Tomatoes
		</label>
		
		<label>
			<input type="checkbox"/>
			🧀 Extra Cheese
		</label>
		
		<label>
			<input type="checkbox"/>
			🥓 Bacon
		</label>
		
		<label>
			<input type="checkbox" />
			🍍 Pineapple
		</label>
		
		<button type="submit" class="buybutton">🛒 Add to Cart</button>
	</form>
</main>

* {
	font-family: sans-serif;
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	background-color: #eee;
}

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 3em;
	background: #cc3300;
	color: #eee;
	font-size: 1.5em;
	padding: 0 1em;
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
}

button {
		font-size: 1em;
		background: rgba(255,255,255,0.8);
		border: none;
		border-radius: 5px;
		padding: 0.2em 0.5em ;
	}

main {
	  display: grid;
  	grid-template-areas: 
			'headline headline'
			'pizza options'
			'pizza options';
		grid-gap: 10px;
	color: #333;
	
	h1 {
		grid-area: headline;
		text-align: center;
	}
	
	.pizza {
		grid-area: pizza;
		font-size: 20vw;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.slice {
			--transform-x: 0;
			--transform-y: 0;
			text-shadow: rgba(0,0,0,0.4) 5px 10px 10px;
			opacity: 1;
			transition: opacity 0.2s ease-out;
			transition-delay: .4s;
			
			&.animate {
				transform:  translate(var(--transform-x), var(--transform-y)) scale(0.15) rotate(-250deg);
				opacity: 0;
				transition: transform 0.4s ease-in-out,
										opacity 0.4s cubic-bezier(0.755, 0.050, 0.855, 0.060);
			}
		}
	}
	
	.options {
		grid-area: options;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		
		label, span {
			display: block;
			margin-bottom: 1em;
		}
	}
	
	.buybutton {
		grid-area: button;
		margin-top: 1em;
		font-size: 1.5em;
		border: 3px solid currentColor;
	}
}

const slice = document.querySelector('.slice');
const cartBtn = document.querySelector('.cartButton');
const form = document.querySelector('.options')

function getPosition(element) {
    var xPosition = 0;
    var yPosition = 0;

    while(element) {
        xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
        yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
        element = element.offsetParent;
    }

    return { x: xPosition, y: yPosition };
}

const placeOrder = (event) => {
	event.preventDefault();
	
	form.reset();
	
	let deltaX = (getPosition(cartBtn).x - getPosition(slice).x - slice.offsetWidth / 2 + cartBtn.offsetWidth / 2) + 'px';
	let deltaY = (getPosition(cartBtn).y - getPosition(slice).y - slice.offsetHeight / 2 + cartBtn.offsetHeight / 2) + 'px';
	
	slice.style.setProperty('--transform-x', deltaX);
	slice.style.setProperty('--transform-y', deltaY);
	
	slice.classList.add('animate');
	slice.addEventListener('transitionend', () => {
		slice.classList.remove('animate');
	})
}

form.addEventListener('submit', placeOrder);