Skip to content

Instantly share code, notes, and snippets.

@Elien7-pixel

Elien7-pixel/index.html

Created February 6, 2025 14:43
Show Gist options
  • Save Elien7-pixel/545b0afac4c4c64de7cefedfcd2adc1c to your computer and use it in GitHub Desktop.
Save Elien7-pixel/545b0afac4c4c64de7cefedfcd2adc1c to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Will You Be My Valentine?</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Will You Be My Valentine Precious?</h1>
<p>My heart belongs to you, Hold it soft and warm and never drop it</p>
<div class="buttons">
<button id="yesBtn">Yes</button>
<button id="noBtn">No</button>
</div>
<div id="roseDisplay"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
document.getElementById('yesBtn').addEventListener('click', function() {
alert("You've made me the happiest short person alive! ❤️");
document.getElementById('roseDisplay').innerHTML = "🌹🌹🌹 Roses for my Precious! 🌹🌹🌹";
sendNotification("She said YES!");
});
document.getElementById('noBtn').addEventListener('click', function() {
let confirmResponse = confirm("Wrong Answer 😭");
if (confirmResponse) {
alert("Try Again");
sendNotification("She said NO...");
}
});
function sendNotification(message) {
// Use a service like EmailJS or Twilio to send yourself a notification
console.log(message); // Replace this with actual notification code
}
Raw
style.css
body {
font-family: 'Arial', sans-serif;
background-color: #ffebee;
color: #c62828;
text-align: center;
padding: 50px;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 2.5em;
margin-bottom: 20px;
}
p {
font-size: 1.2em;
margin-bottom: 30px;
}
.buttons button {
padding: 10px 20px;
font-size: 1em;
margin: 0 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
#yesBtn {
background-color: #4caf50;
color: white;
}
#noBtn {
background-color: #f44336;
color: white;
}
#roseDisplay {
margin-top: 30px;
font-size: 2em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment