diff --git a/Calculators/Fuel-Cost-Calculator/Readme.md b/Calculators/Fuel-Cost-Calculator/Readme.md new file mode 100644 index 000000000..b00600901 --- /dev/null +++ b/Calculators/Fuel-Cost-Calculator/Readme.md @@ -0,0 +1,15 @@ +#

Fuel Cost Calculator

+ +## 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 new file mode 100644 index 000000000..406ce6aa3 --- /dev/null +++ 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 new file mode 100644 index 000000000..407ae029b --- /dev/null +++ b/Calculators/Fuel-Cost-Calculator/fuel-cost.html @@ -0,0 +1,45 @@ + + + + + +Fuel Cost Calculator + + + +
+
+ F + U + E + L +   + C + O + S + T +   + C + A + L + C + U + L + A + T + O + R +
+

+ +

+ +

+ +

+ +

+
+ + + \ No newline at end of file diff --git a/Calculators/Fuel-Cost-Calculator/fuel-cost.jpg b/Calculators/Fuel-Cost-Calculator/fuel-cost.jpg new file mode 100644 index 000000000..431307cdc Binary files /dev/null and b/Calculators/Fuel-Cost-Calculator/fuel-cost.jpg differ diff --git a/Calculators/Fuel-Cost-Calculator/fuel-cost.js b/Calculators/Fuel-Cost-Calculator/fuel-cost.js new file mode 100644 index 000000000..223514e95 --- /dev/null +++ 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 index 49e1877c7..dcbbde441 100644 --- a/index.html +++ b/index.html @@ -761,7 +761,7 @@

Calculates LCM of multiple numbers.

Fuel Efficiency Calculator

-

Calculates efficiency of the vehicle

+

Calculates the efficiency of a vehicle.

@@ -772,6 +772,20 @@

Calculates efficiency of the vehicle

+
+
+

Fuel Cost Calculator

+

Calculates the cost of fuel based on fuel efficiency and distance travelled.

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

Square Cube Calculator