{"componentChunkName":"component---src-templates-project-js","path":"/projects/clicky-game","result":{"data":{"site":{"siteMetadata":{"title":"itsHally"}},"markdownRemark":{"html":"<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/d956e0fcc45db33f45fb3b8534958191/cb9f4/clickygame.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 50.67567567567568%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAACZ0lEQVQoz22S20/ScRjG2VrNtgRPVDZFA1Lk5CEUp9MIS0UwBURO/jiIgKl4IDRNm9O17KKLZhfNddNFN50Pq7Ryrgva3Fz9S59+mNravHi2930vPnue7/OV5EsLOSMtoEQu53ypHE2Nhj7PAC6vF3NLK1UaLcFwmFBsmEZzM1q9Ebffh9Pno95kIl8qo6i4BKmsSJwLkNQYm8hJV2umQm1ACMZ4OjbLeijO6mSG9ESGjcQt1ofGmE9MsTie4fXkbd4k0ywlZ7iobUBrEBmGvxxJte4yOdXoTVRWGRmwuxmUyLgqkTDS0kHEFcJzuohoQTGeWgvJHg/WE3k4JXmMtNpQ1zWhEaGHnH9AQyOKSwYCfV6mrHYc9WZmHQHioQSJDhujdjujNwLEglEsViuOji5SbgGlrmHfjEbUPlBzsGhFu+VKLaFIgp+7e3z7keXR4yfMTM/ye3ObvU/fWVtdY35ukd3PX8l++MLy4goKlX7fzCHnCJg7Vqr1YhkhrnuiuJxOer0C44NhZi6oSCtUxNrtxJ1+fPKzpPRqotd6UYtGNKKzY4FKMbKt30truwVHWzOdLj8j/X6cZaUIqjKiLZ0M2Zx0Kwq512UiYrFxSSzzWKDWKL6hUkdAiLGzs83Lt+9ZefCQ6VSazRev2BJ1N3OHhfkltj6+41c2y9z0HOUqndjyMZFzR4UYWRgMsSEk2fD4WQ7GGR6b4GY8TDTsJxRPsBAZ51k0yfPRKRL+YcoOgNUHLv+LrKg2ipHcePPP0SZ+m4k6Cx5hCJXsFLUlJxEED7E2B6n6Su53N+G70kOFpu6o5Zz+AKBPcrtEaUCnAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"screenshot\"\n        title=\"screenshot\"\n        src=\"/static/d956e0fcc45db33f45fb3b8534958191/fcda8/clickygame.png\"\n        srcset=\"/static/d956e0fcc45db33f45fb3b8534958191/12f09/clickygame.png 148w,\n/static/d956e0fcc45db33f45fb3b8534958191/e4a3f/clickygame.png 295w,\n/static/d956e0fcc45db33f45fb3b8534958191/fcda8/clickygame.png 590w,\n/static/d956e0fcc45db33f45fb3b8534958191/efc66/clickygame.png 885w,\n/static/d956e0fcc45db33f45fb3b8534958191/c83ae/clickygame.png 1180w,\n/static/d956e0fcc45db33f45fb3b8534958191/cb9f4/clickygame.png 1903w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<img alt=\"GitHub\" src=\"https://img.shields.io/github/license/itshally/ClickyGame?style=flat-square\">\n<img alt=\"GitHub top language\" src=\"https://img.shields.io/github/languages/top/itshally/ClickyGame?style=for-the-badge\">\n<h1>Clicky Game</h1>\n<p>This is one of my assignments while I was attending a Coding Bootcamp here in Toronto, ON. For this assignment, I have to create a memory game using ReactJS framework. It also has a requirement to break up the application's UI into components, manage component's state, and respond to user events.</p>\n<h2>Tools &#x26; Technologies</h2>\n<ul>\n<li>ReactJS</li>\n<li>Shuffle-array</li>\n<li>jQuery</li>\n<li>AlertifyJS</li>\n</ul>\n<h2>Installation</h2>\n<p>To clone this project to your device, type the <code>code</code> below to your git bash:</p>\n<pre><code>git clone https://github.com/itshally/ClickyGame.git\n</code></pre>\n<p>After cloning the repo, make sure to install all the dependencies before running it locally.</p>\n<pre><code>cd ClickyGame\n\nnpm i\n\nnpm start\n</code></pre>\n<h2>Screenshot</h2>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/d956e0fcc45db33f45fb3b8534958191/cb9f4/clickygame.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 50.67567567567568%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAACZ0lEQVQoz22S20/ScRjG2VrNtgRPVDZFA1Lk5CEUp9MIS0UwBURO/jiIgKl4IDRNm9O17KKLZhfNddNFN50Pq7Ryrgva3Fz9S59+mNravHi2930vPnue7/OV5EsLOSMtoEQu53ypHE2Nhj7PAC6vF3NLK1UaLcFwmFBsmEZzM1q9Ebffh9Pno95kIl8qo6i4BKmsSJwLkNQYm8hJV2umQm1ACMZ4OjbLeijO6mSG9ESGjcQt1ofGmE9MsTie4fXkbd4k0ywlZ7iobUBrEBmGvxxJte4yOdXoTVRWGRmwuxmUyLgqkTDS0kHEFcJzuohoQTGeWgvJHg/WE3k4JXmMtNpQ1zWhEaGHnH9AQyOKSwYCfV6mrHYc9WZmHQHioQSJDhujdjujNwLEglEsViuOji5SbgGlrmHfjEbUPlBzsGhFu+VKLaFIgp+7e3z7keXR4yfMTM/ye3ObvU/fWVtdY35ukd3PX8l++MLy4goKlX7fzCHnCJg7Vqr1YhkhrnuiuJxOer0C44NhZi6oSCtUxNrtxJ1+fPKzpPRqotd6UYtGNKKzY4FKMbKt30truwVHWzOdLj8j/X6cZaUIqjKiLZ0M2Zx0Kwq512UiYrFxSSzzWKDWKL6hUkdAiLGzs83Lt+9ZefCQ6VSazRev2BJ1N3OHhfkltj6+41c2y9z0HOUqndjyMZFzR4UYWRgMsSEk2fD4WQ7GGR6b4GY8TDTsJxRPsBAZ51k0yfPRKRL+YcoOgNUHLv+LrKg2ipHcePPP0SZ+m4k6Cx5hCJXsFLUlJxEED7E2B6n6Su53N+G70kOFpu6o5Zz+AKBPcrtEaUCnAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"clicky game page\"\n        title=\"clicky game page\"\n        src=\"/static/d956e0fcc45db33f45fb3b8534958191/fcda8/clickygame.png\"\n        srcset=\"/static/d956e0fcc45db33f45fb3b8534958191/12f09/clickygame.png 148w,\n/static/d956e0fcc45db33f45fb3b8534958191/e4a3f/clickygame.png 295w,\n/static/d956e0fcc45db33f45fb3b8534958191/fcda8/clickygame.png 590w,\n/static/d956e0fcc45db33f45fb3b8534958191/efc66/clickygame.png 885w,\n/static/d956e0fcc45db33f45fb3b8534958191/c83ae/clickygame.png 1180w,\n/static/d956e0fcc45db33f45fb3b8534958191/cb9f4/clickygame.png 1903w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<h2>License</h2>\n<p>Distributed under the\n<a href=\"https://github.com/itshally/ClickyGame/blob/master/LICENSE\">MIT License</a></p>","id":"5ee41371-39e6-5803-873a-2aa88f11feb3","frontmatter":{"title":"Clicky Game","description":"Created a memory game with React.","preview":"https://itshally.github.io/ClickyGame/","tools":["ReactJS","AlertifyJS","jQuery","shuffle-ray"],"sourceCode":"https://github.com/itshally/ClickyGame/tree/master","keyWords":"clicky game, memory game, reactjs","image":{"childImageSharp":{"fixed":{"src":"/static/d956e0fcc45db33f45fb3b8534958191/986a3/clickygame.png"}}}}}},"pageContext":{"id":"5ee41371-39e6-5803-873a-2aa88f11feb3","previousPostId":"a6851b74-d747-55e4-93e9-ea6f265d4b2f","nextPostId":"fa2e7fdf-3191-5ba2-8978-cde597988601"}},"staticQueryHashes":["143701507"]}