Love gif idea

index.html

<p id="q" class="question">Will you be my valentine, Devu ?</p>


<div class="button-container">
  <img id="panda" src="https://media.tenor.com/LxTbPto0fdoAAAAM/bubu-rose-bubu-sweet.gif"> 
<div class="button-container">
  <button id="yesButton" class="btn">Yes</button>
  <button id="noButton" class="btn btn-no">No</button>
</div>
</div>

love-gif-idea.markdown

Love gif idea

A Pen by Ashwin on CodePen.

License.

script.js

let scale = 1; // Initial scale for the "Yes" button

  document.getElementById('noButton').addEventListener('click', function() {
    scale += 0.1; // Increase scale by 10%
    document.getElementById('yesButton').style.transform = 'scale(' + scale + ')';
    
    console.log(scale)
    
    if (scale > 3) {
      document.getElementById('noButton').innerText = "seriously?"
    }
    
    if (scale > 5) {
      document.getElementById('noButton').innerText = "Click yes already please"
    }
    
    if (scale > 10) {
      document.getElementById('noButton').innerText = "No more games!"
    }
    
    
const sadTexts = [
    "Devu you forgot our walks by hauz khas?",
    "I wil not accept no for an answer.",
    "Aww... why not devu????",
    "Are you really really really sure?",
    "That hurts. but say, is that green button expanding?",
    "Yhi dosti, yhi pyaar?",
    "Ill complain to asha amma!",
    "Mein nhi khel rha",
    "chummade kallikaade",
    "Issok, I have enough chechi maar",
    "It too late for bakchodi now, you have no choice.",
    "Long distance valentine ban jao!",
    "Mukka marunga",
    "I still love you Devu",
    "Hai mera ek tarfa pyaar",
    "Bhagwaan thodi akal dede isse",
    "Pyaar kam h toh aise hi toh bologe"
  ];

  // Randomly select a sad text
  const randomIndex = Math.floor(Math.random() * sadTexts.length);
  const selectedText = sadTexts[randomIndex];

  // Display the selected sad text
  document.getElementById('q').innerText = selectedText;
    document.getElementById('panda').src="https://media.tenor.com/0Xr-5-SbieQAAAAi/bubududu-panda.gif"
  });



document.getElementById('yesButton').addEventListener('click', function() {
 
 document.getElementById('q').innerText = "Yay! I love you Devu!"; 
  document.getElementById('panda').src="https://media.tenor.com/tRF59TL7c28AAAAM/bear.gif"
  
document.getElementById('yesButton').remove()
document.getElementById('noButton').remove()
  

});

style.css

 body, html {
    height: 100%;
    margin: 0;
/*     display: flex; */
    justify-content: center;
/*     align-items: center; */
    background-color: #f0f0f0;
  }

@keyframes glowing {
  0% { color: #000; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff2d95, 0 0 30px #ff2d95, 0 0 40px #ff2d95, 0 0 55px #ff2d95, 0 0 75px #ff2d95; }
  50% { color: #ff2d95; text-shadow: 0 0 5px #fff, 0 0 10px #ff2d95, 0 0 20px #ff2d95, 0 0 30px #ff2d95, 0 0 40px #ff2d95, 0 0 55px #ff2d95, 0 0 75px #ff2d95; }
  100% { color: #000; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff2d95, 0 0 30px #ff2d95, 0 0 40px #ff2d95, 0 0 55px #ff2d95, 0 0 75px #ff2d95; }
}

.question {
  animation: glowing 1500ms infinite alternate;
  font-size: 24px;
  color: #ff2d95;
}

.question{
  margin: auto;
  width: 50%;
  padding: 10px;
  text-align:center;
}

 .button-container {
    text-align: center;
  }

.btn {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 20px 40px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 30px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 12px;
  transition: all 0.2s ease-in-out; /* Updated to apply to all changes */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* Initial shadow for depth */
}

.btn:hover, .btn:focus {
/*   background-color: yellow; Slightly lighter green for contrast */
  color: #fff; /* Keeping white color for simplicity, but you can change it */
  transform: scale(1.05); /* Slightly increase the size */
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); /* Larger shadow for hover effect */
}
.btn-no {
    background-color: #f44336; /* Red */