{"id":7377,"date":"2023-05-08T12:24:22","date_gmt":"2023-05-08T17:24:22","guid":{"rendered":"https:\/\/justinparrtech.com\/JustinParr-Tech\/?p=7377"},"modified":"2023-05-14T02:03:28","modified_gmt":"2023-05-14T07:03:28","slug":"javascript-calculator","status":"publish","type":"post","link":"https:\/\/justinparrtech.com\/JustinParr-Tech\/javascript-calculator\/","title":{"rendered":"Javascript Calculator"},"content":{"rendered":"<p><strong>Update, 5\/14\/2023:\u00a0 Version 3.2<\/strong><\/p>\n<p><strong>Update, 5\/11\/2023:<\/strong>\u00a0 Version 3.1.\u00a0 Original: Version 2<\/p>\n<hr \/>\n<p>I wrote a javascript calculator while I was waiting for something the other day.\u00a0 Here it is:<\/p>\n<p>Permalink: <a href=\"https:\/\/justinparrtech.com\/JustinParr-Tech\/javascriptcalc\/\" target=\"_blank\" rel=\"noopener\">Here<\/a><\/p>\n<p><iframe style=\"height: 460px; width: 710px; background-color: white;\" src=\"https:\/\/justinparrtech.com\/JustinParr-Tech\/javascriptcalc\/\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Technical Details<\/strong><\/span><\/p>\n<ul>\n<li>Single, self-contained HTML file with embedded CSS and Javascript.<\/li>\n<li>The display width is configurable via a variable &#8211; currently 20 digits<\/li>\n<li>The top line is a &#8220;register&#8221; &#8211; normally this would be hidden on a desktop calculator.\u00a0 The two variables, &#8220;register&#8221; and &#8220;display&#8221; are global, which simplifies the architecture.<\/li>\n<li>The buttons are created using a function<\/li>\n<li>Binary math functions are performed by a wrapper that sanitizes the input values and then performs a callback to the underlying math operation &#8211; the pointer to the callback function is passed via onclick.<\/li>\n<li>Unary math functions are basically handled the same as binary operations, where onclick calls a wrapper, and the wrapper executes a callback.<\/li>\n<\/ul>\n<p><span style=\"text-decoration: underline;\"><strong>To Do<\/strong><\/span><\/p>\n<p>(Updated, 5\/11\/2023)<\/p>\n<ul>\n<li><del>Add MS, MR, M+, and M-, which will require a separate register.<\/del><\/li>\n<li><del>Add a configurable table of constants.<\/del><\/li>\n<li><del>Tool tips with enable\/disable button.<\/del><\/li>\n<li>Hex and binary functions, although these might be a separate calculator<br \/>\nUpdate:\u00a0 I think I will just make a dedicated programming calculator the next time I&#8217;m bored :-)<\/li>\n<\/ul>\n<p><span style=\"text-decoration: underline;\"><strong>Funny Story about 3.1 vs 3.2<\/strong><\/span><\/p>\n<p>I uploaded version 3.1, and patted myself on the back for having done such a great job.\u00a0 Right-click, save as HTML, fire it up in Chrome, and&#8230;<strong>everything was rendering twice<\/strong>.<\/p>\n<p>What happened??<\/p>\n<p>The UI is dynamic, but the saved version of the page had BOTH a static copy of the dynamically-generated HTML, as well as the javascript code to dynamically generate the HTML.\u00a0 So every UI element was rendered TWICE.\u00a0\u00a0Worse, if you modify the Javascript at the top of the file to alter the constants or the display size, you would have one copy that&#8217;s correct because it&#8217;s dynamic, but the static copy would still be wrong.<\/p>\n<p>Interestingly, if you View Source and save from there, it won&#8217;t have that problem, but that&#8217;s not what I was after.<\/p>\n<p>To fix this, I changed from document.write to using extra SPANs for each block of UI elements, and setting innerHTML.\u00a0 Despite the fact that saving the file includes a static copy of the HTML, the dynamic code simply overwrites it each time the page is loaded.\u00a0 So if you change a Javascript variable and reload, the dynamic code blows away the static HTML and replaces it with a correct version.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Do you like it?\u00a0 Feel free to copy it.\u00a0 Click the <a href=\"https:\/\/justinparrtech.com\/JustinParr-Tech\/javascriptcalc\/\" target=\"_blank\" rel=\"noopener\">permalink<\/a>.\u00a0 Then right-click the calculator, and select &#8220;Save as html&#8221;.<\/strong><\/p>\n<p>Ideas or suggestions?\u00a0 Please feel free to leave me a comment.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Update, 5\/14\/2023:\u00a0 Version 3.2 Update, 5\/11\/2023:\u00a0 Version 3.1.\u00a0 Original: Version 2 I wrote a javascript calculator while I was waiting for something the other day.\u00a0 Here it is: Permalink: Here \ufeff\ufeff\ufeff\ufeff\ufeff\ufeff &nbsp; Technical Details Single, self-contained HTML file with embedded CSS and Javascript. The display width is configurable via a variable &#8211; currently 20 digits [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7377","post","type-post","status-publish","format-standard","hentry","category-other-stuff"],"_links":{"self":[{"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/posts\/7377","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/comments?post=7377"}],"version-history":[{"count":10,"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/posts\/7377\/revisions"}],"predecessor-version":[{"id":7397,"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/posts\/7377\/revisions\/7397"}],"wp:attachment":[{"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/media?parent=7377"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/categories?post=7377"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/tags?post=7377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}