diff --git a/package-lock.json b/package-lock.json
index ad64c59..2e82b97 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "eslint": "8.19.0",
         "eslint-config-prettier": "8.5.0",
         "eslint-plugin-prettier": "4.2.1",
+        "gh-pages": "^5.0.0",
         "html-webpack-plugin": "5.5.0",
         "http-server": "14.1.1",
         "prettier": "2.7.1",
@@ -2444,6 +2445,27 @@
       "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
       "dev": true
     },
+    "node_modules/array-union": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+      "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
+      "dev": true,
+      "dependencies": {
+        "array-uniq": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/async": {
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
@@ -3305,6 +3327,12 @@
       "integrity": "sha512-JER+w+9MV2MBVFOXxP036bLlNOnzbYAWrWU8sNUwoOO69T3w4564WhM5H5atd8VVS8U4vpi0i0kdoYzm1NPQgQ==",
       "dev": true
     },
+    "node_modules/email-addresses": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-5.0.0.tgz",
+      "integrity": "sha512-4OIPYlA6JXqtVn8zpHpGiI7vE6EQOAg16aGnDMIAlZVinnoZ8208tW1hAbjWydgN/4PLTT9q+O1K6AH/vALJGw==",
+      "dev": true
+    },
     "node_modules/emojis-list": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
@@ -3889,6 +3917,32 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/filename-reserved-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz",
+      "integrity": "sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/filenamify": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.3.0.tgz",
+      "integrity": "sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==",
+      "dev": true,
+      "dependencies": {
+        "filename-reserved-regex": "^2.0.0",
+        "strip-outer": "^1.0.1",
+        "trim-repeated": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -4006,6 +4060,20 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/fs-extra": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=6 <7 || >=8"
+      }
+    },
     "node_modules/fs-monkey": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
@@ -4079,6 +4147,40 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/gh-pages": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-5.0.0.tgz",
+      "integrity": "sha512-Nqp1SjkPIB94Xw/3yYNTUL+G2dxlhjvv1zeN/4kMC1jfViTEqhtVz/Ba1zSXHuvXCN9ADNS1dN4r5/J/nZWEQQ==",
+      "dev": true,
+      "dependencies": {
+        "async": "^3.2.4",
+        "commander": "^2.18.0",
+        "email-addresses": "^5.0.0",
+        "filenamify": "^4.3.0",
+        "find-cache-dir": "^3.3.1",
+        "fs-extra": "^8.1.0",
+        "globby": "^6.1.0"
+      },
+      "bin": {
+        "gh-pages": "bin/gh-pages.js",
+        "gh-pages-clean": "bin/gh-pages-clean.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/gh-pages/node_modules/async": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
+      "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==",
+      "dev": true
+    },
+    "node_modules/gh-pages/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -4126,6 +4228,22 @@
         "node": ">=4"
       }
     },
+    "node_modules/globby": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+      "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==",
+      "dev": true,
+      "dependencies": {
+        "array-union": "^1.0.1",
+        "glob": "^7.0.3",
+        "object-assign": "^4.0.1",
+        "pify": "^2.0.0",
+        "pinkie-promise": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
@@ -4810,6 +4928,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+      "dev": true,
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "node_modules/kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -5173,6 +5300,15 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.12.2",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
@@ -5450,6 +5586,36 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pinkie": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+      "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pinkie-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+      "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==",
+      "dev": true,
+      "dependencies": {
+        "pinkie": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -6396,6 +6562,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/strip-outer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
+      "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
+      "dev": true,
+      "dependencies": {
+        "escape-string-regexp": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/style-loader": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
@@ -6548,6 +6726,18 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/trim-repeated": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
+      "integrity": "sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==",
+      "dev": true,
+      "dependencies": {
+        "escape-string-regexp": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
@@ -6643,6 +6833,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -8989,6 +9188,21 @@
       "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
       "dev": true
     },
+    "array-union": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+      "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
+      "dev": true,
+      "requires": {
+        "array-uniq": "^1.0.1"
+      }
+    },
+    "array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
+      "dev": true
+    },
     "async": {
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
@@ -9655,6 +9869,12 @@
       "integrity": "sha512-JER+w+9MV2MBVFOXxP036bLlNOnzbYAWrWU8sNUwoOO69T3w4564WhM5H5atd8VVS8U4vpi0i0kdoYzm1NPQgQ==",
       "dev": true
     },
+    "email-addresses": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-5.0.0.tgz",
+      "integrity": "sha512-4OIPYlA6JXqtVn8zpHpGiI7vE6EQOAg16aGnDMIAlZVinnoZ8208tW1hAbjWydgN/4PLTT9q+O1K6AH/vALJGw==",
+      "dev": true
+    },
     "emojis-list": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
@@ -10092,6 +10312,23 @@
         "flat-cache": "^3.0.4"
       }
     },
+    "filename-reserved-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz",
+      "integrity": "sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ==",
+      "dev": true
+    },
+    "filenamify": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.3.0.tgz",
+      "integrity": "sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==",
+      "dev": true,
+      "requires": {
+        "filename-reserved-regex": "^2.0.0",
+        "strip-outer": "^1.0.1",
+        "trim-repeated": "^1.0.0"
+      }
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -10171,6 +10408,17 @@
       "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
       "dev": true
     },
+    "fs-extra": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      }
+    },
     "fs-monkey": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
@@ -10225,6 +10473,35 @@
       "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
       "dev": true
     },
+    "gh-pages": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-5.0.0.tgz",
+      "integrity": "sha512-Nqp1SjkPIB94Xw/3yYNTUL+G2dxlhjvv1zeN/4kMC1jfViTEqhtVz/Ba1zSXHuvXCN9ADNS1dN4r5/J/nZWEQQ==",
+      "dev": true,
+      "requires": {
+        "async": "^3.2.4",
+        "commander": "^2.18.0",
+        "email-addresses": "^5.0.0",
+        "filenamify": "^4.3.0",
+        "find-cache-dir": "^3.3.1",
+        "fs-extra": "^8.1.0",
+        "globby": "^6.1.0"
+      },
+      "dependencies": {
+        "async": {
+          "version": "3.2.4",
+          "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
+          "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==",
+          "dev": true
+        },
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "dev": true
+        }
+      }
+    },
     "glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -10260,6 +10537,19 @@
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
       "dev": true
     },
+    "globby": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+      "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==",
+      "dev": true,
+      "requires": {
+        "array-union": "^1.0.1",
+        "glob": "^7.0.3",
+        "object-assign": "^4.0.1",
+        "pify": "^2.0.0",
+        "pinkie-promise": "^2.0.0"
+      }
+    },
     "graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
@@ -10761,6 +11051,15 @@
       "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
       "dev": true
     },
+    "jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -11042,6 +11341,12 @@
         "boolbase": "^1.0.0"
       }
     },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true
+    },
     "object-inspect": {
       "version": "1.12.2",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
@@ -11247,6 +11552,27 @@
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true
     },
+    "pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true
+    },
+    "pinkie": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+      "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==",
+      "dev": true
+    },
+    "pinkie-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+      "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==",
+      "dev": true,
+      "requires": {
+        "pinkie": "^2.0.0"
+      }
+    },
     "pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -11965,6 +12291,15 @@
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true
     },
+    "strip-outer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
+      "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "^1.0.2"
+      }
+    },
     "style-loader": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
@@ -12059,6 +12394,15 @@
       "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
       "dev": true
     },
+    "trim-repeated": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
+      "integrity": "sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "^1.0.2"
+      }
+    },
     "tslib": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
@@ -12127,6 +12471,12 @@
         "qs": "^6.4.0"
       }
     },
+    "universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "dev": true
+    },
     "unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
diff --git a/package.json b/package.json
index 2e75919..b9ebf70 100644
--- a/package.json
+++ b/package.json
@@ -25,12 +25,13 @@
     "eslint": "8.19.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-prettier": "4.2.1",
+    "gh-pages": "^5.0.0",
     "html-webpack-plugin": "5.5.0",
     "http-server": "14.1.1",
     "prettier": "2.7.1",
+    "style-loader": "3.3.1",
     "webpack": "5.73.0",
     "webpack-cli": "4.10.0",
-    "webpack-dev-server": "4.9.3",
-    "style-loader": "3.3.1"
+    "webpack-dev-server": "4.9.3"
   }
 }
diff --git a/src/index.js b/src/index.js
index eba52c1..f0eec96 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,85 @@
 import "./css/base.css";
+import Store from "./js/store";
+import View from "./js/view";
 
-import { sayHello } from "./js/utils";
+const store = new Store("mydayapp-js");
+const view = new View();
 
-console.log(sayHello("Hello"));
+const filteredTasks = {
+  "": store.getTasks,
+  pending: store.pendingTasks,
+  completed: store.completedTasks,
+};
+let filter = "";
+
+const controlTasks = function () {
+  // 1) Check hash
+  const { hash } = location;
+  const [_, currentFilter] = hash.split("/");
+
+  filter = currentFilter || "";
+
+  // 2) Render data UI
+  view.renderTasks(filteredTasks[filter].call(store), store.count());
+
+  // 3) Update counter
+  view.updateCounter(store.pendingTasksSize());
+};
+
+const controlAddTask = function (value) {
+  // 1) Push value
+  store.insert({ title: value });
+
+  // 2) Render data UI
+  view.renderTasks(filteredTasks[filter].call(store), store.count());
+
+  // 3) Update counter
+  view.updateCounter(store.pendingTasksSize());
+};
+
+const controlRemoveTask = function (id) {
+  // 1) Remove data
+  store.remove(id);
+
+  // 2) Update counter
+  view.updateCounter(store.pendingTasksSize(), store.count());
+};
+
+const controlToggleTask = function (id) {
+  // 1) Update completed state
+  store.toggleTask(id);
+
+  // 2) Update counter
+  view.updateCounter(store.pendingTasksSize());
+};
+
+const controlRemoveCompletedTasks = function () {
+  // 1) Remove completed tasks
+  store.removeCompletedTasks();
+
+  // 2) Render tasks UI
+  view.renderTasks(filteredTasks[filter].call(store), store.count());
+
+  // 3) Update counter
+  view.updateCounter(store.pendingTasksSize());
+};
+
+const controlEditTask = function (id, value) {
+  // 1) Update task
+  store.update(id, { title: value });
+
+  // 2) Render tasks
+  view.renderTasks(filteredTasks[filter].call(store), store.count());
+};
+
+const init = function () {
+  window.addEventListener("load", controlTasks);
+  window.addEventListener("hashchange", controlTasks);
+  view.handleAddTask(controlAddTask);
+  view.handleRemoveTask(controlRemoveTask);
+  view.handleToggleTask(controlToggleTask);
+  view.handleRemoveCompletedTasks(controlRemoveCompletedTasks);
+  view.handleFilterTasks();
+  view.handleEditMode(controlEditTask);
+};
+init();
diff --git a/src/js/store.js b/src/js/store.js
new file mode 100644
index 0000000..61f43d8
--- /dev/null
+++ b/src/js/store.js
@@ -0,0 +1,72 @@
+export default class Store {
+  _tasks = [];
+  localStorageKey;
+
+  constructor(localStorageKey) {
+    this.localStorageKey = localStorageKey;
+    if (!localStorage.getItem(localStorageKey))
+      localStorage.setItem(localStorageKey, "[]");
+    this._tasks = JSON.parse(localStorage.getItem(localStorageKey));
+  }
+
+  getTasks() {
+    return this._tasks;
+  }
+
+  pendingTasks() {
+    return this._tasks.filter((t) => !t.completed);
+  }
+
+  completedTasks() {
+    return this._tasks.filter((t) => t.completed);
+  }
+
+  pendingTasksSize() {
+    return this._tasks.filter((t) => !t.completed).length;
+  }
+
+  find(id) {
+    const task = this._taskstasks.find((t) => t.id.toString() === id);
+    return task;
+  }
+
+  insert({ id = Date.now().toString(), title, completed = false }) {
+    this._tasks.push({ id, title, completed });
+    this._updateLocalStorage();
+  }
+
+  remove(id) {
+    const index = this._tasks.findIndex((t) => t.id.toString() === id);
+    if (index === -1) return;
+    this._tasks.splice(index, 1);
+    this._updateLocalStorage();
+  }
+
+  update(id, task) {
+    const index = this._tasks.findIndex((t) => t.id.toString() === id);
+    if (index === -1) return;
+    this._tasks[index] = { ...this._tasks[index], ...task };
+    this._updateLocalStorage();
+  }
+
+  toggleTask(id) {
+    const task = this._tasks.find((t) => t.id.toString() === id);
+    if (!task) return;
+    task.completed = !task.completed;
+    this._updateLocalStorage();
+  }
+
+  removeCompletedTasks() {
+    const newTasks = this._tasks.filter((t) => !t.completed);
+    this._tasks = newTasks;
+    this._updateLocalStorage();
+  }
+
+  count() {
+    return this._tasks.length;
+  }
+
+  _updateLocalStorage() {
+    localStorage.setItem(this.localStorageKey, JSON.stringify(this._tasks));
+  }
+}
diff --git a/src/js/utils.js b/src/js/utils.js
index a985c08..0f2e71e 100644
--- a/src/js/utils.js
+++ b/src/js/utils.js
@@ -1,3 +1,24 @@
-export const sayHello = (text) => {
-  return text;
+export const createTaskItem = function (task) {
+  const listItem = document.createElement("li");
+  const listItemView = document.createElement("div");
+  const listItemToggle = document.createElement("input");
+  const listItemTitle = document.createElement("label");
+  const listItemDestroy = document.createElement("button");
+  const listItemInputEdit = document.createElement("input");
+
+  listItem.className = task.completed ? "completed" : "";
+  listItem.dataset.id = task.id;
+  listItemView.className = "view";
+  listItemToggle.className = "toggle";
+  listItemToggle.type = "checkbox";
+  listItemToggle.checked = task.completed;
+  listItemTitle.textContent = task.title;
+  listItemDestroy.className = "destroy";
+  listItemInputEdit.className = "edit";
+  listItemInputEdit.value = task.title;
+
+  listItem.append(listItemView, listItemInputEdit);
+  listItemView.append(listItemToggle, listItemTitle, listItemDestroy);
+
+  return listItem;
 };
diff --git a/src/js/view.js b/src/js/view.js
new file mode 100644
index 0000000..d65321b
--- /dev/null
+++ b/src/js/view.js
@@ -0,0 +1,120 @@
+import { createTaskItem } from "./utils";
+
+export default class View {
+  constructor() {
+    this.mainEl = document.querySelector(".main");
+    this.footerEl = document.querySelector(".footer");
+    this.todoListEl = document.querySelector(".todo-list");
+    this.newTodoInputEl = document.querySelector(".new-todo");
+    this.todoCountEl = document.querySelector(".todo-count");
+    this.clearCompletedEl = document.querySelector(".clear-completed");
+    this.filtersEl = document.querySelector(".filters");
+  }
+
+  renderTasks(tasks, show = true) {
+    if (!show) {
+      this.mainEl.classList.add("hidden");
+      this.footerEl.classList.add("hidden");
+      return;
+    } else {
+      this.mainEl.classList.remove("hidden");
+      this.footerEl.classList.remove("hidden");
+    }
+
+    this.todoListEl.innerHTML = "";
+    tasks.forEach((task) => {
+      const taskItem = createTaskItem(task);
+      this.todoListEl.appendChild(taskItem);
+    });
+  }
+
+  updateCounter(counter) {
+    this.todoCountEl.innerHTML = `<strong>${counter}</strong> item${
+      counter === 1 ? "" : "s"
+    } left`;
+  }
+
+  handleAddTask(handler) {
+    this.newTodoInputEl.addEventListener("change", ({ target }) => {
+      const value = target.value.trim();
+      if (value === "") return;
+      handler(value);
+      target.value = "";
+    });
+  }
+
+  handleRemoveTask(handler) {
+    this.todoListEl.addEventListener("click", ({ target }) => {
+      if (!target.classList.contains("destroy")) return;
+      const li = target.closest("li");
+      const { id } = li.dataset;
+
+      handler(id);
+
+      li.remove();
+    });
+  }
+
+  handleToggleTask(handler) {
+    this.todoListEl.addEventListener("click", ({ target }) => {
+      if (!target.classList.contains("toggle")) return;
+      const li = target.closest("li");
+      const { id } = li.dataset;
+      handler(id);
+      li.classList.toggle("completed");
+    });
+  }
+
+  handleRemoveCompletedTasks(handler) {
+    this.clearCompletedEl.addEventListener("click", handler);
+  }
+
+  handleFilterTasks() {
+    this.filtersEl.addEventListener("click", ({ target }) => {
+      if (!target.closest("li")) return;
+      this.filtersEl
+        .querySelectorAll("a")
+        .forEach((el) => el.classList.remove("selected"));
+
+      target.classList.add("selected");
+    });
+
+    window.addEventListener("load", () => {
+      const { hash } = location;
+
+      this.filtersEl
+        .querySelectorAll("a")
+        .forEach((el) => el.classList.remove("selected"));
+
+      this.filtersEl
+        .querySelector(`a[href='${hash}']`)
+        .classList.add("selected");
+    });
+  }
+
+  handleEditMode(handler) {
+    this.todoListEl.addEventListener("dblclick", ({ target }) => {
+      Array.from(this.todoListEl.children).forEach((el) =>
+        el.classList.remove("editing")
+      );
+      if (!target.closest("label")) return;
+      const li = target.closest("li");
+      const { id } = li.dataset;
+      const inputEdit = li.querySelector(".edit");
+      if (!li) return;
+      li.classList.add("editing");
+      inputEdit.focus();
+
+      inputEdit.addEventListener(
+        "change",
+        (e) => {
+          const value = e.target.value.trim();
+          if (value === "") return;
+          handler(id, value);
+          li.classList.remove("editing");
+        },
+        { once: true }
+      );
+    });
+  }
+}