-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
183 lines (156 loc) · 7.02 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Solar Panel Quote Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
.radio-group {
display: flex;
flex-direction: column;
}
.radio-group label {
display: flex;
align-items: center;
margin-bottom: 5px;
cursor: pointer;
}
.radio-group input[type="radio"] {
margin-right: 10px;
}
.form-group input[type="number"] {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.result {
margin-top: 20px;
padding: 20px;
background: #e9ecef;
border-radius: 4px;
}
.result h2 {
margin-top: 0;
}
</style>
</head>
<body>
<div class="container">
<h1>Solar Panel System Quote Calculator</h1>
<div class="form-group">
<label>Select System Type:</label>
<div class="radio-group" data-selector="systemType">
<label><input type="radio" name="systemType" value="on-grid" data-price="0"> On-grid</label>
<label><input type="radio" name="systemType" value="off-grid" data-price="0"> Off-grid</label>
<label><input type="radio" name="systemType" value="hybrid" data-price="0"> Hybrid</label>
</div>
</div>
<div class="form-group">
<label>Select Panel Provider:</label>
<div class="radio-group" data-selector="panelProvider">
<label><input type="radio" name="panelProvider" value="Tata Power" data-price="50000"> Tata
Power</label>
<label><input type="radio" name="panelProvider" value="Vikram Solar" data-price="45000"> Vikram
Solar</label>
<label><input type="radio" name="panelProvider" value="Waaree" data-price="55000"> Waaree</label>
<label><input type="radio" name="panelProvider" value="RenewSys" data-price="60000"> RenewSys</label>
</div>
</div>
<div class="form-group">
<label>Select Battery Provider:</label>
<div class="radio-group" data-selector="batteryProvider">
<label><input type="radio" name="batteryProvider" value="Luminous" data-price="12000"> Luminous</label>
<label><input type="radio" name="batteryProvider" value="Exide" data-price="10000"> Exide</label>
<label><input type="radio" name="batteryProvider" value="Okaya" data-price="15000"> Okaya</label>
</div>
</div>
<div class="form-group">
<label>Select Inverter Provider:</label>
<div class="radio-group" data-selector="inverterProvider">
<label><input type="radio" name="inverterProvider" value="Microtek" data-price="15000"> Microtek</label>
<label><input type="radio" name="inverterProvider" value="Sukam" data-price="20000"> Sukam</label>
<label><input type="radio" name="inverterProvider" value="Delta" data-price="25000"> Delta</label>
</div>
</div>
<div class="form-group">
<label for="monthlyBill">Monthly Electricity Bill (₹):</label>
<input type="number" data-selector="monthlyBill" min="0">
</div>
<div class="result" style="display: none;">
<h2>Quote Summary</h2>
<p data-selector="totalCost"></p>
</div>
</div>
<script>
function calculateQuote() {
// Get input values
const systemType = document.querySelector('[data-selector="systemType"] input:checked');
const panelProvider = document.querySelector('[data-selector="panelProvider"] input:checked');
const batteryProvider = document.querySelector('[data-selector="batteryProvider"] input:checked');
const inverterProvider = document.querySelector('[data-selector="inverterProvider"] input:checked');
const monthlyBill = parseFloat(document.querySelector('[data-selector="monthlyBill"]').value);
// Check if the monthly bill is a number
if (isNaN(monthlyBill) || monthlyBill <= 0) {
document.querySelector('.result').style.display = 'none';
return;
}
// Get provider prices
const panelPricePerKW = parseFloat(panelProvider.dataset.price);
const batteryPricePerKWh = parseFloat(batteryProvider.dataset.price);
const inverterPrice = parseFloat(inverterProvider.dataset.price);
// Calculate system requirements
const perKwhCost = 10; // Example cost per kWh
const dailySunlightHours = 4;
const totalKWRequired = (monthlyBill / perKwhCost) / (30 * dailySunlightHours);
const totalCostOfPanels = totalKWRequired * panelPricePerKW;
// Example fixed battery storage for hybrid system
const batteryStorageRequired = systemType.value === 'hybrid' ? totalKWRequired : 0;
const totalCostOfBatteries = batteryStorageRequired * batteryPricePerKWh;
const totalCost = totalCostOfPanels + totalCostOfBatteries + inverterPrice;
// Display results
document.querySelector('[data-selector="totalCost"]').textContent = `Total Cost: ₹${totalCost.toFixed(2)}`;
document.querySelector('.result').style.display = 'block';
}
// Add event listeners to radio buttons and input field
document.querySelectorAll('[data-selector="systemType"] input').forEach(input =>
input.addEventListener('change', calculateQuote)
);
document.querySelectorAll('[data-selector="panelProvider"] input').forEach(input =>
input.addEventListener('change', calculateQuote)
);
document.querySelectorAll('[data-selector="batteryProvider"] input').forEach(input =>
input.addEventListener('change', calculateQuote)
);
document.querySelectorAll('[data-selector="inverterProvider"] input').forEach(input =>
input.addEventListener('change', calculateQuote)
);
document.querySelector('[data-selector="monthlyBill"]').addEventListener('input', calculateQuote);
</script>
</body>
</html>