Hello code lovers! 💖
Want to add a little romance to your website? Or maybe you just want to learn how to work with dates in JavaScript? Building an Anniversary Calculator is the perfect weekend project.
By the end of this guide, you’ll have a cute, functional tool where users can pick a date and see exactly how long they’ve been together.
Let's get started!
- ✓Master JavaScript Date objects
- ✓Calculate time differences in years, months, and days
- ✓Create a responsive, heart-themed UI
- ✓Handle future dates correctly
- ✓Get the full copy-paste widget code
Step 1: The Love Box (HTML Container) 💌
First, we need a container for our tool. We'll make a card that holds the input field and the calculate button.
<div id="love-card">
<h2>❤️ Love Calculator</h2>
<!-- Input fields go here -->
</div>
Step 2: The Date Picker 📅
We need a way for users to pick their special day. HTML has a built-in <input type="date"> that pops up a calendar on phones and computers.
<label>When did it start?</label>
<input type="date" id="start-date">
Step 3: The "Calculate" Button 💘
A button to trigger the calculation logic.
<button onclick="calculateLove()">How long has it been?</button>
Step 4: The Result Display 🎁
We need a hidden box to show the answer, like "5 Years, 2 Months!".
<div id="result-box">
<p>You have been together for:</p>
<h3 id="answer-text">0 Days</h3>
</div>
Step 5: The JavaScript Setup 🧠
Now for the logic. We need a function that grabs the date from our input.
<script>
function calculateLove() {
// 1. Get the date string (e.g., "2023-12-25")
var input = document.getElementById('start-date').value;
// Safety check
if(!input) {
alert("Please pick a date first!");
return;
}
}
</script>
Step 6: Using 'Date' Objects 🕰️
Computers store dates as milliseconds (thousandths of a second) since 1970. To do math, we must convert our human date into this computer format using new Date().
// ... inside the function
var startDate = new Date(input);
var today = new Date();
// Check if future date
if(startDate > today) {
alert("That date is in the future! Are you a time traveler?");
return;
}
Step 7: The Math (Difference in Time) ➗
We subtract the Start Time from Today's Time. This gives us the difference in milliseconds. Then we convert "Total Milliseconds" into "Total Days".
// Difference in milliseconds
var diffTime = today - startDate;
// Convert to days: (1000ms * 60s * 60m * 24h)
var diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
Step 8: Years, Months, Days Breakdown 📆
Saying "500 days" is boring. We want "1 Year, 4 Months, 15 Days".
This requires some remainder math (%).
Note: For a simple beginner tutorial, we will use a rough approximation (365 days/year, 30 days/month). Pro tools use more complex calendar libraries, but this is perfect for learning.
var years = Math.floor(diffDays / 365);
var remainingDays = diffDays % 365;
var months = Math.floor(remainingDays / 30);
var days = remainingDays % 30;
var finalString = years + " Years, " + months + " Months, " + days + " Days";
document.getElementById('answer-text').innerText = finalString;
Step 9: Making it Beautiful (CSS) 🎨
A love calculator shouldn't look boring! Let's add some pinks, reds, and soft shadows.
<style>
#love-card {
background: linear-gradient(to bottom right, #fff0f3, #fff);
border: 2px solid #ffadd2;
padding: 30px;
border-radius: 20px;
text-align: center;
font-family: 'Comic Sans MS', sans-serif; /* Playful font */
box-shadow: 0 10px 20px rgba(255, 107, 107, 0.2);
}
button {
background: #ff4757;
color: white;
border: none;
padding: 12px 25px;
border-radius: 50px;
cursor: pointer;
font-size: 16px;
margin-top: 20px;
transition: 0.3s;
}
button:hover { background: #ff6b81; transform: scale(1.05); }
#result-box {
margin-top: 20px;
padding: 15px;
background: rgba(255, 255, 255, 0.8);
border-radius: 10px;
color: #ff4757;
}
</style>
Step 10: The Full Code (Copy & Paste) 🚀
Here is the robust, ready-to-use widget code.
<!DOCTYPE html>
<html>
<head>
<title>Love Calculator</title>
<style>
body { background: #ffe4e6; display: flex; justify-content: center; height: 100vh; align-items: center; margin: 0; font-family: 'Segoe UI', system-ui, sans-serif; }
.love-widget {
background: white;
padding: 2.5rem;
border-radius: 1.5rem;
box-shadow: 0 20px 25px -5px rgba(225, 29, 72, 0.15);
width: 350px;
text-align: center;
border: 4px solid #fff1f2;
}
h2 { color: #e11d48; margin-top: 0; font-size: 1.8rem; }
input[type="date"] {
width: 100%;
padding: 1rem;
border: 2px solid #fda4af;
border-radius: 0.75rem;
font-size: 1.1rem;
margin: 1rem 0;
box-sizing: border-box;
color: #881337;
outline: none;
}
input:focus { border-color: #e11d48; box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.2); }
button {
background: #e11d48;
color: white;
width: 100%;
padding: 1rem;
border: none;
border-radius: 3rem;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
transition: 0.2s;
}
button:hover { background: #be123c; transform: translateY(-2px); }
.result {
margin-top: 1.5rem;
opacity: 0; /* Hidden by default */
transition: 0.5s;
}
.days-big {
font-size: 2.5rem;
font-weight: 900;
background: -webkit-linear-gradient(45deg, #e11d48, #db2777);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: block;
}
.detail-text { color: #9f1239; font-size: 0.9rem; margin-top: 0.5rem; }
</style>
</head>
<body>
<div class="love-widget">
<h2>💖 Together For...</h2>
<p style="color: #881337; margin-bottom: 5px;">When did your story start?</p>
<input type="date" id="dateInput">
<button onclick="calculate()">Count the Days</button>
<div class="result" id="resultArea">
<span class="days-big" id="daysCount">0 Days</span>
<div class="detail-text" id="detailText"></div>
</div>
</div>
<script>
function calculate() {
let input = document.getElementById('dateInput').value;
if(!input) return alert("Please pick a date! 💕");
let start = new Date(input);
let now = new Date();
if(start > now) return alert("That's in the future! 🔮");
// Math
let diff = now - start;
let totalDays = Math.floor(diff / (1000 * 60 * 60 * 24));
// Years/Months/Days logic
let years = Math.floor(totalDays / 365);
let remain = totalDays % 365;
let months = Math.floor(remain / 30);
let days = remain % 30;
// Update DOM
document.getElementById('daysCount').innerText = totalDays.toLocaleString() + " Days";
document.getElementById('detailText').innerText =
`(${years} Years, ${months} Months, ${days} Days)`;
// Show result
document.getElementById('resultArea').style.opacity = "1";
}
</script>
</body>
</html>
Conclusion
Love is in the air! (and in the code).
You now have a delightful widget that engages users emotionally. It's simple code but has a big impact.
Use Our Advanced Anniversary Calculator »