From c00c0c338fb5f4ccbb684fae6fa2de4830596737 Mon Sep 17 00:00:00 2001 From: Bharat Choudhary <125469847+bharat-c27@users.noreply.github.com> Date: Sat, 3 Aug 2024 18:21:43 +0530 Subject: [PATCH] Added Wedding Budget Calculator (#1737) --- .../Wedding-Budget-Calculator/README.md | 15 ++++ .../Wedding-Budget-Calculator/index.html | 57 +++++++++++++ .../Wedding-Budget-Calculator/script.js | 56 +++++++++++++ .../Wedding-Budget-Calculator/style.css | 83 +++++++++++++++++++ index.html | 14 ++++ 5 files changed, 225 insertions(+) create mode 100644 Calculators/Wedding-Budget-Calculator/README.md create mode 100644 Calculators/Wedding-Budget-Calculator/index.html create mode 100644 Calculators/Wedding-Budget-Calculator/script.js create mode 100644 Calculators/Wedding-Budget-Calculator/style.css diff --git a/Calculators/Wedding-Budget-Calculator/README.md b/Calculators/Wedding-Budget-Calculator/README.md new file mode 100644 index 000000000..bbbc2a381 --- /dev/null +++ b/Calculators/Wedding-Budget-Calculator/README.md @@ -0,0 +1,15 @@ +#

Wedding Budget Calculator

+ +## 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 new file mode 100644 index 000000000..1a65817b7 --- /dev/null +++ b/Calculators/Wedding-Budget-Calculator/index.html @@ -0,0 +1,57 @@ + + + + + + + Wedding Budget Calculator + + +
+

Wedding Budget Calculator

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+

Result

+

Total Expenses:

+

Remaining Budget:

+
+
+ + + diff --git a/Calculators/Wedding-Budget-Calculator/script.js b/Calculators/Wedding-Budget-Calculator/script.js new file mode 100644 index 000000000..ac821fd32 --- /dev/null +++ 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 new file mode 100644 index 000000000..a4a2acc70 --- /dev/null +++ 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 index 3f1c1ab0c..8cfae36c0 100644 --- a/index.html +++ b/index.html @@ -5054,6 +5054,20 @@

Calculates the bandwidth of a website based on some factors.

+
+
+

Wedding Budget Calculator

+

Calculates the total budget of a wedding, including a breakdown of various expenses.

+
+ + + + + Source Code + +
+
+

Weight Calculator