diff --git a/formula-fx.svg b/formula-fx.svg
new file mode 100644
index 0000000..8713c6e
--- /dev/null
+++ b/formula-fx.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..deecc7d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,107 @@
+
+
+
+
+
+
+
+
+ Excel-Clone
+
+
+
+
Excel Book-1
+
+
+
+
+
+
${res}
`);
+ $(".column-name-container").append(column);
+ let row = $(`${i}
`);
+ $(".row-name-container").append(row)
+ }
+
+ for(let i = 1; i <= 100; i++){
+ let row = $(``);
+ for(let j = 1; j <= 100; j++){
+ //let colcode = $(`colId-${j}`).attr("id").split("-")[1];
+ let column = $(``);
+ 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);
+ }
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..c8ddd2e
--- /dev/null
+++ b/style.css
@@ -0,0 +1,259 @@
+body {
+ margin: 0;
+ overflow: hidden;
+ font-size: 14;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+.Container {
+ height: 100vh;
+}
+
+.Title-Bar {
+ height: 5vh;
+ background-color: #107C41;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: #fff;
+}
+
+.Menu-Bar {
+ height: 5vh;
+ background-color: #107C41;
+ display: flex;
+}
+
+.menu-item {
+ display: flex;
+ align-items: center;
+ padding-left: 10px;
+ padding-right: 10px;
+ color: #fff;
+}
+
+.menu-item.selected {
+ background-color: rgb(231, 231, 231);
+ color: #107C41;
+}
+
+.menu-item:hover {
+ background-color: #0e6836;
+ cursor: pointer;
+}
+
+.menu-item.selected:hover {
+ cursor: default;
+ background-color: rgb(231, 231, 231);
+}
+
+.Menu-Icon-Bar {
+ height: 6vh;
+ background-color: rgb(231, 231, 231);
+ display: flex;
+ align-items: center;
+}
+.selector {
+ height: 25px;
+ width: 150px;
+}
+
+.menu-icon {
+ padding-left: 10px;
+ padding-right: 10px;
+ display: flex;
+}
+
+.menu-icon:hover {
+ background-color: lightgray;
+ cursor: pointer;
+}
+
+.menu-icon.selected {
+ background-color: lightgray;
+}
+
+.Formula-Bar {
+ background-color: rgb(231, 231, 231);
+ height: 5vh;
+ display: flex;
+ align-items: center;
+ padding-left: 10px;
+ padding-right: 10px;
+}
+
+.formula-editor {
+ background-color: white;
+ height: 80%;
+ margin-left: 1px;
+ margin-right: 10px;
+ padding-left: 10px;
+ padding-right: 10px;
+ display: flex;
+ align-items: center;
+}
+
+.fx {
+ width: 30px;
+ height: 80%;
+ margin-left: 20px;
+ padding-right: 4px;
+ padding-left: 4px;
+ display: flex;
+ align-items: center;
+}
+
+.cell-address {
+ width: 70px;
+}
+
+.formula-input {
+ width: calc(100% - 100px);
+ outline-color: #107C41;
+}
+.Data-Container {
+ height: 73vh;
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.select-all {
+ width: 30px;
+ height: 30px;
+ border: 1px solid lightgray;
+}
+
+.column-name-container {
+ width: calc(100vw - 30px);
+ height: 30px;
+ border: 1px solid lightgray;
+ display: flex;
+ overflow: hidden;
+}
+
+.column-number {
+ min-width: 100px;
+ border-right: 1px solid lightgray;
+ font-weight: bold;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.row-name-container {
+ width: 30px;
+ height: calc(73vh - 30px);
+ border: 1px solid lightgray;
+ overflow: hidden;
+}
+
+.row-number {
+ min-height: 25px;
+ border-bottom: 1px solid lightgray;
+ font-weight: bold;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.input-cell-container {
+ width: calc(100vw - 30px);
+ height: calc(73vh - 30px);
+ border: 1px solid lightgray;
+ overflow: scroll;
+}
+
+.cell-row {
+ display: flex;
+}
+
+.input-cell {
+ min-width: 100px;
+ min-height: 25px;
+ border-bottom: 1px solid lightgray;
+ border-right: 1px solid lightgray;
+ outline-color: #107C41;
+}
+
+.input-cell.selected {
+ border: 2px solid #107C41;
+}
+
+.Sheet-Bar {
+ height: 5vh;
+ display: flex;
+ align-items: center;
+}
+
+.scroller {
+ padding-left: 10px;
+ width: 70px;
+}
+
+.icon-left-scroll, .icon-right-scroll{
+ font-size: 30px;
+}
+
+.icon-left-scroll:hover, .icon-right-scroll:hover {
+ background-color: lightgray;
+ cursor: pointer;
+}
+.icon-add {
+ margin-left: 10px;
+ margin-right: 10px;
+ width: 40px;
+}
+
+.icon-add:hover {
+ cursor: pointer;
+ transform: scale(1.5);
+}
+
+.sheet-tab-container {
+ width: calc(100w - 110px);
+ display: flex;
+}
+
+.sheet-tab {
+ padding-left: 10px;
+ padding-right: 10px;
+ display: flex;
+ width: 80px;
+ align-items: center;
+ justify-content: center;
+ font-weight: 600;
+ border-right: 1px solid lightgray;
+}
+
+.sheet-tab:hover {
+ cursor: default;
+}
+
+.icon-add {
+ color: #107c41;
+ margin-left: 10px;
+ margin-right: 10px;
+ width: 40px;
+}
+.sheet-tab.selected{
+ border-bottom: 4px solid#107c41;
+}
+
+.input-cell.top-cell-selected{
+ border-top: none;
+}
+
+.input-cell.bottom-cell-selected{
+ border-bottom: 1px solid lightgray;
+}
+
+.input-cell.right-cell-selected{
+ border-right: 1px solid lightgray;
+}
+
+.input-cell.left-cell-selected{
+ border-left: none;
+}
\ No newline at end of file