Skip to content

Commit 7cde9f9

Browse files
ProgrammerKRProgrammerKR
authored
Update index.html
1 parent 81dc2a0 commit 7cde9f9

1 file changed

Lines changed: 176 additions & 35 deletions

File tree

‎index.html‎

Lines changed: 176 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,33 +3,34 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>GridXcel App</title>
6+
<title>GridXcel - Excel Like App</title>
7+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
78
<style>
89
body {
910
font-family: Arial, sans-serif;
1011
margin: 0;
1112
padding: 0;
12-
display: flex;
13-
justify-content: center;
14-
align-items: center;
15-
height: 100vh;
16-
background-color: #f5f5f5;
13+
background-color: #f8f9fa;
14+
}
15+
16+
.container {
17+
margin-top: 20px;
18+
overflow-x: auto;
1719
}
1820

1921
table {
2022
border-collapse: collapse;
21-
width: 90%;
22-
overflow-x: auto;
23+
width: 100%;
2324
}
2425

2526
td, th {
26-
width: 50px;
27-
height: 30px;
28-
border: 1px solid #ccc;
27+
width: 100px;
28+
height: 50px;
29+
border: 1px solid #dee2e6;
2930
text-align: center;
3031
vertical-align: middle;
3132
cursor: pointer;
32-
background-color: #fff;
33+
background-color: #ffffff;
3334
}
3435

3536
input {
@@ -43,60 +44,200 @@
4344
.selected {
4445
background-color: #d0e0f0;
4546
}
47+
48+
.formula-bar {
49+
margin-bottom: 15px;
50+
}
4651
</style>
4752
</head>
4853
<body>
49-
<table id="excelTable">
50-
<!-- Table will be dynamically populated by JavaScript -->
51-
</table>
54+
<div class="container">
55+
<div class="formula-bar">
56+
<input type="text" id="formulaInput" class="form-control" placeholder="Enter a formula (e.g., =SUM(A1:A5))" />
57+
</div>
58+
<table id="excelTable" class="table table-bordered">
59+
<!-- Table will be dynamically populated by JavaScript -->
60+
</table>
61+
</div>
5262

63+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
5364
<script>
54-
const rows = 5000; // Adjust the rows to a manageable number for testing
55-
const cols = 3000; // Adjust the columns to a manageable number for testing
65+
const rows = 20; // Adjust to manage performance
66+
const cols = 20; // Adjust to manage performance
5667
const table = document.getElementById('excelTable');
68+
const formulaInput = document.getElementById('formulaInput');
5769

58-
// Initialize table
70+
// Initialize the table
5971
for (let i = 0; i < rows; i++) {
6072
const row = table.insertRow();
6173
for (let j = 0; j < cols; j++) {
6274
const cell = row.insertCell();
6375
const input = document.createElement('input');
6476
input.type = 'text';
6577
input.id = `cell-${i}-${j}`;
66-
input.addEventListener('input', updateFormula);
78+
input.addEventListener('input', updateCell);
79+
input.addEventListener('click', selectCell);
6780
cell.appendChild(input);
6881
}
6982
}
7083

71-
// Handle formulas and update cell values
72-
function updateFormula(event) {
84+
// Update cell when input is changed
85+
function updateCell(event) {
7386
const input = event.target;
7487
const [_, row, col] = input.id.split('-').map(Number);
7588
let value = input.value.trim();
7689

77-
// Simple formula parsing (for demonstration)
90+
// Formula handling
7891
if (value.startsWith('=') && value.length > 1) {
7992
value = parseFormula(value.slice(1), row, col);
8093
input.value = value;
8194
}
95+
}
8296

83-
// Simulate some basic formulas
84-
function parseFormula(formula, row, col) {
85-
const match = formula.match(/([A-Z]+)(\d+)/);
86-
if (match) {
87-
const formulaRow = parseInt(match[2]) - 1;
88-
const formulaCol = match[1].charCodeAt(0) - 65;
89-
const targetCell = document.getElementById(`cell-${formulaRow}-${formulaCol}`);
90-
return targetCell ? targetCell.value : '';
97+
// Handle cell selection
98+
function selectCell(event) {
99+
const allCells = document.querySelectorAll('input');
100+
allCells.forEach(cell => cell.classList.remove('selected'));
101+
event.target.classList.add('selected');
102+
}
103+
104+
// Formula parser (example: SUM, AVERAGE, etc.)
105+
function parseFormula(formula, row, col) {
106+
if (formula.startsWith('SUM')) {
107+
return parseSumFormula(formula, row, col);
108+
} else if (formula.startsWith('AVERAGE')) {
109+
return parseAverageFormula(formula, row, col);
110+
} else if (formula.startsWith('MIN')) {
111+
return parseMinFormula(formula, row, col);
112+
} else if (formula.startsWith('MAX')) {
113+
return parseMaxFormula(formula, row, col);
114+
} else if (formula.startsWith('COUNT')) {
115+
return parseCountFormula(formula, row, col);
116+
} else if (formula.startsWith('IF')) {
117+
return parseIfFormula(formula, row, col);
118+
} else if (formula.startsWith('ROUND')) {
119+
return parseRoundFormula(formula, row, col);
120+
} else if (formula.startsWith('CONCATENATE')) {
121+
return parseConcatenateFormula(formula, row, col);
122+
} else if (formula.startsWith('LEN')) {
123+
return parseLenFormula(formula, row, col);
124+
} else if (formula.startsWith('PRODUCT')) {
125+
return parseProductFormula(formula, row, col);
126+
} else if (formula.startsWith('SQRT')) {
127+
return parseSqrtFormula(formula, row, col);
128+
} else if (formula.startsWith('MOD')) {
129+
return parseModFormula(formula, row, col);
130+
} else if (formula.startsWith('POWER')) {
131+
return parsePowerFormula(formula, row, col);
132+
} else if (formula.startsWith('ABS')) {
133+
return parseAbsFormula(formula, row, col);
134+
} else if (formula.startsWith('MAXA')) {
135+
return parseMaxAFormula(formula, row, col);
136+
} else if (formula.startsWith('MINA')) {
137+
return parseMinAFormula(formula, row, col);
138+
} else if (formula.startsWith('TODAY')) {
139+
return parseTodayFormula(formula, row, col);
140+
} else if (formula.startsWith('NOW')) {
141+
return parseNowFormula(formula, row, col);
142+
} else if (formula.startsWith('TRIM')) {
143+
return parseTrimFormula(formula, row, col);
144+
} else if (formula.startsWith('ISNUMBER')) {
145+
return parseIsNumberFormula(formula, row, col);
146+
} else if (formula.startsWith('ISEVEN')) {
147+
return parseIsEvenFormula(formula, row, col);
148+
} else if (formula.startsWith('ISODD')) {
149+
return parseIsOddFormula(formula, row, col);
150+
} else if (formula.startsWith('IFERROR')) {
151+
return parseIfErrorFormula(formula, row, col);
152+
}
153+
// Add more formulas as needed
154+
return formula;
155+
}
156+
157+
// Example formulas
158+
function parseSumFormula(formula, row, col) {
159+
const rangeMatch = formula.match(/SUM(\w+)(\d+):(\w+)(\d+)/);
160+
if (rangeMatch) {
161+
const startCol = rangeMatch[1].charCodeAt(0) - 65;
162+
const startRow = parseInt(rangeMatch[2]) - 1;
163+
const endCol = rangeMatch[3].charCodeAt(0) - 65;
164+
const endRow = parseInt(rangeMatch[4]) - 1;
165+
let sum = 0;
166+
for (let r = startRow; r <= endRow; r++) {
167+
for (let c = startCol; c <= endCol; c++) {
168+
const targetCell = document.getElementById(`cell-${r}-${c}`);
169+
const value = parseFloat(targetCell.value) || 0;
170+
sum += value;
171+
}
172+
}
173+
return sum;
174+
}
175+
return formula;
176+
}
177+
178+
function parseAverageFormula(formula, row, col) {
179+
const rangeMatch = formula.match(/AVERAGE(\w+)(\d+):(\w+)(\d+)/);
180+
if (rangeMatch) {
181+
const startCol = rangeMatch[1].charCodeAt(0) - 65;
182+
const startRow = parseInt(rangeMatch[2]) - 1;
183+
const endCol = rangeMatch[3].charCodeAt(0) - 65;
184+
const endRow = parseInt(rangeMatch[4]) - 1;
185+
let sum = 0, count = 0;
186+
for (let r = startRow; r <= endRow; r++) {
187+
for (let c = startCol; c <= endCol; c++) {
188+
const targetCell = document.getElementById(`cell-${r}-${c}`);
189+
const value = parseFloat(targetCell.value) || 0;
190+
sum += value;
191+
count++;
192+
}
91193
}
92-
return value;
194+
return count > 0 ? sum / count : 0;
93195
}
196+
return formula;
94197
}
95198

96-
// Example of adding simple formula parsing for SUM
97-
function addFormula(row, col) {
98-
// Add formula handling logic here (e.g., SUM, AVERAGE, etc.)
199+
function parseMinFormula(formula, row, col) {
200+
const rangeMatch = formula.match(/MIN(\w+)(\d+):(\w+)(\d+)/);
201+
if (rangeMatch) {
202+
const startCol = rangeMatch[1].charCodeAt(0) - 65;
203+
const startRow = parseInt(rangeMatch[2]) - 1;
204+
const endCol = rangeMatch[3].charCodeAt(0) - 65;
205+
const endRow = parseInt(rangeMatch[4]) - 1;
206+
let min = Infinity;
207+
for (let r = startRow; r <= endRow; r++) {
208+
for (let c = startCol; c <= endCol; c++) {
209+
const targetCell = document.getElementById(`cell-${r}-${c}`);
210+
const value = parseFloat(targetCell.value) || Infinity;
211+
min = Math.min(min, value);
212+
}
213+
}
214+
return min;
215+
}
216+
return formula;
99217
}
218+
219+
// Add more formulas here like MAX, COUNT, etc.
220+
function parseMaxFormula(formula, row, col) { ... }
221+
function parseCountFormula(formula, row, col) { ... }
222+
function parseIfFormula(formula, row, col) { ... }
223+
function parseRoundFormula(formula, row, col) { ... }
224+
function parseConcatenateFormula(formula, row, col) { ... }
225+
function parseLenFormula(formula, row, col) { ... }
226+
function parseProductFormula(formula, row, col) { ... }
227+
function parseSqrtFormula(formula, row, col) { ... }
228+
function parseModFormula(formula, row, col) { ... }
229+
function parsePowerFormula(formula, row, col) { ... }
230+
function parseAbsFormula(formula, row, col) { ... }
231+
function parseMaxAFormula(formula, row, col) { ... }
232+
function parseMinAFormula(formula, row, col) { ... }
233+
function parseTodayFormula(formula, row, col) { ... }
234+
function parseNowFormula(formula, row, col) { ... }
235+
function parseTrimFormula(formula, row, col) { ... }
236+
function parseIsNumberFormula(formula, row, col) { ... }
237+
function parseIsEvenFormula(formula, row, col) { ... }
238+
function parseIsOddFormula(formula, row, col) { ... }
239+
function parseIfErrorFormula(formula, row, col) { ... }
240+
100241
</script>
101242
</body>
102-
</html>
243+
</html>

0 commit comments

Comments
 (0)