Added font size and font family formatting

shivamgupta57121 · May 15, 2021 · d4747e6 · d4747e6
1 parent ffa8f2c
commit d4747e6
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 7 deletions.
diff --git a/activity/formatting.js b/activity/formatting.js
@@ -3,6 +3,8 @@ let addressElem = document.querySelector(".address");
 let bold = document.querySelector(".fa-bold");
 let italic = document.querySelector(".fa-italic");
 let underline = document.querySelector(".fa-underline");
+let fontSize = document.querySelector(".font-size");
+let fontFamily = document.querySelector(".font-family");
 
 bold.addEventListener("click", function () {
     // ui elemnt
@@ -61,6 +63,26 @@ underline.addEventListener("click", function () {
         cellObj.isUnderline = true;
     }
 });
+fontSize.addEventListener("change", function () {
+    let cfontSize = fontSize.value;
+    let uiCell = getcell();
+    let { rid, cid } = getRIdCIdfromAddress();
+    let cellObj = sheetArr[rid][cid];
+    // ui change
+    uiCell.style.fontSize = cfontSize + "px";
+    // cell Object update
+    cellObj.fontSize = cfontSize;
+});
+fontFamily.addEventListener("change", function () {
+    let cfontFamily = fontFamily.value;
+    let uiCell = getcell();
+    let { rid, cid } = getRIdCIdfromAddress();
+    let cellObj = sheetArr[rid][cid];
+    // ui change
+    uiCell.style.fontFamily = cfontFamily;
+    // cell Object update
+    cellObj.fontFamily = cfontFamily;
+});
 
 // to return current cell element
 function getcell() {
@@ -90,6 +112,7 @@ for (let i = 0; i < Allcells.length; i++) {
         // console.log(rid,cid);
         addressElem.value = `${String.fromCharCode(65 + cid)}${rid + 1}`; // to show name of cell in formula section
 
+        // tool bar
         let cellObj = sheetArr[rid][cid];
         if (cellObj.isBold == true) {
             bold.classList.add("menu-active");
@@ -107,7 +130,8 @@ for (let i = 0; i < Allcells.length; i++) {
         } else {
             underline.classList.remove("menu-active");
         }
-
+        fontSize.value = cellObj.fontSize;
+        fontFamily.value = cellObj.fontFamily;
     });
 }
 Allcells[0].click();
diff --git a/activity/index.html b/activity/index.html
@@ -38,9 +38,13 @@
             <i class="fas fa-underline menu-icon"></i>
         </div>
         <div class="alignment-container">
-            <i class="fas fa-align-left menu-icon"></i>
-            <i class="fas fa-align-justify menu-icon"></i>
-            <i class="fas fa-align-right menu-icon"></i>
+            <i class="fas fa-align-left menu-icon" direct="left"></i>
+            <i class="fas fa-align-justify menu-icon" direct="center"></i>
+            <i class="fas fa-align-right menu-icon" direct="right"></i>
+        </div>
+        <div class="color-container">
+            <input type="color" name="" id="" class="bg-color">
+            <input type="color" name="" id="" class="color">
         </div>
     </div>
     <div class="formula-container">

diff --git a/activity/init.js b/activity/init.js
@@ -38,8 +38,13 @@ for (let i = 0; i < rows; i++) {
 
         let cellObj = {
             isBold: false,
-            // isItalic: false,
-            // isUnderline: false
+            isItalic: false,
+            isUnderline: false,
+            fontSize: 16,
+            fontFamily: "sans-serif",
+            color: "black",
+            bgColor: "lightgreen",
+            halign:"center"
         }
         rowArr.push(cellObj);
     }

diff --git a/activity/menu.css b/activity/menu.css
@@ -36,7 +36,8 @@
 
  .nos-container,
  .formatting-container,
- .alignment-container {
+ .alignment-container,
+ .color-container {
      display: flex;
      justify-content: space-evenly;
      align-items: center;