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

Ajink Gupta is a software developer from Dombivli, Maharashtra, India. He has expertise in a variety of technologies including web development, mobile app development, and blockchain. He works with languages and frameworks like JavaScript, Python, Flutter, React, and Django.

Ajink Gupta is also active on several platforms where he shares his work and engages with the community. You can find his projects and contributions on GitHub and follow his tutorials and updates on his YouTube channel​ . He also has a personal website where he showcases his portfolio and ongoing projects at ajinkgupta.vercel.app

Articles: 54