index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>FUN</title>
	<style>
		* {
			font-family: monospace, sans-serif,serif,cursive,arial;
		}
		body {
			background: black;
		}
		h1 {
			text-align: center;
			font-weight: bold;
		}
		div.container {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			width: 300px;
			height: 150px;
			padding: 10px;
			border: 5px white solid;
			display: grid;
			grid-template-rows: 1fr 1fr;
			justify-content: center;
			align-items: center;
			background: wheat;
		}
		div.btns-container {
			display: grid;
			grid-template-columns: 1fr 1fr;
			justify-content: space-between;
			height: 75px;
		}
		div.btns-container div {
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
		}
		div.btns-container div button {
			width: 50px;
			aspect-ratio: 9/7;
			font-weight: bold;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			background: lightgray;
		}

		@media only screen and (max-width: 400px) {
			div.container {
				width: 250px;
			}
		}
		@media only screen and (max-width: 322px) {
			div.container {
				width: 200px;
			}
			h1 {
				font-size: 1.5rem;
			}
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>Are You dump ?</h1>
		<div class="btns-container">
			<div>
				<button class="yes-btn">Yes</button>
			</div>
			<div>
				<button class="no-btn">No</button>
			</div>
		</div>
	</div>

	<script type="text/javascript">
		const body = document.querySelector('body');
		const container = document.querySelector('div.container');
		const btnsContainer = document.querySelector('div.btns-container');
		const yesbtn = document.querySelector('button.yes-btn');
		const nobtn = yes = document.querySelector('button.no-btn');
		const h1 = document.querySelector('h1');


		nobtn.addEventListener('click', event => {
			nobtn.style.top = `${Math.floor(Math.random()*100)}%`
			nobtn.style.left = `${Math.floor(Math.random()*100)}%`
		})
		yesbtn.addEventListener('click', event => {
			btnsContainer.remove();
			h1.innerHTML = 'I Knew ! <3';
			container.style.gridTemplateRows = '1fr';
		})
	</script>
</body>
</html>