Skip to content

Instantly share code, notes, and snippets.

@adimuhamad

adimuhamad/button-goes-bigger.markdown

Created February 5, 2024 07:33
Show Gist options
  • Save adimuhamad/c9450376e9c4c67cf6312f7c3ea8c47d to your computer and use it in GitHub Desktop.
Save adimuhamad/c9450376e9c4c67cf6312f7c3ea8c47d to your computer and use it in GitHub Desktop.
Download ZIP
Button Goes Bigger
Raw
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" onclick="responTombolTidak();">NGGA LAH!</button>
</div>
</body>
Raw
script.typescript
function responTombolTidak() {
var tombolIya = document.getElementById('iya');
var fontSize = window.getComputedStyle(tombolIya, null).getPropertyValue('font-size');
var currentSize = parseFloat(fontSize);
var gambar = document.getElementById('gambar-gif');
tombolIya.style.fontSize = (currentSize + 20) + 'px';
gambar.src = 'https://media.tenor.com/QOzMqPvW8PUAAAAj/love-you.gif';
}
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';
}
Raw
style.scss
.container-fluid {
display: flex;
flex-direction: column;
align-items: center;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment