Skip to content

Commit

Permalink
added wedding budget calculator
Browse files Browse the repository at this point in the history
  • Loading branch information
bharat-c27 committed Jul 31, 2024
1 parent 5ad9bbf commit 1756e8b
Show file tree
Hide file tree
Showing 5 changed files with 273 additions and 0 deletions.
15 changes: 15 additions & 0 deletions Calculators/Wedding-Budget-Calculator/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# <p align="center">Wedding Budget Calculator</p>

## Description :-

A simple web application to calculate the total budget of a wedding, including a breakdown of various costs like venue, catering, decor, photography, entertainment, attire, and other expenses.

## Tech Stacks :-

- HTML
- CSS
- JavaScript

## Screenshots :-

![Wedding Budget Calculator](<Screenshot 2024-07-31 160358.png>)
105 changes: 105 additions & 0 deletions Calculators/Wedding-Budget-Calculator/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wedding Budget Calculator</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1>Wedding Budget Calculator</h1>
<form id="budget-form">
<div class="form-group">
<label for="total-budget">Total Budget:</label>
<input
type="number"
min="0"
id="total-budget"
name="total-budget"
required
/>
</div>
<div class="form-group">
<label for="venue">Venue:</label>
<input
type="number"
id="venue"
name="venue"
min="0"
required
/>
</div>
<div class="form-group">
<label for="catering">Catering:</label>
<input
type="number"
min="0"
id="catering"
name="catering"
required
/>
</div>
<div class="form-group">
<label for="photography">Photography:</label>
<input
type="number"
min="0"
id="photography"
name="photography"
required
/>
</div>
<div class="form-group">
<label for="decor">Decor:</label>
<input
type="number"
id="decor"
name="decor"
min="0"
required
/>
</div>
<div class="form-group">
<label for="music">Music:</label>
<input
type="number"
id="music"
name="music"
min="0"
required
/>
</div>
<div class="form-group">
<label for="attire">Attire:</label>
<input
type="number"
id="attire"
name="attire"
min="0"
required
/>
</div>
<div class="form-group">
<label for="other">Other Expenses:</label>
<input
type="number"
id="other"
name="other"
min="0"
required
/>
</div>
<button type="button" onclick="calculateBudget()">
Calculate
</button>
</form>
<div id="result" class="result">
<h2>Result</h2>
<p>Total Expenses: <span id="total-expenses"></span></p>
<p>Remaining Budget: <span id="remaining-budget"></span></p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
56 changes: 56 additions & 0 deletions Calculators/Wedding-Budget-Calculator/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
function calculateBudget() {
const totalBudget =
parseFloat(document.getElementById("total-budget").value) || 0;
const venue = parseFloat(document.getElementById("venue").value) || 0;
const catering = parseFloat(document.getElementById("catering").value) || 0;
const photography =
parseFloat(document.getElementById("photography").value) || 0;
const decor = parseFloat(document.getElementById("decor").value) || 0;
const music = parseFloat(document.getElementById("music").value) || 0;
const attire = parseFloat(document.getElementById("attire").value) || 0;
const other = parseFloat(document.getElementById("other").value) || 0;

if (
totalBudget === 0 &&
venue === 0 &&
catering === 0 &&
photography === 0 &&
decor === 0 &&
music === 0 &&
attire === 0 &&
other === 0
) {
alert("Please input at least one field.");
return;
}

if (
totalBudget < 0 ||
venue < 0 ||
catering < 0 ||
photography < 0 ||
decor < 0 ||
music < 0 ||
attire < 0 ||
other < 0
) {
alert("The expense cannot be negative");
return;
}

const totalExpenses =
venue + catering + photography + decor + music + attire + other;
const remainingBudget = totalBudget - totalExpenses;

if (remainingBudget < 0) {
alert("Your expenses are greater than your Budget. Please update it");
return;
}

document.getElementById("total-expenses").textContent =
totalExpenses.toFixed(2);
document.getElementById("remaining-budget").textContent =
remainingBudget.toFixed(2);

document.getElementById("result").style.display = "block";
}
83 changes: 83 additions & 0 deletions Calculators/Wedding-Budget-Calculator/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&display=swap");

body {
font-family: Arial, sans-serif;
background: linear-gradient(to right, #74ebd5, #acb6e5);
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
/* overflow-y: auto; */
}

.container {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
margin: 20px 0;
}

h1 {
text-align: center;
margin-bottom: 20px;
color: #333;
}

.form-group {
margin-bottom: 15px;
}

.form-group label {
display: block;
margin-bottom: 5px;
color: #555;
}

.form-group input {
width: 95%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
height: 100%;
background-color: #f5f5f5;
}

button {
width: 100%;
padding: 10px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}

button:hover {
background-color: #218838;
}

.result {
margin-top: 20px;
text-align: center;
}

.result h2 {
margin-bottom: 10px;
color: #333;
}

.result p {
margin: 5px 0;
color: #555;
}

.result span {
font-weight: bold;
}
14 changes: 14 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4970,6 +4970,20 @@ <h3>Calculates the bandwidth of a website based on some factors.</h3>
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>Wedding Budget Calculator</h2>
<h3>Calculates the total budget of a wedding, including a breakdown of various expenses.</h3>
<div class="card-footer">
<a href="./Calculators/Wedding-Budget-Calculator/index.html" target="_blank">
<button>Try Now</button>
</a>
<a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Wedding-Budget-Calculator" title="Source Code" target="_blank">
<img src="./assets/images/github.png" alt="Source Code"></img>
</a>
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>Weight Calculator</h2>
Expand Down

0 comments on commit 1756e8b

Please sign in to comment.