Wedding Budget Calculator
About this app
A budget calculator app for engaged couples to help them plan their wedding expenses efficiently.
Wedding Budget Calculator
Related apps
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Wedding Budget Calculator</title>
<meta name="description" content="A budget calculator app for engaged couples to help them plan their wedding expenses efficiently.">
<meta name="keywords" content="Budget, Calculator, Wedding, Expenses, Planner">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Quicksand', sans-serif;
background: linear-gradient(to right, #ff9966, #ff5e62);
color: #ffffff;
}
.container {
margin-top: 50px;
}
.total {
font-size: 2em;
margin-top: 20px;
}
.category {
margin-bottom: 15px;
}
.category label {
font-weight: 500;
}
.category input {
width: 100%;
}
</style>
<script type="text/javascript">
try {
let total = 0;
const categories = ["Venue", "Photographers", "Videographers", "Ring", "Wedding Dress", "Wedding Cars", "Wedding DJ"];
document.addEventListener("DOMContentLoaded", function() {
const container = document.getElementById('main-container');
categories.forEach(category => {
const categoryDiv = document.createElement('div');
categoryDiv.className = 'category';
const categoryLabel = document.createElement('label');
categoryLabel.innerHTML = category;
const categoryInput = document.createElement('input');
categoryInput.type = 'number';
categoryInput.min = 0;
categoryInput.onchange = function() {
total += Number(this.value);
document.getElementById('total').innerHTML = 'Total: $' + total;
}
categoryDiv.appendChild(categoryLabel);
categoryDiv.appendChild(categoryInput);
container.appendChild(categoryDiv);
});
const totalDiv = document.createElement('div');
totalDiv.className = 'total';
totalDiv.id = 'total';
totalDiv.innerHTML = 'Total: $' + total;
container.appendChild(totalDiv);
});
} catch (error) {
throw error;
}
</script>
</head>
<body>
<div id="main-container" class="container">
<!-- Categories are generated dynamically -->
</div>
</body>
</html>
NEW APPS
These are apps made by the community!