Merge pull request #1958 from Antiquely3059/master

Added Travel Budget Calculator
Sulagna-Dutta-Roy · Jun 27, 2024 · e8282da · e8282da
2 parents 143fe5a + 802372e
commit e8282da
Show file tree

Hide file tree

Showing 4 changed files with 197 additions and 0 deletions.
diff --git a/Travel Budget Calculator/manifest.json b/Travel Budget Calculator/manifest.json
@@ -0,0 +1,11 @@
+{
+    "manifest_version": 3,
+    "name": "Travel Budget Calculator",
+    "version": "1.0",
+    "description": "Estimate the total cost of your trip, including flights, accommodation, food, and activities.",
+    "action": {
+      "default_popup": "popup.html"
+    },
+    "permissions": []
+  }
+
diff --git a/Travel Budget Calculator/popup.css b/Travel Budget Calculator/popup.css
@@ -0,0 +1,115 @@
+@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');
+
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inconsolata', monospace;
+    justify-content: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    background: linear-gradient(to right bottom, #ff7e7e, #ff6060, #ff3b3b, #ff1414, #ff0000);
+    height: 600px;
+    width: 400px;
+    margin: 0;
+    padding: 10px;
+}
+
+h1 {
+    color: #fff;
+    font-family: 'Alfa Slab One', cursive;
+    font-weight: 100;
+    margin-bottom: 20px;
+    font-size: 24px;
+}
+
+.card {
+    background: rgba(255, 69, 58, 0.1);
+    backdrop-filter: blur(10px);
+    border-radius: 15px;
+    padding: 20px;
+    text-align: center;
+    width: 100%;
+    margin-bottom: 20px;
+}
+
+.input {
+    margin-bottom: 10px;
+    text-align: left;
+}
+
+.input label {
+    display: block;
+    margin-bottom: 5px;
+    color: #fff;
+}
+
+.input input {
+    width: calc(100% - 16px);
+    padding: 8px;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+}
+
+button {
+    align-items: center;
+    appearance: none;
+    background-image: radial-gradient(100% 100% at 100% 0, #ff7e7e 0, #ff0000 100%);
+    border: 0;
+    border-radius: 6px;
+    box-shadow: rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, rgba(58, 65, 111, .5) 0 -3px 0 inset;
+    box-sizing: border-box;
+    color: #fff;
+    cursor: pointer;
+    display: inline-flex;
+    font-family: "JetBrains Mono", monospace;
+    height: 40px;
+    justify-content: center;
+    line-height: 1;
+    list-style: none;
+    overflow: hidden;
+    padding-left: 16px;
+    padding-right: 16px;
+    position: relative;
+    text-align: left;
+    text-decoration: none;
+    transition: box-shadow .15s, transform .15s;
+    user-select: none;
+    white-space: nowrap;
+    will-change: box-shadow, transform;
+    font-size: 18px;
+    margin: 5px;
+}
+
+button:hover {
+    box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #a50b0b 0 -3px 0 inset;
+    transform: translateY(-2px);
+}
+
+button:active {
+    box-shadow: #ff7e7e 0 3px 7px inset;
+    transform: translateY(2px);
+}
+
+.result {
+    margin-top: 10px;
+}
+
+.result label {
+    display: block;
+    margin-bottom: 5px;
+    color: #fff;
+}
+
+.result input {
+    width: calc(100% - 16px);
+    padding: 8px;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+    background-color: #f9f9f9;
+}
diff --git a/Travel Budget Calculator/popup.html b/Travel Budget Calculator/popup.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Travel Budget Calculator</title>
+    <link rel="stylesheet" href="popup.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Travel Budget Calculator</h1>
+        <div class="card">
+            <div class="input">
+                <label for="flights">Flights Cost:</label>
+                <input type="number" id="flights" placeholder="Enter cost of flights">
+            </div>
+            <div class="input">
+                <label for="accommodation">Accommodation Cost (per night):</label>
+                <input type="number" id="accommodation" placeholder="Enter cost per night">
+            </div>
+            <div class="input">
+                <label for="nights">Number of Nights:</label>
+                <input type="number" id="nights" placeholder="Enter number of nights">
+            </div>
+            <div class="input">
+                <label for="food">Daily Food Cost:</label>
+                <input type="number" id="food" placeholder="Enter daily food cost">
+            </div>
+            <div class="input">
+                <label for="days">Number of Days:</label>
+                <input type="number" id="days" placeholder="Enter number of days">
+            </div>
+            <div class="input">
+                <label for="activities">Activities Cost:</label>
+                <input type="number" id="activities" placeholder="Enter cost of activities">
+            </div>
+            <button id="calculate">Calculate</button>
+            <button id="reset">Reset</button>
+            <div class="result">
+                <label for="result">Estimated Total Cost:</label>
+                <input type="text" id="result" readonly>
+            </div>
+        </div>
+    </div>
+    <script src="popup.js"></script>
+</body>
+</html>
diff --git a/Travel Budget Calculator/popup.js b/Travel Budget Calculator/popup.js
@@ -0,0 +1,24 @@
+document.getElementById('calculate').addEventListener('click', function() {
+    const flights = parseFloat(document.getElementById('flights').value) || 0;
+    const accommodation = parseFloat(document.getElementById('accommodation').value) || 0;
+    const nights = parseFloat(document.getElementById('nights').value) || 0;
+    const food = parseFloat(document.getElementById('food').value) || 0;
+    const days = parseFloat(document.getElementById('days').value) || 0;
+    const activities = parseFloat(document.getElementById('activities').value) || 0;
+
+    const accommodationTotal = accommodation * nights;
+    const foodTotal = food * days;
+    const totalCost = flights + accommodationTotal + foodTotal + activities;
+
+    document.getElementById('result').value = totalCost.toFixed(2);
+});
+
+document.getElementById('reset').addEventListener('click', function() {
+    document.getElementById('flights').value = '';
+    document.getElementById('accommodation').value = '';
+    document.getElementById('nights').value = '';
+    document.getElementById('food').value = '';
+    document.getElementById('days').value = '';
+    document.getElementById('activities').value = '';
+    document.getElementById('result').value = '';
+});