How to Create an Valentine’s Day Website?

How to Create an Valentine’s Day Website , lets get started

Demo :

Here is Complete SourceCode :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
  <style>
   body {
      background-color: #fde8e8;
      font-family: 'Arial', sans-serif;
    }
    
    img {
      max-width: 200px;
      background-color: #fff;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      border:1px solid blue;
    }

    #app {
      background-color: #fff;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
    }

    .text-4xl {
      font-size: 2rem;
      color: #ff5a5a;
    }

    .my-4 {
      margin-top: 1rem;
      margin-bottom: 1rem;
    }

    .h-[200px] {
      height: 200px;
    }

    .bg-green-500 {
      background-color: #4caf50;
    }

    .hover\:bg-green-700:hover {
      background-color: #45a049;
    }

    .bg-red-500 {
      background-color: #f44336;
    }

    .hover\:bg-red-700:hover {
      background-color: #d32f2f;
    }

    .text-white {
      color: #FFFFFF;
    }

    .font-bold {
      font-weight: bold;
    }

    .py-2 {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }

    .px-4 {
      padding-left: 1rem;
      padding-right: 1rem;
    }

    .rounded {
      border-radius: 0.375rem;
    }

    .flex {
      display: flex;
    }

    .flex-col {
      flex-direction: column;
    }

    .items-center {
      align-items: center;
    }

    .justify-center {
      justify-content: center;
    }

    .h-screen {
      height: 90vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    button {
    cursor: pointer;
    font-weight: bold;
    border: 2px solid black ;
    padding: 10px 20px;
     margin:10px;
    transition: background-color 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
  }

  
  </style>
  <title>Valentine's Page</title>
</head>
<body>
  <div id="app" class="flex flex-col items-center justify-center h-screen -mt-16"></div>
  
   <!-- Add Ad Space -->
   
  <script>
  document.addEventListener("DOMContentLoaded", function () {
      const app = document.getElementById("app");

      // Get the name from the URL parameter
      const urlParams = new URLSearchParams(window.location.search);
      const Name = urlParams.get('y') || "Name"; // Use 'Name' if the parameter is not provided

      let noCount = 0;
      let yesPressed = false;

      function handleNoClick() {
        noCount++;
        render();
      }

      function getNoButtonText() {
        const phrases = [
          "No",
          "Are you sure?",
          "Really sure?",
          "Think again!",
          "Last chance!",
          "Surely not?",
          "You might regret this!",
          "Give it another thought!",
          "Are you absolutely certain?",
          "This could be a mistake!",
          "Have a heart!",
          "Don't be so cold!",
          "Change of heart?",
          "Wouldn't you reconsider?",
          "Is that your final answer?",
          "You're breaking my heart ;(",
        ];

        return phrases[Math.min(noCount, phrases.length - 1)];
      }

      function render() {
        const yesButtonSize = noCount * 20 + 16;
        app.innerHTML = "";

        if (yesPressed) {
          const img = document.createElement("img");
          img.src = "https://media.tenor.com/gUiu1zyxfzYAAAAi/bear-kiss-bear-kisses.gif";
          app.appendChild(img);

          const div = document.createElement("div");
          div.className = "text-4xl font-bold my-4";
          div.textContent = `Ok yay!!`;
          app.appendChild(div);
        } else {
          const img = document.createElement("img");
          img.className = "h-[200px]";
          img.src = "https://media.tenor.com/2csFlkJ3TyAAAAAi/tkthao219-bubududu.gif";
          app.appendChild(img);

          const h1 = document.createElement("h1");
          h1.className = "text-4xl my-4";
          h1.textContent = `Will you be my Valentine, ${Name}?`;
          app.appendChild(h1);

          const buttonYes = document.createElement("button");
          buttonYes.className = `bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mr-4`;
          buttonYes.style.fontSize = `${yesButtonSize}px`;
          buttonYes.textContent = "Yes";
          buttonYes.addEventListener("click", function () {
            yesPressed = true;
            render();
          });
          app.appendChild(buttonYes);

          const buttonNo = document.createElement("button");
          buttonNo.className = "bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded";
          buttonNo.addEventListener("click", handleNoClick);
          buttonNo.textContent = noCount === 0 ? "No" : getNoButtonText();
          app.appendChild(buttonNo);
        }
      }

      render();
    });
  </script>
</body>
</html>

How to run , you can host in on Github Pages ,vercel , netlify etc any other free hosting providers its completly one html file you can make it index.html , do share your link in comment box !

You can also visit the hosted page at: https://wish.doubtly.in/v.html?y=Name, and make sure to replace ‘Name’ in the URL with the name of the person you want to share it with , or you can use below input box

References : https://gist.github.com/tnarla/0c09a11fea366145ba684fe6ebf578c5

Ajink Gupta
Ajink Gupta
Articles: 38