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
