Calculator for Your Website

You can use this calculator on your own website for free. Download the pocket calculator source files or copy the following HTML code and paste it into your website or blog. The zip file contains all related files to run the calculator locally on your computer or on your web server.

Calculator HTML Code

<!--
The MIT License (MIT)

Permission is hereby granted, free of charge, to any person obtaining a copy 
of this software and associated documentation files (the "Software"), to deal 
in the Software without restriction, including without limitation the rights 
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 
copies of the Software, and to permit persons to whom the Software is 
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all 
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->

<link href="https://mczak.com/code/calculator/css/calculator.css" rel="stylesheet" />

<div class="calculator">
 <div class="u4 display">
  <div class="display-inner">
   <div class="display-text" data-bind="text: display">
   </div>
  </div>
 </div>

<button id="calculator-button-c" class="u1 calcbutton button-red" data-bind="click: clear">c</button>
 <button id="calculator-button-backspace" class="u1 calcbutton button-backspace button-gray" data-bind="click: backspace">⇤</button>
 <button id="calculator-button-negate" class="u1 calcbutton button-gray" data-bind="click: negate">±</button>
 <button id="calculator-button-รท" class="u1 calcbutton button-gray" data-bind="click: operator">÷</button>
 <button id="calculator-button-7" class="u1 calcbutton button-gray" data-bind="click: number">7</button>
 <button id="calculator-button-8" class="u1 calcbutton button-gray" data-bind="click: number">8</button>
 <button id="calculator-button-9" class="u1 calcbutton button-gray" data-bind="click: number">9</button>
 <button id="calculator-button-x" class="u1 calcbutton button-gray" data-bind="click: operator">x</button>
 <button id="calculator-button-4" class="u1 calcbutton button-gray" data-bind="click: number">4</button>
 <button id="calculator-button-5" class="u1 calcbutton button-gray" data-bind="click: number">5</button>
 <button id="calculator-button-6" class="u1 calcbutton button-gray" data-bind="click: number">6</button>
 <button id="calculator-button--" class="u1 calcbutton button-gray" data-bind="click: operator">-</button>
 <button id="calculator-button-1" class="u1 calcbutton button-gray" data-bind="click: number">1</button>
 <button id="calculator-button-2" class="u1 calcbutton button-gray" data-bind="click: number">2</button>
 <button id="calculator-button-3" class="u1 calcbutton button-gray" data-bind="click: number">3</button>
 <button id="calculator-button-+" class="u1 calcbutton button-gray" data-bind="click: operator">+</button>
 <button id="calculator-button-0" class="u2 calcbutton button-gray" data-bind="click: number">0</button>
 <button id="calculator-button-." class="u1 calcbutton button-gray" data-bind="click: number">.</button>
 <button id="calculator-button-=" class="u1 calcbutton button-blue" data-bind="click: operator">=</button>            
 <a href="https://mczak.com/code/calculator/" target="_blank">Calculator For Your Website</a>
</div>

// Helper variable declarations
    var self = this,
        decimalMark = ".",
        sum = 0,
        prevOperator;

// Define default values
    self.display = ko.observable("0");
    self.isShowingResult = ko.observable(false);

// Callback for each number button
    self.number = function (item, event) {   
        var button = event.target.innerText || event.target.textContent;

// If a result has been shown, make sure we
        // clear the display before displaying any new numbers
        if (self.isShowingResult()) {
            self.clearDisplay();
            self.isShowingResult(false);
        }

// Make sure we only add one decimal mark
        if (button == decimalMark && self.display().indexOf(decimalMark) > -1)
            return;

// Make sure that we remove the default 0 shown on the display
        // when the user press the first number button
        var newValue = (self.display() === "0" && button != decimalMark) ? button : self.display() + button; 
        // Update the display
        self.display(newValue);

};

// Callback for each operator button
    self.operator = function (item, event) {
        var button = event.target.innerText || event.target.textContent;
        // Only perform calculation if numbers
        // has been entered since last operator button was pressed
        if (!self.isShowingResult()) {
            // Perform calculation
            switch (prevOperator) {
                case "+":
                    sum = sum + parseFloat(self.display(), 10);
                    break;
                case "-":
                    sum = sum - parseFloat(self.display(), 10);
                    break;
                case "x":
                    sum = sum * parseFloat(self.display(), 10);
                    break;
                case "÷":
                    sum = sum / parseFloat(self.display(), 10);
                    break;
                default:
                    sum = parseFloat(self.display(), 10);
            };
      }

// Avoid showing a result until you have at least
        // two terms to perform calculation on
        if (prevOperator)
            self.display(sum);

// Make sure we don't try to calculate with the equal sign
        prevOperator = (button === "=") ? null : button;
        // Always set the calculator into showing result state 
        // after an operator button has been pressed
        self.isShowingResult(true);
    };

// Callback for negating a number
    self.negate = function () {
        // Disable the negate button when showing a result
        if (self.isShowingResult() || self.display() === "0")
            return;

var newValue = (self.display().substr(0, 1) === "-") ? self.display().substr(1) : "-" + self.display();
        self.display(newValue);
    };

// Callback for each backspace button
    self.backspace = function (item, event) {
        // Disable backspace if the calculator is shown a result
        if (self.isShowingResult())
            return;

// Remove the last character, and make the display zero when
        // last character is removed
        if (self.display().length > 1) {
            self.display(self.display().substr(0, self.display().length - 1));
        } else {
            self.clearDisplay();
        }
    };

// Clear the entire calculator
    self.clear = function () {
        prevOperator = null;
        self.clearDisplay();
        sum = 0;
    };

// Clear just the display
    self.clearDisplay = function () {
        self.display("0");
    };
};

// Apply knockout bindings
ko.applyBindings(new Calculator());

// Enable keyboard controll
(function () {
    // Key codes and their associated calculator buttons
    var calculatorKeys = {
        48: "0", 49: "1", 50: "2", 51: "3", 52: "4", 53: "5", 54: "6",
        55: "7", 56: "8", 57: "9", 96: "0", 97: "1", 98: "2", 99: "3",
        100: "4", 101: "5", 102: "6", 103: "7", 104: "8", 105: "9",
        106: "x", 107: "+", 109: "-", 110: ".", 111: "÷", 8: "backspace",
        13: "=", 46: "c", 67: "c"
    };

// Helper function to fire an event on an element
    function fireEvent(element, event) {
        if (document.createEvent) {
            // Dispatch for firefox + others
            var evt = document.createEvent("HTMLEvents");
            evt.initEvent(event, true, true);
            return !element.dispatchEvent(evt);
        } else {
            // Dispatch for IE
            var evt = document.createEventObject();
            return element.fireEvent('on' + event, evt)
        }
    }

// Helper functions to add/remove HTML-element classes
    // as IE didn't support the classList property prior to IE10
    function hasClass(ele, cls) {
        return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
    }

function addClass(ele, cls) {
        if (!hasClass(ele, cls)) ele.className += " " + cls;
    }

function removeClass(ele, cls) {
        if (hasClass(ele, cls)) {
            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
            ele.className = ele.className.replace(reg, ' ');
        }
    }

// Callback for every key stroke
    var keycallback = function (e) {
        // Check if the key was one of our calculator keys
        if (e.keyCode in calculatorKeys) {
            // Get button-element associated with key
            var element = document.getElementById("calculator-button-" + calculatorKeys[e.keyCode]);
            // Simulate button click on keystroke
            addClass(element, "active");
            setTimeout(function () { removeClass(element, "active"); }, 100);
            // Fire click event
            fireEvent(element, "click");
        }
    }

// Attach a keyup-event listener on the document
    if (document.addEventListener) {
        document.addEventListener('keyup', keycallback, false);
    } else if (document.attachEvent) {
        document.attachEvent('keyup', keycallback);
    }

})();
</script>

If this HTML code doesn't work on your website, you can download and modify it or try the IFrame version.

IFrame Code

Additional Sources and Information

The code presented on this page is based on a calculator software published by Ideaviate AB on the GitHub software platform. In this calculator software the JavaScript library Knockout is used.

All three sources were published under the MIT license and can therefore be downloaded and used for free.