Added Fuel Cost Calculator (#593)

Rakesh9100 · Feb 23, 2024 · 4a3b8af · 4a3b8af
1 parent 021cf1f
commit 4a3b8af
Show file tree

Hide file tree

Showing 6 changed files with 189 additions and 1 deletion.
diff --git a/Calculators/Fuel-Cost-Calculator/Readme.md b/Calculators/Fuel-Cost-Calculator/Readme.md
@@ -0,0 +1,15 @@
+# <p align="center">Fuel Cost Calculator</p>
+
+## Description :-
+
+This calculator calculates the cost of fuel based on fuel efficiency and distance travelled.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/19fe6a71-0355-4b82-a648-279046143fbe)
diff --git a/Calculators/Fuel-Cost-Calculator/fuel-cost.css b/Calculators/Fuel-Cost-Calculator/fuel-cost.css
@@ -0,0 +1,102 @@
+    body {
+        font-family: Arial, sans-serif;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        background-image: url(fuel-cost.jpg);
+        background-size: cover; 
+  background-position: center;
+    }
+    .waviy {
+    position: relative;
+  }
+  .waviy span {
+    position: relative;
+    display: inline-block;
+    font-size: 35px;
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+    color: #fff;
+    text-transform: uppercase;
+    animation: flip 2s infinite;
+    animation-delay: calc(.2s * var(--i))
+  }
+  @keyframes flip {
+    0%,80% {
+      transform: rotateY(360deg) 
+    }
+  }
+.card {
+    background: rgba(158, 187, 226, 0.1);
+  backdrop-filter: blur(10px);
+  border-radius: 15px;
+  padding: 25px;
+  text-align: center;
+  max-width: 570px;
+  width: 90%;
+  margin-bottom: 20px;
+}
+    input[type="number"] {
+        width: 100%;
+        padding: 8px;
+        margin-bottom: 10px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        box-sizing: border-box;
+    }
+    #labelname{
+        color:#fff;
+        font-family: 'Times New Roman', Times, serif;
+        font-size: 1.2rem;
+    }
+    .button {
+    align-items: center;
+    appearance: none;
+    background-image: radial-gradient(100% 100% at 100% 0, #da7676 0, #e21212 100%);
+    border: 0;
+    border-radius: 6px;
+    box-shadow: rgba(0, 0, 0, 0.4) 0 2px 4px,rgba(0, 0, 0, 0.3) 0 7px 13px -3px,rgba(0, 0, 0, 0.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;
+    -webkit-user-select: none;
+    touch-action: manipulation;
+    white-space: nowrap;
+    will-change: box-shadow,transform;
+    font-size: 18px;
+  }
+
+  .button:focus {
+    box-shadow: #db5841 0 0 0 1.5px inset, rgba(240, 4, 4, 0.4) 0 2px 4px, rgba(0, 0, 0, 0.3) 0 7px 13px -3px, #e03c3c 0 -3px 0 inset;
+  }
+
+  .button:hover {
+    box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #e1dde8 0 -3px 0 inset;
+    transform: translateY(-2px);
+  }
+
+  .button:active {
+    box-shadow: #e3e3dd 0 3px 7px inset;
+    transform: translateY(2px);
+  }
+  #result{
+    color:#fff;
+    font-family: 'Times New Roman', Times, serif;
+    font-size: 1.5rem;
+  }
diff --git a/Calculators/Fuel-Cost-Calculator/fuel-cost.html b/Calculators/Fuel-Cost-Calculator/fuel-cost.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Fuel Cost Calculator</title>
+<link rel="stylesheet" href="fuel-cost.css" />
+</head>
+<body>
+    <div class="card">
+        <div class="waviy">
+            <span style="--i:1">F</span>
+            <span style="--i:2">U</span>
+            <span style="--i:3">E</span>
+            <span style="--i:4">L</span>
+            <span style="--i:11">&nbsp;</span>
+            <span style="--i:5">C</span>
+            <span style="--i:6">O</span>
+            <span style="--i:7">S</span>
+            <span style="--i:8">T</span>
+            <span style="--i:9">&nbsp;</span>
+            <span style="--i:10">C</span>
+            <span style="--i:11">A</span>
+            <span style="--i:12">L</span>
+            <span style="--i:13">C</span>
+            <span style="--i:14">U</span>
+            <span style="--i:15">L</span>
+            <span style="--i:16">A</span>
+            <span style="--i:17">T</span>
+            <span style="--i:18">O</span>
+            <span style="--i:19">R</span>
+           </div>
+           <br><br>
+    <label for="distance" id="labelname">Distance (in km):</label>
+    <input type="number" id="distance" placeholder="Enter distance"><br><br>
+    <label for="fuelEfficiency" id="labelname">Fuel Efficiency (km/l):</label>
+    <input type="number" id="fuelEfficiency" placeholder="Enter fuel efficiency"><br><br>
+    <label for="fuelPrice" id="labelname">Fuel Price (per liter):</label>
+    <input type="number" id="fuelPrice" placeholder="Enter fuel price"><br><br>
+    <button class="button" onclick="calculateCost()">Calculate</button>
+    <h3 id="result"></h3>
+</div>
+<script src="fuel-cost.js"></script>
+</body>
+</html>
diff --git a/Calculators/Fuel-Cost-Calculator/fuel-cost.jpg b/Calculators/Fuel-Cost-Calculator/fuel-cost.jpg
diff --git a/Calculators/Fuel-Cost-Calculator/fuel-cost.js b/Calculators/Fuel-Cost-Calculator/fuel-cost.js
@@ -0,0 +1,12 @@
+function calculateCost() {
+        var distance = parseFloat(document.getElementById('distance').value);
+        var fuelEfficiency = parseFloat(document.getElementById('fuelEfficiency').value);
+        var fuelPrice = parseFloat(document.getElementById('fuelPrice').value);
+
+        if (isNaN(distance) || isNaN(fuelEfficiency) || isNaN(fuelPrice)) {
+            document.getElementById('result').innerText = "Please enter valid numbers.";
+        } else {
+            var cost = (distance / fuelEfficiency) * fuelPrice;
+            document.getElementById('result').innerText = "Total Cost: Rs" + cost.toFixed(2);
+        }
+    }
diff --git a/index.html b/index.html
@@ -761,7 +761,7 @@ <h3>Calculates LCM of multiple numbers.</h3>
         <div class="box">
             <div class="content">
                 <h2>Fuel Efficiency Calculator</h2>
-                <h3>Calculates efficiency of the vehicle</h3>
+                <h3>Calculates the efficiency of a vehicle.</h3>
                 <div class="card-footer">
                     <a href="./Calculators/Fuel-Efficiency-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
@@ -772,6 +772,20 @@ <h3>Calculates efficiency of the vehicle</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Fuel Cost Calculator</h2>
+                <h3>Calculates the cost of fuel based on fuel efficiency and distance travelled.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Fuel-Cost-Calculator/fuel-cost.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Fuel-Cost-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>Square Cube Calculator</h2>