adimuhamad/index.html

## index.html
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Do you love me?</title>
</head>
<body class="mt-3">
  <div class="container-fluid">
    <img id="gambar-gif" src="https://i.pinimg.com/originals/75/9d/52/759d52d9562a4ccdfd45d2319a285284.gif" alt="Gambar GIF" style="width: 150px; height: auto;">
    <h2 id="question-text">Kamu sayang sama aku ga?</h2>
    <button type="button" class="btn btn-success mb-2" id="iya" onclick="responTombolIya();">SAYANG DONG!</button>
    <button type="button" class="btn btn-danger" id="tidak" onmouseover="pindahTempat();">NGGA LAH!</button>
  </div>
</body>

## script.babel
function pindahTempat() {
  var buttonTidak = document.getElementById('tidak');
  var maxWidth = window.innerWidth - buttonTidak.clientWidth;
  var maxHeight = window.innerHeight - buttonTidak.clientHeight;

  var newX = Math.random() * maxWidth;
  var newY = Math.random() * maxHeight;

  buttonTidak.style.position = 'absolute';
  buttonTidak.style.left = newX + 'px';
  buttonTidak.style.top = newY + 'px';
}

function responTombolIya() {
  var gambar = document.getElementById('gambar-gif');
  var elemenTeks = document.getElementById('question-text');
  var elemenTombolIya = document.getElementById('iya');
  var elemenTombolTidak = document.getElementById('tidak');

  gambar.src = 'https://media.tenor.com/gUiu1zyxfzYAAAAj/bear-kiss-bear-kisses.gif';
  elemenTeks.innerText = "Yeayyy... I Love You!";
  elemenTombolIya.style.display = 'none';
  elemenTombolTidak.style.display = 'none';
}

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

## style.scss
.container-fluid {
  display: flex;
  flex-direction: column;
  align-items: center;
}

## styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />

## wnmyrbe.markdown

      
    Raw
  

              wnmyrbe.markdown
            
          
    WNmyrBe

A Pen by Mochamad Adi MR on CodePen.
License.
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Do you love me?</title>
	</head>
	<body class="mt-3">
	<div class="container-fluid">
	<img id="gambar-gif" src="https://i.pinimg.com/originals/75/9d/52/759d52d9562a4ccdfd45d2319a285284.gif" alt="Gambar GIF" style="width: 150px; height: auto;">
	<h2 id="question-text">Kamu sayang sama aku ga?</h2>
	<button type="button" class="btn btn-success mb-2" id="iya" onclick="responTombolIya();">SAYANG DONG!</button>
	<button type="button" class="btn btn-danger" id="tidak" onmouseover="pindahTempat();">NGGA LAH!</button>
	</div>
	</body>
	function pindahTempat() {
	var buttonTidak = document.getElementById('tidak');
	var maxWidth = window.innerWidth - buttonTidak.clientWidth;
	var maxHeight = window.innerHeight - buttonTidak.clientHeight;

	var newX = Math.random() * maxWidth;
	var newY = Math.random() * maxHeight;

	buttonTidak.style.position = 'absolute';
	buttonTidak.style.left = newX + 'px';
	buttonTidak.style.top = newY + 'px';
	}

	function responTombolIya() {
	var gambar = document.getElementById('gambar-gif');
	var elemenTeks = document.getElementById('question-text');
	var elemenTombolIya = document.getElementById('iya');
	var elemenTombolTidak = document.getElementById('tidak');

	gambar.src = 'https://media.tenor.com/gUiu1zyxfzYAAAAj/bear-kiss-bear-kisses.gif';
	elemenTeks.innerText = "Yeayyy... I Love You!";
	elemenTombolIya.style.display = 'none';
	elemenTombolTidak.style.display = 'none';
	}
	.container-fluid {
	display: flex;
	flex-direction: column;
	align-items: center;
	}