-
Notifications
You must be signed in to change notification settings - Fork 396
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5ad9bbf
commit 1756e8b
Showing
5 changed files
with
273 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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>) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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"; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters