{"componentChunkName":"component---node-modules-rocketseat-gatsby-theme-docs-core-src-templates-docs-query-js","path":"/pokedex/assignment","result":{"data":{"mdx":{"id":"fad30845-e15b-5636-b59a-dea5bdea9f4f","excerpt":"Build your own Pokedex In this midcourse project, you'll need to build a pokedex like the one we show in the image below.\nFor that, you´ll need to create from…","fields":{"slug":"/pokedex/assignment/"},"frontmatter":{"title":"","description":null,"image":null,"disableTableOfContents":null},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", {\n    \"id\": \"build-your-own-pokedex\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h1\",\n    \"href\": \"#build-your-own-pokedex\",\n    \"aria-label\": \"build your own pokedex permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Build your own Pokedex\"), mdx(\"p\", null, \"In this midcourse project, you'll need to build a pokedex like the one we show in the image below.\\nFor that, you\\xB4ll need to create from scratch the HTML that will shape each one of the Pokemon cards, style them accordingly\\nand create the necessary scripts to iterate over your stored pokemons and display them on screen. With this project, you're going to\\nhave the chance to put into practice all that you've learnt so far.\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"https://media.giphy.com/media/RimwMAVDbA3CvNk5O0/giphy.gif\",\n    \"alt\": \"Pokedex Demo\"\n  })), mdx(\"p\", null, \"Your task is to help Ash Ketchum from Paleta Town to develop the rest of the application so he can\\ntrack the count of how many Pokemon has he captured so far. In order to do that, you'll need to:\"), mdx(\"h2\", {\n    \"id\": \"html\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#html\",\n    \"aria-label\": \"html permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"HTML\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Write the HTML once, thinking about how your content will be distributed for each one of the cards. Don\\xB4t worry\\nabout the images, follow \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://github.com/mfrcodingproject/Homework/tree/master/pokedex/media\"\n  }, \"this\"), \" link to get all the pokemon thumbnails you might need.\")), mdx(\"h2\", {\n    \"id\": \"css\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#css\",\n    \"aria-label\": \"css permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"CSS\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Assign the classes you might consider to the HTML elements. To make sure you're all good, take into account that\\ninside your \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"style.css\"), \" there should only be classes \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \".class\"), \" and IDs \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"#id\"), \".\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Write your css and try to achieve the look and feel of the example. Don\\xB4t worry though if you don't\\nget the exact appearance. The important thing here is that your code is readable and uses the necessary CSS properties.\")), mdx(\"h2\", {\n    \"id\": \"javascript\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#javascript\",\n    \"aria-label\": \"javascript permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Javascript\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Create an array of objects where you store all your pokemons. Each pokemon should have the following properties:\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"thumbnail\"), \": the path to the pokemon\\xB4s image,\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"id\"), \": the id of your pokemon (for instance, the position in the array),\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"name\"), \": the name of your pokemon (for instance, 'Bulbasaur'),\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"type\"), \": An array of strings with each one of the types of each pokemon. (For instance, Bulbasaur is type Plant and Poison)\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"For instance, one pokemon could be stored like this:\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"[\\n  {\\n    thumbnail: 'media/bulbasaur.png',\\n    id: 1,\\n    name: 'Bulbasaur',\\n    type: ['Plant', 'Poison']\\n  }\\n]\\n\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"With that array, you should manipulate the DOM to show on the screen each one of the pokemons, following the structure of the HTML you previously created.\")), mdx(\"h2\", {\n    \"id\": \"suggestions\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#suggestions\",\n    \"aria-label\": \"suggestions permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Suggestions\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Before diving into writing your code, think first in the structure of your document.\\nIdentify each common part of each one of the cards (the image, the number, the name, etc).\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Once spotted, name your css classes accordingly to the content of each container, it'll be easier to\\nreuse your CSS code.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Don't despair if you can't do something, every teacher and student are here to help you. If you feel stuck, please ask\\nany of your classmates and teachers, we'll be super glad to solve any doubts!\")), mdx(\"h2\", {\n    \"id\": \"bonus-points\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#bonus-points\",\n    \"aria-label\": \"bonus points permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Bonus points\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Try to make that hover effect when the cursor is pointing each one of the cards. Remember that the\\npseudo selector needed for this is \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \":hover\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"If you feel creative, try to reproduce the same animation you see on the Gif from above. Even though there are multiple\\nways of doing this, a good option is to use the CSS selector \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"@keyframes\"), \".\")));\n}\n;\nMDXContent.isMDXComponent = true;","headings":[{"depth":1,"value":"Build your own Pokedex"},{"depth":2,"value":"HTML"},{"depth":2,"value":"CSS"},{"depth":2,"value":"Javascript"},{"depth":2,"value":"Suggestions"},{"depth":2,"value":"Bonus points"}]}},"pageContext":{"slug":"/pokedex/assignment/","prev":{"label":"Further reading","link":"/basic-js/further-reading"},"next":{"label":"Introduction","link":"/advanced-js/introduction"},"repositoryEditUrl":"https://github.com/rocketseat/gatsby-themes/tree/main/examples/gatsby-theme-docs/src/docs/pokedex/assignment.mdx","repositoryProvider":"GitHub"}},"staticQueryHashes":["1954253342","2328931024","2501019404","973074209"]}