Skip to content

Commit

Permalink
New calculator
Browse files Browse the repository at this point in the history
  • Loading branch information
@sweta-singh28
sweta-singh28 committed Aug 8, 2024
1 parent 9bb22f7 commit a9e3771
Show file tree
Hide file tree
Showing 4 changed files with 161 additions and 0 deletions.
37 changes: 37 additions & 0 deletions Calculators/Electric-Vehicle-Savings-Calculator/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Electric Vehicle Savings Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>EV Savings Calculator</h1>
<form id="calculator-form">
<label for="petrol-avg">Petrol Vehicle Efficiency (kms/l):</label>
<input type="number" id="petrol-avg" step="0.1" placeholder="e.g. 12">

<label for="battery-cap">EV Battery Capacity (kWh):</label>
<input type="number" id="battery-cap" step="0.1" placeholder="e.g. 50">

<label for="ev-range">EV Range (kms):</label>
<input type="number" id="ev-range" step="1" placeholder="e.g. 300">

<label for="elec-cost">Cost of Electricity per kWh:</label>
<input type="number" id="elec-cost" step="0.01" placeholder="e.g. 0.20">

<button type="button" onclick="calculateCosts()">Calculate</button>
</form>

<div class="result">
<h3>Results</h3>
<p id="petrol-cost">Petrol Vehicle Cost per km: </p>
<p id="ev-cost">Electric Vehicle Cost per km: </p>
</div>
</div>

<script src="script.js"></script>
</body>
</html>
27 changes: 27 additions & 0 deletions Calculators/Electric-Vehicle-Savings-Calculator/script.js
View file
Original file line number Diff line number Diff line change
@@ -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}`;
}
83 changes: 83 additions & 0 deletions Calculators/Electric-Vehicle-Savings-Calculator/styles.css
View file
Original file line number Diff line number Diff line change
@@ -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 */
}
14 changes: 14 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1836,6 +1836,20 @@ <h3>Calculates electricity costs based on user-supplied units, time, and cost pa
</a>
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>Electric Vehicle Savings Calculator</h2>
<h3>Calculates savings from using an electric vehicle VS a gasoline vehicle.</h3>
<div class="card-footer">
<a href="./Calculators/Electric-Vehicle-Savings-Calculator/index.html" target="_blank">
<button>Try Now</button>
</a>
<a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Electric-Vehicle-Savings-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">
Expand Down

0 comments on commit a9e3771

Please sign in to comment.