{"componentChunkName":"component---src-templates-project-page-index-tsx","path":"/portfolio/js-calculator","result":{"data":{"mdx":{"frontmatter":{"title":"JavaScript Calculator","githubUrl":"https://github.com/learnsometing/odin-project-calculator","websiteUrl":"https://learnsometing.github.io/odin-project-calculator/","mobileCarouselPhotos":null,"tabletCarouselPhotos":null,"carouselPhotos":[{"altText":"Entering a calculation requiring order of operations.","src":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIBAwX/xAAWAQEBAQAAAAAAAAAAAAAAAAACAQP/2gAMAwEAAhADEAAAAcObFOyjFP8A/8QAFxAAAwEAAAAAAAAAAAAAAAAAARARIf/aAAgBAQABBQKM4V//xAAXEQADAQAAAAAAAAAAAAAAAAAAAQID/9oACAEDAQE/AakWbP/EABYRAQEBAAAAAAAAAAAAAAAAAAABEv/aAAgBAgEBPwGVp//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABgQAQEBAQEAAAAAAAAAAAAAAAARASEx/9oACAEBAAE/ISI7I3xj/9oADAMBAAIAAwAAABCPP//EABcRAQEBAQAAAAAAAAAAAAAAAAERAGH/2gAIAQMBAT8QEvMgt3//xAAXEQEBAQEAAAAAAAAAAAAAAAABABEx/9oACAECAQE/ENJA8v/EABkQAQADAQEAAAAAAAAAAAAAAAEAETEhQf/aAAgBAQABPxD35UC3sSuzhckN2dWASf/Z","aspectRatio":1.7455621301775148,"src":"/static/5ad5c2937abddcb18521393704a89e40/b5e24/calculation.jpg","srcSet":"/static/5ad5c2937abddcb18521393704a89e40/2396f/calculation.jpg 295w,\n/static/5ad5c2937abddcb18521393704a89e40/0075a/calculation.jpg 590w,\n/static/5ad5c2937abddcb18521393704a89e40/b5e24/calculation.jpg 1179w,\n/static/5ad5c2937abddcb18521393704a89e40/7ca54/calculation.jpg 1769w,\n/static/5ad5c2937abddcb18521393704a89e40/b56eb/calculation.jpg 2358w,\n/static/5ad5c2937abddcb18521393704a89e40/b41ff/calculation.jpg 3584w","srcWebp":"/static/5ad5c2937abddcb18521393704a89e40/a40b9/calculation.webp","srcSetWebp":"/static/5ad5c2937abddcb18521393704a89e40/25ff1/calculation.webp 295w,\n/static/5ad5c2937abddcb18521393704a89e40/d5fa0/calculation.webp 590w,\n/static/5ad5c2937abddcb18521393704a89e40/a40b9/calculation.webp 1179w,\n/static/5ad5c2937abddcb18521393704a89e40/3fb9c/calculation.webp 1769w,\n/static/5ad5c2937abddcb18521393704a89e40/33164/calculation.webp 2358w,\n/static/5ad5c2937abddcb18521393704a89e40/71fec/calculation.webp 3584w","sizes":"(max-width: 1179px) 100vw, 1179px"}}},"caption":"Enter a calculation"},{"altText":"The number 52 displayed on the calculator after pressing enter","src":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIBAwX/xAAWAQEBAQAAAAAAAAAAAAAAAAACAQP/2gAMAwEAAhADEAAAAcObFOyjFP8A/8QAFxAAAwEAAAAAAAAAAAAAAAAAARARIf/aAAgBAQABBQKM4V//xAAXEQADAQAAAAAAAAAAAAAAAAAAAQID/9oACAEDAQE/AakWbP/EABYRAQEBAAAAAAAAAAAAAAAAAAABEv/aAAgBAgEBPwGVp//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABgQAQEBAQEAAAAAAAAAAAAAAAARASEx/9oACAEBAAE/ISI7I3xj/9oADAMBAAIAAwAAABCPP//EABcRAQEBAQAAAAAAAAAAAAAAAAERAGH/2gAIAQMBAT8QEvMgt3//xAAXEQEBAQEAAAAAAAAAAAAAAAABABEx/9oACAECAQE/ENJA8v/EABkQAQADAQEAAAAAAAAAAAAAAAEAETEhQf/aAAgBAQABPxD35UC3sSuzhckN2dWASf/Z","aspectRatio":1.7455621301775148,"src":"/static/b4aecfda28716faf34a8522a92637d96/b5e24/result.jpg","srcSet":"/static/b4aecfda28716faf34a8522a92637d96/2396f/result.jpg 295w,\n/static/b4aecfda28716faf34a8522a92637d96/0075a/result.jpg 590w,\n/static/b4aecfda28716faf34a8522a92637d96/b5e24/result.jpg 1179w,\n/static/b4aecfda28716faf34a8522a92637d96/7ca54/result.jpg 1769w,\n/static/b4aecfda28716faf34a8522a92637d96/b56eb/result.jpg 2358w,\n/static/b4aecfda28716faf34a8522a92637d96/b41ff/result.jpg 3584w","srcWebp":"/static/b4aecfda28716faf34a8522a92637d96/a40b9/result.webp","srcSetWebp":"/static/b4aecfda28716faf34a8522a92637d96/25ff1/result.webp 295w,\n/static/b4aecfda28716faf34a8522a92637d96/d5fa0/result.webp 590w,\n/static/b4aecfda28716faf34a8522a92637d96/a40b9/result.webp 1179w,\n/static/b4aecfda28716faf34a8522a92637d96/3fb9c/result.webp 1769w,\n/static/b4aecfda28716faf34a8522a92637d96/33164/result.webp 2358w,\n/static/b4aecfda28716faf34a8522a92637d96/71fec/result.webp 3584w","sizes":"(max-width: 1179px) 100vw, 1179px"}}},"caption":"The calculator works!"}],"tags":["CSS","HTML","JavaScript"]},"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 = {\n  \"title\": \"JavaScript Calculator\",\n  \"path\": \"/portfolio/js-calculator\",\n  \"websiteUrl\": \"https://learnsometing.github.io/odin-project-calculator/\",\n  \"githubUrl\": \"https://github.com/learnsometing/odin-project-calculator\",\n  \"cardPhoto\": {\n    \"src\": \"../images/js-calculator/calculation.jpg\",\n    \"altText\": \"Entering a calculation requiring order of operations.\"\n  },\n  \"cardText\": \"A JavaScript calculator that uses the shunting-yard algorithm to implement order of operations.\",\n  \"carouselPhotos\": [{\n    \"src\": \"../images/js-calculator/calculation.jpg\",\n    \"altText\": \"Entering a calculation requiring order of operations.\",\n    \"caption\": \"Enter a calculation\"\n  }, {\n    \"src\": \"../images/js-calculator/result.jpg\",\n    \"altText\": \"The number 52 displayed on the calculator after pressing enter\",\n    \"caption\": \"The calculator works!\"\n  }],\n  \"tags\": [\"CSS\", \"HTML\", \"JavaScript\"],\n  \"date\": \"2019-01-28\"\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 Grid = makeShortcode(\"Grid\");\nvar Typography = makeShortcode(\"Typography\");\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(Grid, {\n    item: true,\n    mdxType: \"Grid\"\n  }, mdx(Typography, {\n    variant: 'body1',\n    className: \"description fade-in\",\n    gutterBottom: true,\n    mdxType: \"Typography\"\n  }, \"The web relies on JavaScript to add rich, dynamic features that aren't otherwise possible with HTML and CSS alone. This project was an exercise in using \", mdx(\"strong\", null, \"JavaScript\"), \"to perform calculations on user input.\")), mdx(Grid, {\n    item: true,\n    mdxType: \"Grid\"\n  }, mdx(Typography, {\n    variant: 'body1',\n    className: \"description fade-in\",\n    gutterBottom: true,\n    mdxType: \"Typography\"\n  }, \"It tokenizes the user input then leverages the\", ' ', mdx(\"strong\", null, \"shunting-yard algorithm\"), \" to perform order of operations. It was challenging to decide how to track changes to the user input and to perform the calculations in the correct order.\")), mdx(Grid, {\n    item: true,\n    mdxType: \"Grid\"\n  }, mdx(Typography, {\n    variant: 'body1',\n    className: \"description fade-in\",\n    gutterBottom: true,\n    mdxType: \"Typography\"\n  }, \"After completing the project on my own, I learned about JavaScript's eval() function, which could have been used instead of the shunting-yard algorithm.\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"/portfolio/js-calculator"}},"staticQueryHashes":["63159454"]}