adding favico and custom title

index.html

@@ -7,6 +7,10 @@
     <title>Ascii art painter</title>
     <meta name="description" content="AScii art painter" />
     <meta name="author" content="Legonzaur" />
+    <link
+      rel="shortcut icon"
+      href="https://convertico.com/images/1593195068.3365/725687107208740904[1].ico"
+    />
     <link
       href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"
       rel="stylesheet"

js/script.js

@@ -1,5 +1,7 @@
 const content = document.getElementById("content");
 
+const title = document.querySelector("title");
+
 var pencil = "o";
 
 var fontSize = parseFloat(
@@ -14,17 +16,36 @@ var width = test.getBoundingClientRect().width;
 var drawGrid = [];
 
 const drawHistory = {
-  forwardData: [],
+  __forwardData: [],
-  backwardData: [],
+  __backwardData: [],
+  get forwardData() {
+    return this.__forwardData;
+  },
+  get backwardData() {
+    return this.__backwardData;
+  },
+  set forwardData(value) {
+    this.__forwardData = value;
+    title.innerHTML = `B:${this.__backwardData.length} F:${this.__forwardData.length}`;
+  },
+  set backwardData(value) {
+    this.__backwardData = value;
+  },
   forwards: function () {
     if (this.forwardData[0]) {
       this.backwardData.unshift(JSON.stringify(drawGrid));
+      title.innerHTML = `B:${this.__backwardData.length} F:${
+        this.__forwardData.length - 1
+      }`;
       return JSON.parse(this.forwardData.shift());
     }
   },
   backwards: function () {
     if (this.backwardData[0]) {
       this.forwardData.unshift(JSON.stringify(drawGrid));
+      title.innerHTML = `B:${this.__backwardData.length - 1} F:${
+        this.__forwardData.length
+      }`;
       return JSON.parse(this.backwardData.shift());
     }
   },