From 77530609eddc73469cfe5449e2998f44311f3393 Mon Sep 17 00:00:00 2001 From: Arpit Date: Sun, 29 Aug 2021 14:06:25 +0530 Subject: [PATCH] Initial Commit --- formula-fx.svg | 1 + index.html | 107 ++++++++++++++++++++ script.js | 146 ++++++++++++++++++++++++++++ style.css | 259 +++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 513 insertions(+) create mode 100644 formula-fx.svg create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css 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
+
+
File
+
Home
+
Insert
+
page Layout
+
Formula
+
Data
+
Review
+
View
+
+
+
content_cut
+
content_copy
+
content_paste
+ + +
format_bold
+
format_italic
+
format_underline
+
format_align_left
+
format_align_center
+
format_align_right
+
format_align_justify
+
format_color_fill
+
format_color_text
+
+
+
+
+ + + +
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
arrow_left
+
arrow_right
+
+
add_circle
+
+
sheet1
+
+
+
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..b74251c --- /dev/null +++ b/script.js @@ -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 = $(`
${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