{"id":25,"date":"2020-06-30T10:24:18","date_gmt":"2020-06-30T10:24:18","guid":{"rendered":"http:\/\/santosh-shah.com\/blog\/basic-simple-calculator\/"},"modified":"2020-06-30T10:24:18","modified_gmt":"2020-06-30T10:24:18","slug":"basic-simple-calculator","status":"publish","type":"post","link":"https:\/\/santosh-shah.com\/blog\/basic-simple-calculator\/","title":{"rendered":"Basic simple calculator"},"content":{"rendered":"<p>In this tutorial I am going to show you how to design a basic simple calculator with few HTML codes. Generally building of calculator seems to be very hard work and lots of code. But it is not true when we have powerful markup language like HTML (Hyper Text Markup Language). It requires some few HTML and inline javascript event that handle the calculation. We can start with building a simple form that include a text box for displaying value and remaining other as input button. Let me show you how easily you can do this stuff without any hard coding.<\/p>\n<h2>How to design basic simple calculator with HTML<\/h2>\n<pre><code>&lt;form name=\"calc\" &gt;\nSolution&lt;input type=\"textfield\" name=\"action\" value=\"\"&gt;\n&lt;br&gt;\n&lt;input type=\"button\" value=\"1\" onClick=\"document.calc.action.value+='1'\"&gt;\n&lt;input type=\"button\" value=\"2\" onClick=\"document.calc.action.value+='2'\"&gt;\n&lt;input type=\"button\" value=\"3\" onClick=\"document.calc.action.value+='3'\"&gt;\n&lt;input type=\"button\" value=\"+\" onClick=\"document.calc.action.value+='+'\"&gt;\n&lt;br&gt;\n&lt;input type=\"button\" value=\"4\" onClick=\"document.calc.action.value+='4'\"&gt;\n&lt;input type=\"button\" value=\"5\" onClick=\"document.calc.action.value+='5'\"&gt;\n&lt;input type=\"button\" value=\"6\" onClick=\"document.calc.action.value+='6'\"&gt;\n&lt;input type=\"button\" value=\"-\" onClick=\"document.calc.action.value+='-'\"&gt;\n&lt;br&gt;\n&lt;input type=\"button\" value=\"7\" onClick=\"document.calc.action.value+='7'\"&gt;\n&lt;input type=\"button\" value=\"8\" onClick=\"document.calc.action.value+='8'\"&gt;\n&lt;input type=\"button\" value=\"9\" onClick=\"document.calc.action.value+='9'\"&gt;\n&lt;input type=\"button\" value=\"*\" onClick=\"document.calc.action.value+='*'\"&gt;\n&lt;br&gt;\n&lt;input type=\"button\" value=\"0\" onClick=\"document.calc.action.value+='0'\"&gt;\n&lt;input type=\"reset\" value=\"Reset\"&gt;\n&lt;input type=\"button\" value=\"=\" onClick=\"document.calc.action.value=eval(document.calc.action.value)\"&gt;\n&lt;\/form&gt;<\/code><\/pre>\n<h3>Basic simple calculator demo<\/h3>\n<p>Solution<\/p>\n<div><\/div>\n<p>In this html markup we are creating a form name called calc. So whenever we have to assign a value from the calculator button we have to use the form name concatenating with the name of text box where the addition, division, multiplication and subtraction are performed. So we will use the <code>onClick=\"document.calc.action.value+='$action_button'\"<\/code> javascript inline action event. See its very easy to embedded the the value of button into the text box. Now we will perform the calculation when user try to click \u201c=\u201d button. This action is also perform by inline javascript event. We will use the <code>onClick=\"document.calc.action.value=eval(document.calc.action.value)\"<\/code> to calculate the numbers in the text box.<\/p>\n<p>Thanks for reading.<br \/>\nHope it helps <img decoding=\"async\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/72x72\/1f642.png\" alt=\"\ud83d\ude42\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial I am going to show you how to design a basic simple calculator with few HTML codes. Generally building of calculator seems to be very hard work and lots of code. But it is not true when we have powerful markup language like HTML (Hyper Text Markup Language). It requires some few [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-25","post","type-post","status-publish","format-standard","hentry","category-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Basic simple calculator - Santosh Kumar Shah<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/santosh-shah.com\/blog\/basic-simple-calculator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Basic simple calculator - Santosh Kumar Shah\" \/>\n<meta property=\"og:description\" content=\"In this tutorial I am going to show you how to design a basic simple calculator with few HTML codes. Generally building of calculator seems to be very hard work and lots of code. But it is not true when we have powerful markup language like HTML (Hyper Text Markup Language). It requires some few [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/santosh-shah.com\/blog\/basic-simple-calculator\/\" \/>\n<meta property=\"og:site_name\" content=\"Santosh Kumar Shah\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-30T10:24:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/72x72\/1f642.png\" \/>\n<meta name=\"author\" content=\"Santosh Kumar Shah\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Santosh Kumar Shah\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/basic-simple-calculator\/\",\"url\":\"https:\/\/santosh-shah.com\/blog\/basic-simple-calculator\/\",\"name\":\"Basic simple calculator - Santosh Kumar Shah\",\"isPartOf\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/basic-simple-calculator\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/basic-simple-calculator\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/72x72\/1f642.png\",\"datePublished\":\"2020-06-30T10:24:18+00:00\",\"author\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f\"},\"breadcrumb\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/basic-simple-calculator\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/santosh-shah.com\/blog\/basic-simple-calculator\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/basic-simple-calculator\/#primaryimage\",\"url\":\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/72x72\/1f642.png\",\"contentUrl\":\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/72x72\/1f642.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/basic-simple-calculator\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/santosh-shah.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Basic simple calculator\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#website\",\"url\":\"https:\/\/santosh-shah.com\/blog\/\",\"name\":\"Santosh Kumar Shah\",\"description\":\"JavaScript Developer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/santosh-shah.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f\",\"name\":\"Santosh Kumar Shah\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g\",\"caption\":\"Santosh Kumar Shah\"},\"description\":\"I am JavaScript developer.\",\"sameAs\":[\"https:\/\/santosh-shah.com\/blog\"],\"url\":\"https:\/\/santosh-shah.com\/blog\/author\/sks7yu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Basic simple calculator - Santosh Kumar Shah","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:\/\/santosh-shah.com\/blog\/basic-simple-calculator\/","og_locale":"en_US","og_type":"article","og_title":"Basic simple calculator - Santosh Kumar Shah","og_description":"In this tutorial I am going to show you how to design a basic simple calculator with few HTML codes. Generally building of calculator seems to be very hard work and lots of code. But it is not true when we have powerful markup language like HTML (Hyper Text Markup Language). It requires some few [&hellip;]","og_url":"https:\/\/santosh-shah.com\/blog\/basic-simple-calculator\/","og_site_name":"Santosh Kumar Shah","article_published_time":"2020-06-30T10:24:18+00:00","og_image":[{"url":"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/72x72\/1f642.png","type":"","width":"","height":""}],"author":"Santosh Kumar Shah","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Santosh Kumar Shah","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/santosh-shah.com\/blog\/basic-simple-calculator\/","url":"https:\/\/santosh-shah.com\/blog\/basic-simple-calculator\/","name":"Basic simple calculator - Santosh Kumar Shah","isPartOf":{"@id":"https:\/\/santosh-shah.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/santosh-shah.com\/blog\/basic-simple-calculator\/#primaryimage"},"image":{"@id":"https:\/\/santosh-shah.com\/blog\/basic-simple-calculator\/#primaryimage"},"thumbnailUrl":"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/72x72\/1f642.png","datePublished":"2020-06-30T10:24:18+00:00","author":{"@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f"},"breadcrumb":{"@id":"https:\/\/santosh-shah.com\/blog\/basic-simple-calculator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/santosh-shah.com\/blog\/basic-simple-calculator\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/santosh-shah.com\/blog\/basic-simple-calculator\/#primaryimage","url":"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/72x72\/1f642.png","contentUrl":"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/72x72\/1f642.png"},{"@type":"BreadcrumbList","@id":"https:\/\/santosh-shah.com\/blog\/basic-simple-calculator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/santosh-shah.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Basic simple calculator"}]},{"@type":"WebSite","@id":"https:\/\/santosh-shah.com\/blog\/#website","url":"https:\/\/santosh-shah.com\/blog\/","name":"Santosh Kumar Shah","description":"JavaScript Developer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/santosh-shah.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f","name":"Santosh Kumar Shah","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g","caption":"Santosh Kumar Shah"},"description":"I am JavaScript developer.","sameAs":["https:\/\/santosh-shah.com\/blog"],"url":"https:\/\/santosh-shah.com\/blog\/author\/sks7yu\/"}]}},"_links":{"self":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts\/25","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/comments?post=25"}],"version-history":[{"count":0,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts\/25\/revisions"}],"wp:attachment":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/media?parent=25"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/categories?post=25"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/tags?post=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}