diff --git a/Calculators/Electric-Vehicle-Savings-Calculator/index.html b/Calculators/Electric-Vehicle-Savings-Calculator/index.html new file mode 100644 index 000000000..70f1ef282 --- /dev/null +++ b/Calculators/Electric-Vehicle-Savings-Calculator/index.html @@ -0,0 +1,37 @@ + + + + + + Electric Vehicle Savings Calculator + + + +
+

EV Savings Calculator

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

Results

+

Petrol Vehicle Cost per km:

+

Electric Vehicle Cost per km:

+
+
+ + + + \ No newline at end of file diff --git a/Calculators/Electric-Vehicle-Savings-Calculator/script.js b/Calculators/Electric-Vehicle-Savings-Calculator/script.js new file mode 100644 index 000000000..efe9f0227 --- /dev/null +++ b/Calculators/Electric-Vehicle-Savings-Calculator/script.js @@ -0,0 +1,27 @@ +function calculateCosts() { + const petrolAvg = parseFloat(document.getElementById("petrol-avg").value); + const batteryCap = parseFloat(document.getElementById("battery-cap").value); + const evRange = parseFloat(document.getElementById("ev-range").value); + const elecCost = parseFloat(document.getElementById("elec-cost").value); + + if ( + isNaN(petrolAvg) || + isNaN(batteryCap) || + isNaN(evRange) || + isNaN(elecCost) + ) { + alert("Please enter valid numbers for all fields."); + return; + } + + // Petrol cost per km considering average petrol price in India + const petrolCostPerKm = ((1 / petrolAvg) * 100).toFixed(2); // Assuming an average fuel price of ₹100 per liter + const evCostPerKm = ((elecCost * batteryCap) / evRange).toFixed(2); + + document.getElementById( + "petrol-cost" + ).innerText = `Petrol Vehicle Cost per km: ₹${petrolCostPerKm}`; + document.getElementById( + "ev-cost" + ).innerText = `Electric Vehicle Cost per km: ₹${evCostPerKm}`; +} \ No newline at end of file diff --git a/Calculators/Electric-Vehicle-Savings-Calculator/styles.css b/Calculators/Electric-Vehicle-Savings-Calculator/styles.css new file mode 100644 index 000000000..f26e88032 --- /dev/null +++ b/Calculators/Electric-Vehicle-Savings-Calculator/styles.css @@ -0,0 +1,83 @@ +body { + font-family: 'Arial', sans-serif; + background-color: #a6a6f0; /* Light background color for contrast */ + color: #333; /* Darker text color for better readability */ + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.container { + background-color: #ffffff; /* White background for the container */ + padding: 40px; + border-radius: 12px; /* Rounded corners */ + width: 400px; /* Slightly wider container */ + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Enhanced shadow for depth */ + border: 1px solid #e0e0e0; /* Light border for better separation */ +} + +h1 { + font-size: 1.8em; + margin-bottom: 20px; /* Added space below heading */ + text-align: center; + color: #007bff; /* Bright blue for heading */ +} + +form { + display: flex; + flex-direction: column; +} + +label { + margin-bottom: 5px; /* Spacing between label and input */ + font-weight: 600; /* Slightly bolder font weight */ + color: #555; /* Darker color for labels */ +} + +input, button { + width: 100%; /* Full width for inputs and button */ + padding: 14px; + margin-bottom: 15px; /* Space between elements */ + border: 1px solid #ccc; /* Light gray border */ + border-radius: 6px; /* Rounded corners */ + background-color: #f9f9f9; /* Lighter background for inputs and button */ + color: #333; /* Darker text color for readability */ + font-size: 1em; /* Consistent font size */ +} + +input:focus, button:focus { + outline: none; + border-color: #007bff; /* Highlight border color on focus */ + box-shadow: 0 0 8px rgba(0, 123, 255, 0.5); /* Enhanced shadow on focus */ +} + +button { + background-color: #5959f8; + border: none; + color: #ffffff; /* White text color for button */ + cursor: pointer; + font-weight: bold; +} + +button:hover { + background-color: #014ea0; +} + +.result { + margin-top: 20px; /* Space above results */ + padding-top: 15px; + border-top: 1px solid #e0e0e0; /* Light border for separation */ +} + +.result h3 { + font-size: 1.3em; + margin-bottom: 10px; + color: #007bff; /* Bright blue for result heading */ +} + +.result p { + font-size: 1.1em; + margin: 5px 0; /* Space between result lines */ +} \ No newline at end of file diff --git a/Calculators/README.md b/Calculators/README.md new file mode 100644 index 000000000..1f4d72c93 --- /dev/null +++ b/Calculators/README.md @@ -0,0 +1,16 @@ +#

Electric Vehicle Savings Calculator

+ +## Description :- + +Calculates savings from using an electric vehicle VS a gasoline vehicle. + +## Tech Stacks :- + +- HTML +- CSS +- JavaScript + + +## Screenshots :- +![WhatsApp Image 2024-08-09 at 00 04 40_1e3c53e0](https://github.com/user-attachments/assets/ce3a0c21-c163-426c-9b72-9f9a3584b46a) + diff --git a/index.html b/index.html index dfac3e2fc..08c5ff3d4 100644 --- a/index.html +++ b/index.html @@ -1836,6 +1836,20 @@

Calculates electricity costs based on user-supplied units, time, and cost pa + +
+
+

Electric Vehicle Savings Calculator

+

Calculates savings from using an electric vehicle VS a gasoline vehicle.

+
+ + + + + Source Code + +
+