{"id":5831,"date":"2024-01-11T16:40:00","date_gmt":"2024-01-11T16:40:00","guid":{"rendered":"https:\/\/codehim.com\/?p=5831"},"modified":"2024-01-22T14:45:09","modified_gmt":"2024-01-22T09:45:09","slug":"simple-calculator-in-html-code","status":"publish","type":"post","link":"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/","title":{"rendered":"Simple Calculator in HTML Code"},"content":{"rendered":"

This code snippet helps you to create a simple calculator in HTML. It comes with a flat UI design with all basic calculation methods. Users can easily do addition, subtraction, multiplication, and division operations on numbers.<\/p>\n

This simple calculator comes with a virtual Numpad. It doesn’t support keyboard keys to enter numbers. However, you can use the mouse (or tap) to enter numbers to perform mathematics operations. Moreover, you can highly customize it with additional CSS.<\/p>\n

How to Create Simple HTML Calculator<\/h2>\n

1. First of all, create the HTML structure for the calculator as follows:<\/p>\n

<div class=\"calculator\">\r\n  <div class=\"input\" id=\"input\"><\/div>\r\n  <div class=\"buttons\">\r\n    <div class=\"operators\">\r\n      <div>+<\/div>\r\n      <div>-<\/div>\r\n      <div>\u00d7<\/div>\r\n      <div>\u00f7<\/div>\r\n    <\/div>\r\n    <div class=\"leftPanel\">\r\n      <div class=\"numbers\">\r\n        <div>7<\/div>\r\n        <div>8<\/div>\r\n        <div>9<\/div>\r\n      <\/div>\r\n      <div class=\"numbers\">\r\n        <div>4<\/div>\r\n        <div>5<\/div>\r\n        <div>6<\/div>\r\n      <\/div>\r\n      <div class=\"numbers\">\r\n        <div>1<\/div>\r\n        <div>2<\/div>\r\n        <div>3<\/div>\r\n      <\/div>\r\n      <div class=\"numbers\">\r\n        <div>0<\/div>\r\n        <div>.<\/div>\r\n        <div id=\"clear\">C<\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"equal\" id=\"result\">=<\/div>\r\n  <\/div>\r\n<\/div>\r\n<\/pre>\n
2. After that, style the calculator interface using the following CSS.<\/p>\n
.calculator {\r\n  padding: 20px;\r\n  max-width: 440px;\r\n  margin: 10px auto;\r\n  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);\r\n  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);\r\n  border-radius: 1px;\r\n}\r\n.input {\r\n  border: 1px solid #ddd;\r\n  border-radius: 1px;\r\n  height: 60px;\r\n  padding-right: 15px;\r\n  padding-top: 10px;\r\n  text-align: right;\r\n  margin-right: 6px;\r\n  font-size: 2.5rem;\r\n  overflow-x: auto;\r\n  transition: all .2s ease-in-out;\r\n}\r\n.input:hover {\r\n  border: 1px solid #bbb;\r\n  -webkit-box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2);\r\n  box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2);\r\n}\r\n.operators div {\r\n  display: inline-block;\r\n  border: 1px solid #bbb;\r\n  border-radius: 1px;\r\n  width: 80px;\r\n  text-align: center;\r\n  padding: 10px;\r\n  margin: 20px 4px 10px 0;\r\n  cursor: pointer;\r\n  background-color: #ddd;\r\n  transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s;\r\n}\r\n.operators div:hover {\r\n  background-color: #ddd;\r\n  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);\r\n  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);\r\n  border-color: #aaa;\r\n}\r\n.operators div:active {\r\n  font-weight: bold;\r\n}\r\n.leftPanel {\r\n  display: inline-block;\r\n}\r\n.numbers div {\r\n  display: inline-block;\r\n  border: 1px solid #ddd;\r\n  border-radius: 1px;\r\n  width: 80px;\r\n  text-align: center;\r\n  padding: 10px;\r\n  margin: 10px 4px 10px 0;\r\n  cursor: pointer;\r\n  background-color: #f9f9f9;\r\n  transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s;\r\n}\r\n.numbers div:hover {\r\n  background-color: #f1f1f1;\r\n  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);\r\n  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);\r\n  border-color: #bbb;\r\n}\r\n.numbers div:active {\r\n  font-weight: bold;\r\n}\r\ndiv.equal {\r\n  display: inline-block;\r\n  border: 1px solid #3079ED;\r\n  border-radius: 1px;\r\n  width: 17%;\r\n  text-align: center;\r\n  padding: 127px 10px;\r\n  margin: 10px 6px 10px 0;\r\n  vertical-align: top;\r\n  cursor: pointer;\r\n  color: #FFF;\r\n  background-color: #4d90fe;\r\n  transition: all .2s ease-in-out;\r\n}\r\ndiv.equal:hover {\r\n  background-color: #307CF9;\r\n  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);\r\n  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);\r\n  border-color: #1857BB;\r\n}\r\ndiv.equal:active {\r\n  font-weight: bold;\r\n}\r\n<\/pre>\n
3. Finally, add the following JavaScript code before closing the body tag and done.<\/p>\n
\"use strict\";\r\n\r\nvar input = document.getElementById('input'), \/\/ input\/output button\r\n  number = document.querySelectorAll('.numbers div'), \/\/ number buttons\r\n  operator = document.querySelectorAll('.operators div'), \/\/ operator buttons\r\n  result = document.getElementById('result'), \/\/ equal button\r\n  clear = document.getElementById('clear'), \/\/ clear button\r\n  resultDisplayed = false; \/\/ flag to keep an eye on what output is displayed\r\n\r\n\/\/ adding click handlers to number buttons\r\nfor (var i = 0; i < number.length; i++) {\r\n  number[i].addEventListener(\"click\", function(e) {\r\n\r\n    \/\/ storing current input string and its last character in variables - used later\r\n    var currentString = input.innerHTML;\r\n    var lastChar = currentString[currentString.length - 1];\r\n\r\n    \/\/ if result is not diplayed, just keep adding\r\n    if (resultDisplayed === false) {\r\n      input.innerHTML += e.target.innerHTML;\r\n    } else if (resultDisplayed === true && lastChar === \"+\" || lastChar === \"-\" || lastChar === \"\u00d7\" || lastChar === \"\u00f7\") {\r\n      \/\/ if result is currently displayed and user pressed an operator\r\n      \/\/ we need to keep on adding to the string for next operation\r\n      resultDisplayed = false;\r\n      input.innerHTML += e.target.innerHTML;\r\n    } else {\r\n      \/\/ if result is currently displayed and user pressed a number\r\n      \/\/ we need clear the input string and add the new input to start the new opration\r\n      resultDisplayed = false;\r\n      input.innerHTML = \"\";\r\n      input.innerHTML += e.target.innerHTML;\r\n    }\r\n\r\n  });\r\n}\r\n\r\n\/\/ adding click handlers to number buttons\r\nfor (var i = 0; i < operator.length; i++) {\r\n  operator[i].addEventListener(\"click\", function(e) {\r\n\r\n    \/\/ storing current input string and its last character in variables - used later\r\n    var currentString = input.innerHTML;\r\n    var lastChar = currentString[currentString.length - 1];\r\n\r\n    \/\/ if last character entered is an operator, replace it with the currently pressed one\r\n    if (lastChar === \"+\" || lastChar === \"-\" || lastChar === \"\u00d7\" || lastChar === \"\u00f7\") {\r\n      var newString = currentString.substring(0, currentString.length - 1) + e.target.innerHTML;\r\n      input.innerHTML = newString;\r\n    } else if (currentString.length == 0) {\r\n      \/\/ if first key pressed is an opearator, don't do anything\r\n      console.log(\"enter a number first\");\r\n    } else {\r\n      \/\/ else just add the operator pressed to the input\r\n      input.innerHTML += e.target.innerHTML;\r\n    }\r\n\r\n  });\r\n}\r\n\r\n\/\/ on click of 'equal' button\r\nresult.addEventListener(\"click\", function() {\r\n\r\n  \/\/ this is the string that we will be processing eg. -10+26+33-56*34\/23\r\n  var inputString = input.innerHTML;\r\n\r\n  \/\/ forming an array of numbers. eg for above string it will be: numbers = [\"10\", \"26\", \"33\", \"56\", \"34\", \"23\"]\r\n  var numbers = inputString.split(\/\\+|\\-|\\\u00d7|\\\u00f7\/g);\r\n\r\n  \/\/ forming an array of operators. for above string it will be: operators = [\"+\", \"+\", \"-\", \"*\", \"\/\"]\r\n  \/\/ first we replace all the numbers and dot with empty string and then split\r\n  var operators = inputString.replace(\/[0-9]|\\.\/g, \"\").split(\"\");\r\n\r\n  console.log(inputString);\r\n  console.log(operators);\r\n  console.log(numbers);\r\n  console.log(\"----------------------------\");\r\n\r\n  \/\/ now we are looping through the array and doing one operation at a time.\r\n  \/\/ first divide, then multiply, then subtraction and then addition\r\n  \/\/ as we move we are alterning the original numbers and operators array\r\n  \/\/ the final element remaining in the array will be the output\r\n\r\n  var divide = operators.indexOf(\"\u00f7\");\r\n  while (divide != -1) {\r\n    numbers.splice(divide, 2, numbers[divide] \/ numbers[divide + 1]);\r\n    operators.splice(divide, 1);\r\n    divide = operators.indexOf(\"\u00f7\");\r\n  }\r\n\r\n  var multiply = operators.indexOf(\"\u00d7\");\r\n  while (multiply != -1) {\r\n    numbers.splice(multiply, 2, numbers[multiply] * numbers[multiply + 1]);\r\n    operators.splice(multiply, 1);\r\n    multiply = operators.indexOf(\"\u00d7\");\r\n  }\r\n\r\n  var subtract = operators.indexOf(\"-\");\r\n  while (subtract != -1) {\r\n    numbers.splice(subtract, 2, numbers[subtract] - numbers[subtract + 1]);\r\n    operators.splice(subtract, 1);\r\n    subtract = operators.indexOf(\"-\");\r\n  }\r\n\r\n  var add = operators.indexOf(\"+\");\r\n  while (add != -1) {\r\n    \/\/ using parseFloat is necessary, otherwise it will result in string concatenation :)\r\n    numbers.splice(add, 2, parseFloat(numbers[add]) + parseFloat(numbers[add + 1]));\r\n    operators.splice(add, 1);\r\n    add = operators.indexOf(\"+\");\r\n  }\r\n\r\n  input.innerHTML = numbers[0]; \/\/ displaying the output\r\n\r\n  resultDisplayed = true; \/\/ turning flag if result is displayed\r\n});\r\n\r\n\/\/ clearing the input on press of clear\r\nclear.addEventListener(\"click\", function() {\r\n  input.innerHTML = \"\";\r\n})\r\n<\/pre>\n
That’s all! hopefully, you have successfully created a simple calculator using this HTML code snippet. If you have any questions or suggestions, let me know by comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This code snippet helps you to create a simple calculator in HTML. It comes with a flat UI design with…<\/p>\n","protected":false},"author":1,"featured_media":5862,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[63],"tags":[216],"class_list":["post-5831","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-css3","tag-calculator"],"acf":[],"yoast_head":"\nSimple Calculator in HTML Code — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a lightweight code snippet to create a simple calculator in HTML. You can view demo and download code snippet.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Simple Calculator in HTML Code — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a lightweight code snippet to create a simple calculator in HTML. You can view demo and download code snippet.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-11T16:40:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T09:45:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2021\/12\/simple-calculator-in-html-code.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"962\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Simple Calculator in HTML Code\",\"datePublished\":\"2024-01-11T16:40:00+00:00\",\"dateModified\":\"2024-01-22T09:45:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/\"},\"wordCount\":152,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2021\/12\/simple-calculator-in-html-code.png\",\"keywords\":[\"Calculator\"],\"articleSection\":[\"HTML5 & CSS3\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/\",\"url\":\"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/\",\"name\":\"Simple Calculator in HTML Code — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2021\/12\/simple-calculator-in-html-code.png\",\"datePublished\":\"2024-01-11T16:40:00+00:00\",\"dateModified\":\"2024-01-22T09:45:09+00:00\",\"description\":\"Here is a lightweight code snippet to create a simple calculator in HTML. You can view demo and download code snippet.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2021\/12\/simple-calculator-in-html-code.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2021\/12\/simple-calculator-in-html-code.png\",\"width\":1280,\"height\":962,\"caption\":\"Simple Calculator in HTML Code\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5 & CSS3\",\"item\":\"https:\/\/codehim.com\/category\/html5-css3\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Simple Calculator in HTML Code\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Simple Calculator in HTML Code — CodeHim","description":"Here is a lightweight code snippet to create a simple calculator in HTML. You can view demo and download code snippet.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/","og_locale":"en_US","og_type":"article","og_title":"Simple Calculator in HTML Code — CodeHim","og_description":"Here is a lightweight code snippet to create a simple calculator in HTML. You can view demo and download code snippet.","og_url":"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-11T16:40:00+00:00","article_modified_time":"2024-01-22T09:45:09+00:00","og_image":[{"width":1280,"height":962,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2021\/12\/simple-calculator-in-html-code.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Simple Calculator in HTML Code","datePublished":"2024-01-11T16:40:00+00:00","dateModified":"2024-01-22T09:45:09+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/"},"wordCount":152,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2021\/12\/simple-calculator-in-html-code.png","keywords":["Calculator"],"articleSection":["HTML5 & CSS3"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/","url":"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/","name":"Simple Calculator in HTML Code — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2021\/12\/simple-calculator-in-html-code.png","datePublished":"2024-01-11T16:40:00+00:00","dateModified":"2024-01-22T09:45:09+00:00","description":"Here is a lightweight code snippet to create a simple calculator in HTML. You can view demo and download code snippet.","breadcrumb":{"@id":"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2021\/12\/simple-calculator-in-html-code.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2021\/12\/simple-calculator-in-html-code.png","width":1280,"height":962,"caption":"Simple Calculator in HTML Code"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-html-code\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"HTML5 & CSS3","item":"https:\/\/codehim.com\/category\/html5-css3\/"},{"@type":"ListItem","position":3,"name":"Simple Calculator in HTML Code"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":13554,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/5831","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=5831"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/5831\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/5862"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=5831"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=5831"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=5831"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}