{"componentChunkName":"component---src-templates-post-jsx","path":"/custom-attributes-in-html5","result":{"data":{"mdx":{"frontmatter":{"slug":"custom-attributes-in-html5","title":"Using Custom Attributes in HTML5","date":"20 October, 2019","image":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIBAwb/xAAWAQEBAQAAAAAAAAAAAAAAAAACAAH/2gAMAwEAAhADEAAAAcM1E5OKM//EABcQAAMBAAAAAAAAAAAAAAAAAAECEBH/2gAIAQEAAQUCVscnYL//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAZEAABBQAAAAAAAAAAAAAAAAAAAQIRICH/2gAIAQEABj8ClpqV/8QAGhAAAgMBAQAAAAAAAAAAAAAAAAERIUExcf/aAAgBAQABPyF01DQ9MO0eGx0yT//aAAwDAQACAAMAAAAQ6A//xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAEDAQE/EG3Iaf/EABYRAQEBAAAAAAAAAAAAAAAAAAEAEf/aAAgBAgEBPxADbS//xAAZEAEBAQEBAQAAAAAAAAAAAAABEQAhQTH/2gAIAQEAAT8Qr7Qj8uko1SvXMHhnlMLHznmourzDm//Z","aspectRatio":1.5998843596415149,"src":"/static/93ceead4456160d3d9e8b8bf75cc15e2/57238/htmlCode.jpg","srcSet":"/static/93ceead4456160d3d9e8b8bf75cc15e2/5398f/htmlCode.jpg 200w,\n/static/93ceead4456160d3d9e8b8bf75cc15e2/26a4d/htmlCode.jpg 400w,\n/static/93ceead4456160d3d9e8b8bf75cc15e2/57238/htmlCode.jpg 800w,\n/static/93ceead4456160d3d9e8b8bf75cc15e2/23dde/htmlCode.jpg 1200w,\n/static/93ceead4456160d3d9e8b8bf75cc15e2/526a4/htmlCode.jpg 1600w,\n/static/93ceead4456160d3d9e8b8bf75cc15e2/43152/htmlCode.jpg 5534w","srcWebp":"/static/93ceead4456160d3d9e8b8bf75cc15e2/240ac/htmlCode.webp","srcSetWebp":"/static/93ceead4456160d3d9e8b8bf75cc15e2/04c4c/htmlCode.webp 200w,\n/static/93ceead4456160d3d9e8b8bf75cc15e2/ebea1/htmlCode.webp 400w,\n/static/93ceead4456160d3d9e8b8bf75cc15e2/240ac/htmlCode.webp 800w,\n/static/93ceead4456160d3d9e8b8bf75cc15e2/823f0/htmlCode.webp 1200w,\n/static/93ceead4456160d3d9e8b8bf75cc15e2/9e49e/htmlCode.webp 1600w,\n/static/93ceead4456160d3d9e8b8bf75cc15e2/22372/htmlCode.webp 5534w","sizes":"(max-width: 800px) 100vw, 800px"}}},"excerpt":"A Simple Introduction to Custom Attributes in html5"},"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/* @jsx mdx */\nvar _frontmatter = {\n  \"slug\": \"custom-attributes-in-html5\",\n  \"date\": \"20 October, 2019\",\n  \"dateForSorting\": \"2019-10-19T23:00:00.000Z\",\n  \"title\": \"Using Custom Attributes in HTML5\",\n  \"tags\": [\"HTML5\", \"custom attributes\"],\n  \"excerpt\": \"A Simple Introduction to Custom Attributes in html5\",\n  \"image\": \"/assets/htmlCode.jpg\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\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(\"p\", null, \"Code used in this article \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/faruq2/CustomHtmlAttributes\"\n  }), \"here\"), \" \"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"590px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/93ceead4456160d3d9e8b8bf75cc15e2/d8a4c/htmlCode.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"62.50451752800868%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIBAwb/xAAWAQEBAQAAAAAAAAAAAAAAAAACAAH/2gAMAwEAAhADEAAAAcM1E5OKM//EABcQAAMBAAAAAAAAAAAAAAAAAAECEBH/2gAIAQEAAQUCVscnYL//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAZEAABBQAAAAAAAAAAAAAAAAAAAQIRICH/2gAIAQEABj8ClpqV/8QAGhAAAgMBAQAAAAAAAAAAAAAAAAERIUExcf/aAAgBAQABPyF01DQ9MO0eGx0yT//aAAwDAQACAAMAAAAQ6A//xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAEDAQE/EG3Iaf/EABYRAQEBAAAAAAAAAAAAAAAAAAEAEf/aAAgBAgEBPxADbS//xAAZEAEBAQEBAQAAAAAAAAAAAAABEQAhQTH/2gAIAQEAAT8Qr7Qj8uko1SvXMHhnlMLHznmourzDm//Z')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"html5.png\",\n    \"title\": \"html5.png\",\n    \"src\": \"/static/93ceead4456160d3d9e8b8bf75cc15e2/59653/htmlCode.jpg\",\n    \"srcSet\": [\"/static/93ceead4456160d3d9e8b8bf75cc15e2/de1f9/htmlCode.jpg 148w\", \"/static/93ceead4456160d3d9e8b8bf75cc15e2/9963e/htmlCode.jpg 295w\", \"/static/93ceead4456160d3d9e8b8bf75cc15e2/59653/htmlCode.jpg 590w\", \"/static/93ceead4456160d3d9e8b8bf75cc15e2/2385e/htmlCode.jpg 885w\", \"/static/93ceead4456160d3d9e8b8bf75cc15e2/f35e0/htmlCode.jpg 1180w\", \"/static/93ceead4456160d3d9e8b8bf75cc15e2/d8a4c/htmlCode.jpg 5534w\"],\n    \"sizes\": \"(max-width: 590px) 100vw, 590px\",\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Hey!\")), mdx(\"p\", null, \"In this article, I\\u2019m going to be talking about how you can use custom attributes in your HTML5 code using \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"data-*\"), \".\"), mdx(\"p\", null, \"First of all, I\\u2019m going to talk about why you might need to use custom attributes in your projects.  Until a while back, I never knew about custom attributes mostly because I never had to use them. That was till I was a part of a team that was building a budgeting website. I needed a way to store the original budget allocated to each item in the user\\u2019s list and reference that value when the user wants to edit them. The remaining money left (positive or negative) would then be added to the balance.\"), mdx(\"p\", null, \"I didn\\u2019t have a way to do this but after searching online, I was able to store the original budget allocated to every item in a custom attribute each and change them when I needed to.\"), mdx(\"p\", null, \"Custom attributes are very powerful and immensely useful.\"), mdx(\"p\", null, \"Without further ado, let\\u2019s dive into an example!\"), mdx(\"h2\", null, \"EXAMPLE\"), mdx(\"p\", null, \"In our example, we are going to create an \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"h1 \"), \" element which would have the level of a player as a custom attribute. We would then use a button to increase the level of the player(showing these changes on the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"h1 \"), \" element).\"), mdx(\"p\", null, \"Let\\u2019s get started!\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Create an HTML file with the necessary skeleton code in your preferred code editor.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Next, add an \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"h1 \"), \" element and give it an id of \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"player\")), mdx(\"div\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"html\"\n  }), mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-html\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"\\n \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"<\"), \"h1\"), \" \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-name\"\n  }), \"id\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-value\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"=\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\"), \"player\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\")), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"</\"), \"h1\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")))))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Now, we are going to add a custom attribute. To do so, we'll use the\\nformat: \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"data-AttrName\"), \" where \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"AttrName\"), \" is the name of the custom\\nattribute.\\nOur attribute name is going to be \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\\"level\\\"\"), \" and we'll assign it a value of \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Rookie\")), mdx(\"div\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"html\"\n  }), mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-html\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"<\"), \"h1\"), \" \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-name\"\n  }), \"data-level\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-value\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"=\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\"), \"Rookie\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\")), \" \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-name\"\n  }), \"id\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-value\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"=\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\"), \"player\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\")), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"</\"), \"h1\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\"))))), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"We'll also add a button to level up the player. It should have an id of \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"level up\")), mdx(\"div\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"html\"\n  }), mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-html\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"<\"), \"h1\"), \" \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-name\"\n  }), \"data-level\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-value\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"=\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\"), \"Rookie\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\")), \" \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-name\"\n  }), \"id\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-value\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"=\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\"), \"player\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\")), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"</\"), \"h1\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"<\"), \"button\"), \" \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-name\"\n  }), \"id\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-value\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"=\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\"), \"levelUp\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\")), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), \"Level up\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"</\"), \"button\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\"))))), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"That's it for the HTML.\"))), mdx(\"h3\", null, \"Let's move on to the JavaScript part!\"), mdx(\"p\", null, \"First of all,\\nWe are going to initialise some variables and assign them values\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"javascript\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"const\"), \" player \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"=\"), \" document\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), \"getElementById\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"player\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \";\"), \"\\n \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"const\"), \" levelUp \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"=\"), \" document\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), \"getElementById\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"levelUp\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \";\")))), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"player\"), \" and \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"levelUp\"), \" represent the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"h1\"), \" element and the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"button\"), \" element respectively.\\nWe are now going to access the custom attribute that we made before. All custom attributes are stored in an object called \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"dataset\"), \". So to access the custom attribute \\\"level\\\", we'll do:\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"javascript\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"let\"), \" level \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"=\"), \" player\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), \"dataset\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), \"level\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \";\")))), mdx(\"p\", null, \"So, we have assigned the value of the \\\"level\\\" attribute to a variable called \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"level\"), \".\\nNext, we need to create a function that makes the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"h1\"), \" element display content (the player's level). This function will be called at the beginning of the JS program. We'll call it setPlayerLevel(...because...why not). \"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"javascript\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"function\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), \"setPlayerLevel\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n       player\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), \"innerHTML \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"=\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token template-string\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token template-punctuation string\"\n  }), \"`\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token string\"\n  }), \"Player Level: \"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token interpolation\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token interpolation-punctuation punctuation\"\n  }), \"${\"), \"level\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token interpolation-punctuation punctuation\"\n  }), \"}\")), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token template-punctuation string\"\n  }), \"`\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \";\"), \"\\n   \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \";\")))), mdx(\"p\", null, \"By the way, I used what is called a \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"template literal\"), \" (here - \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"Player level : ${level}\"), \"). It's a new way of assigning values to strings in ES6. You can learn more about it  \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://codeburst.io/javascript-what-are-template-literals-5d08a50ef2e3\"\n  }), \"here\"), \" .\"), mdx(\"p\", null, \" Now, we are going to create a function that will be passed as an event\\nhandler to the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"button\"), \" element.\\nWe'll call this function \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"levelUpPlayer\"), \".\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"javascript\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"function\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), \"levelUpPlayer\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n      level \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"=\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"Warrior\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \";\"), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), \"setPlayerLevel\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \";\"), \"\\n   \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\")))), mdx(\"p\", null, \"This function changes the value of the custom attribute to \\\"Warrior\\\" and calls the setPlayerLevel function. This will make the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"h1\"), \" element display \\\"Warrior\\\" as the new player level.\"), mdx(\"p\", null, \" Finally, we'll pass the event handler to the button.\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"javascript\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"window\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function-variable function\"\n  }), \"onload\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"=\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"function\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n       levelUp\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), \"addEventListener\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"click\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"=>\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), \"levelUpPlayer\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \";\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \";\"), \"\\n   \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), \"\\n   \"))), mdx(\"p\", null, \" \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Note: I recommend you do this after the declaration of the variables as it\\nmakes your code look more organised\"), \".\"), mdx(\"p\", null, \" So using that piece of code, we told the browser, \\\"Anytime the page loads, pass the event handler for the click event to the button\\\". I used an arrow function in that block of code. If you aren't familiar with arrow functions, you can read up about them  \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.w3schools.com/js/js_arrow_function.asp\"\n  }), \"here\"), \".\"), mdx(\"p\", null, \"Don't forget to call the setPlayerLevel function at the beginning of the JS script.\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"javascript\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), \"setPlayerLevel\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \";\")))), mdx(\"p\", null, \"When you run your code, you should see an \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"h1\"), \" and a \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"button\"), \" element on your screen and the content of the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"h1\"), \" element should change when the button is clicked.\"), mdx(\"p\", null, \"You can see the result in this codepen below. I included extra code in comments in case you wanted to take the code a bit further and have the button level up the player through different levels.\"), mdx(\"iframe\", {\n    height: \"265\",\n    style: {\n      \"width\": \"100%\"\n    },\n    scrolling: \"no\",\n    title: \"WNNoYEL\",\n    src: \"https://codepen.io/Gbolahan1/embed/WNNoYEL?height=265&theme-id=0&default-tab=js,result\",\n    frameBorder: \"no\",\n    allowtransparency: \"true\",\n    allowFullScreen: \"true\"\n  }, \"See the Pen \", mdx(\"a\", {\n    href: \"https://codepen.io/Gbolahan1/pen/WNNoYEL\"\n  }, \"WNNoYEL\"), \" by Yusuff Faruq (\", mdx(\"a\", {\n    href: \"https://codepen.io/Gbolahan1\"\n  }, \"@Gbolahan1\"), \") on \", mdx(\"a\", {\n    href: \"https://codepen.io\"\n  }, \"CodePen\"), \".\"), mdx(\"p\", null, \"You can also check the code on my github repo  \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/faruq2/CustomHtmlAttributes\"\n  }), \"here\"), \" .\"));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"custom-attributes-in-html5"}}}