Skip to content

Commit

Permalink
Initial Commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@arpit-15s
arpit-15s committed Aug 29, 2021
1 parent 0323176 commit 7753060
Show file tree
Hide file tree
Showing 4 changed files with 513 additions and 0 deletions.
1 change: 1 addition & 0 deletions formula-fx.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
107 changes: 107 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel = "StyleSheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Excel-Clone</title>
</head>
<body>
<div class = "Container">
<div class = "Title-Bar">Excel Book-1</div>
<div class = "Menu-Bar">
<div class = "File-Menu menu-item">File</div>
<div class = "Home-Menu menu-item selected">Home</div>
<div class="Insert-Menu menu-item">Insert</div>
<div class="Page-Layout-Menu menu-item">page Layout</div>
<div class="Formula-Menu menu-item">Formula</div>
<div class="Data-Menu menu-item">Data</div>
<div class="Review-Menu menu-item">Review</div>
<div class="View-Menu menu-item">View</div>
</div>
<div class = "Menu-Icon-Bar">
<div class = "material-icons menu-icon icon-cut">content_cut</div>
<div class = "material-icons menu-icon icon-copy">content_copy</div>
<div class = "material-icons menu-icon icon-paste">content_paste</div>
<select class="selector font-family-selector">
<option style="font-family: Noto Sans;" value="Noto Sans" selected>Noto Sans</option>
<option style="font-family:Arial" value="Arial">Arial</option>
<option style="font-family:Calibri" value="Calibri">Calibri</option>
<option style="font-family:Comic Sans MS" value="Comic Sans MS">Comic Sans MS</option>
<option style="font-family:Courier New" value="Courier New">Courier New</option>
<option style="font-family:Impact" value="Impact">Impact</option>
<option style="font-family:Georgia" value="Georgia">Georgia</option>
<option style="font-family:Garamond" value="Garamond">Garamond</option>
<option style="font-family:Lato" value="Lato">Lato</option>
<option style="font-family:Open Sans" value="Open Sans">Open Sans</option>
<option style="font-family:Palatino" value="Palatino">Palatino</option>
<option style="font-family:Verdana" value="Verdana">Verdana</option>
</select>
<select class="selector font-size-selector">
<option value="10px">10</option>
<option value="12px">12</option>
<option value="14px" selected>14</option>
<option value="16px">18</option>
<option value="20px">20</option>
<option value="22px">22</option>
<option value="24px">24</option>
<option value="26px">26</option>
<option value="30px">30</option>
<option value="32px">32</option>
</select>
<div class = "material-icons menu-icon icon-bold style-icon">format_bold</div>
<div class = "material-icons menu-icon icon-italic style-icon">format_italic</div>
<div class = "material-icons menu-icon icon-underline style-icon">format_underline</div>
<div class = "material-icons menu-icon icon-left-alignment selected align-icon">format_align_left</div>
<div class = "material-icons menu-icon icon-center-alignment align-icon">format_align_center</div>
<div class = "material-icons menu-icon icon-right-alignment align-icon">format_align_right</div>
<div class = "material-icons menu-icon icon-justify alignment align-icon">format_align_justify</div>
<div class = "material-icons menu-icon icon-color-fill">format_color_fill</div>
<div class = "material-icons menu-icon icon-text-color">format_color_text</div>
</div>
<div class = "Formula-Bar">
<div class = "formula-editor cell-address" contenteditable = "true"></div>
<div class = "fx"><?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="10px" y="10px" viewBox="0 0 121.83 122.88"
style="enable-background:new 0 0 121.83 122.88" xml:space="preserve">
<g>
<path
d="M27.61,34.37l-4.07,4.6l0.4,1.74h10.48c-2.14,12.38-3.74,23.54-6.81,40.74c-3.67,21.94-5.78,27.33-7.03,29.3 c-1.1,1.95-2.68,2.96-4.82,2.96c-2.35,0-6.6-1.86-8.88-3.97c-0.82-0.56-1.79-0.42-2.82,0.26C2,111.74,0,114.42,0,116.82 c-0.12,3.24,4.21,6.06,8.34,6.06c3.64,0,9-2.28,14.64-7.64c7.71-7.31,13.48-17.34,18.3-39.02c3.1-13.84,4.56-22.84,6.74-35.5 l13.02-1.18l2.82-5.17H49.2C52.99,10.53,55.95,7,59.59,7c2.42,0,5.24,1.86,8.48,5.52c0.96,1.32,2.4,1.18,3.5,0.28 c1.85-1.1,4.13-3.92,4.28-6.48C75.96,3.5,72.6,0,66.82,0C61.58,0,53.55,3.5,46.8,10.38c-5.92,6.27-9.02,14.1-11.16,23.99H27.61 L27.61,34.37z M69.27,50.33c4.04-5.38,6.46-7.17,7.71-7.17c1.29,0,2.32,1.27,4.53,8.41l3.78,12.19 c-7.31,11.18-12.66,17.41-15.91,17.41c-1.08,0-2.17-0.34-2.94-1.1c-0.76-0.76-1.6-1.39-2.42-1.39c-2.68,0-6,3.25-6.06,7.28 c-0.06,4.11,2.82,7.05,6.6,7.05c6.49,0,11.98-6.37,22.58-23.26l3.1,10.45c2.66,8.98,5.78,12.81,9.68,12.81 c4.82,0,11.3-4.11,18.37-15.22l-2.96-3.38c-4.25,5.12-7.07,7.52-8.74,7.52c-1.86,0-3.49-2.84-5.64-9.82l-4.53-14.73 c2.68-3.95,5.32-7.27,7.64-9.92c2.76-3.15,4.89-4.49,6.34-4.49c1.22,0,2.28,0.52,2.94,1.25c0.87,0.96,1.39,1.41,2.42,1.41 c2.33,0,5.93-2.96,6.06-6.88c0.12-3.64-2.14-6.74-6.06-6.74c-5.92,0-11.14,5.1-21.19,20.04l-2.07-6.41 c-2.9-9-4.82-13.63-8.86-13.63c-4.7,0-11.16,5.78-17.48,14.94L69.27,50.33L69.27,50.33z" />
</g>
</svg></div>
<div class = "formula-editor formula-input" contenteditable = "true"></div>
</div>
<div class = "Data-Container">
<div class = "select-all"></div>
<div class = "column-name-container">
<!--div class = "column-number colId-1" id = "colCode-A">A</div>
<div class = "column-number " id = "colCode-B">B</div-->
</div>
<div class="row-name-container">
<!--div class = "row-number" id = "rowId-1">1</div>
<div class = "row-number" id = "rowId-2">2</div-->
</div>
<div class = "input-cell-container">
<!-- <div class = "cell-row">
<div class = "input-cell code-A" contenteditable = "true" id = "row-1-col-1"></div>
<div class = "input-cell" contenteditable = "true"></div>
</div> -->
</div>
</div>
<div class = "Sheet-Bar">
<div class = "scroller">
<div class = "material-icons icon-left-scroll">arrow_left</div>
<div class = "material-icons icon-right-scroll">arrow_right</div>
</div>
<div class = "material-icons icon-add">add_circle</div>
<div class = "sheet-tab-container">
<div class = "sheet-tab selected">sheet1</div>
</div>
</div>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src = "script.js"></script>
</body>
</html>
146 changes: 146 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
$(document).ready(function (){
//let cellContainer = $("input-cell-container");

for(let i = 1; i <= 100; i++){
let n = i;
let res = "";

while (n > 0) {
let rem = n % 26;
if (rem == 0) {
res = "Z" + res;
n = Math.floor(n / 26) - 1;
}
else {
res = String.fromCharCode(rem - 1 + 65) + res;
n = Math.floor(n / 26);
}
}
let column = $(`<div class="column-number colId-${i}" id="colCode-${res}">${res}</div>`);
$(".column-name-container").append(column);
let row = $(`<div class = "row-number" id = "rowId-${i}">${i}</div>`);
$(".row-name-container").append(row)
}

for(let i = 1; i <= 100; i++){
let row = $(`<div class = "cell-row"></div>`);
for(let j = 1; j <= 100; j++){
//let colcode = $(`colId-${j}`).attr("id").split("-")[1];
let column = $(`<div class = "input-cell" contenteditable = "false" id = "row-${i}-col-${j}"></div>`);
row.append(column);
}
$(".input-cell-container").append(row);
}

$(".align-icon").click(function () {
$(".align-icon.selected").removeClass("selected");
$(this).addClass("selected");
})

$(".style-icon").click(function () {
$(this).toggleClass("selected");
});

$(".input-cell").click(function (ele) {
if(ele.ctrlKey){
let [rowId, colId] = getRowCol(this);
console.log(rowId);
console.log(colId);
if(rowId > 1){
let topCellSelected = $(`#row-${rowId - 1}-col-${colId}`).hasClass("selected");
if (topCellSelected) {
$(this).addClass("top-cell-selected");
$(`#row-${rowId - 1}-col-${colId}`).addClass("bottom-cell-selected");
}
}
// if (rowId > 1) {
// let topCellSelected = $(`#row-${rowId - 1}-col-${colId}`).hasClass("selected");
// if (topCellSelected) {
// $(this).addClass("top-cell-selected");
// $(`#row-${rowId - 1}-col-${colId}`).addClass("bottom-cell-selected");
// }
// }
if (rowId < 100) {
let bottomCellSelected = $(`#row-${rowId + 1}-col-${colId}`).hasClass("selected");
if (bottomCellSelected) {
$(this).addClass("bottom-cell-selected");
$(`#row-${rowId + 1}-col-${colId}`).addClass("top-cell-selected");
}
}
if (colId > 1) {
let leftCellSelected = $(`#row-${rowId}-col-${colId - 1}`).hasClass("selected");
if (leftCellSelected) {
$(this).addClass("left-cell-selected");
$(`#row-${rowId}-col-${colId - 1}`).addClass("right-cell-selected");
}
}
if (colId < 100) {
let rightCellSelected = $(`#row-${rowId}-col-${colId + 1}`).hasClass("selected");
if (rightCellSelected) {
$(this).addClass("right-cell-selected");
$(`#row-${rowId}-col-${colId + 1}`).addClass("left-cell-selected");
}
}
}
else{
$(".input-cell.selected").removeClass("selected");
$(this).addClass("selected");
}
$(this).addClass("selected");
changeHeader(this);
})

$(".input-cell").dblclick(function () {
$(".input-cell.selected").removeClass("selected");
$(this).addClass("selected");
$(this).attr("contenteditable", "true");
$(this).focus();
})

$(".input-cell").blurr(function () {
$(".input-cell.selected").attr("contenteditable", "false");
})

$(".input-cell-container").scroll(function () {
$(".column-name-container").scrollLeft(this.scrollLeft);
$(".row-name-container").scrollTop(this.scrollTop);
})

});

function getRowCol(ele) {
let idArray = $(ele).attr("id").split("-");
rowId = parseInt(idArray[1]);
colId = parseInt(idArray[3]);
return [rowId, colId];
}

function updateCell(property, value){
$(".input-cell.selected").each(function () {
$(this).css(property, value);
});
}

$(".icon-bold").click(function () {
if ($(this).hasClass("selected")) {
updateCell("font-weight", "", true);
} else {
updateCell("font-weight", "bold", false);
}
});

$(".icon-italic").click(function () {
if ($(this).hasClass("selected")) {
updateCell("font-style", "", true);
} else {
updateCell("font-style", "italic", false);
}
});

$(".icon-underline").click(function () {
if ($(this).hasClass("selected")) {
updateCell("text-decoration", "", true);
} else {
updateCell("text-decoration", "underline", false);
}
});
Loading

0 comments on commit 7753060

Please sign in to comment.