Added Wedding Budget Calculator (#1737)

Rakesh9100 · Aug 3, 2024 · c00c0c3 · c00c0c3
1 parent d0d7e18
commit c00c0c3
Show file tree

Hide file tree

Showing 5 changed files with 225 additions and 0 deletions.
diff --git a/Calculators/Wedding-Budget-Calculator/README.md b/Calculators/Wedding-Budget-Calculator/README.md
@@ -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 :-
+
+![image](https://github.com/user-attachments/assets/a57d16c8-fc73-4791-bf3c-9c8252483f5b)
diff --git a/Calculators/Wedding-Budget-Calculator/index.html b/Calculators/Wedding-Budget-Calculator/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Wedding Budget Calculator</title>
+</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>
diff --git a/Calculators/Wedding-Budget-Calculator/script.js b/Calculators/Wedding-Budget-Calculator/script.js
@@ -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";
+}
diff --git a/Calculators/Wedding-Budget-Calculator/style.css b/Calculators/Wedding-Budget-Calculator/style.css
@@ -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;
+}
diff --git a/index.html b/index.html
@@ -5054,6 +5054,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>