SOURCE CODE: JavaScript Calculator Widget

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
  <title>JavaScript Calculator Widget | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="widget Uize.Widget.Calculator"/>
  <meta name="description" content="The calculator widget gives you all the functions you'd expect: division, multiplication, addition, subtraction, square root, memory, and percent."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href=""/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>
  <link rel="stylesheet" href="../css/widget.calculator.css"/>


<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    JavaScript Calculator Widget
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/javascript-calculator-widget.html" class="buttonLink">SOURCE</a></div>

  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, an instance of <a href="../reference/Uize.Widget.Calculator.html"><code>Uize.Widget.Calculator</code></a> is used to wire up a basic JavaScript calculator widget. The widget provides the basic functions you'd expect from an easy-to-use pocket calculator: division, multiplication, addition, subtraction, square root, a memory feature, and a versatile percent function that supports operations like <code>15 + 12%</code> (15 increased by 12%), <code>5000 - 2.3%</code> (5000 reduced by 2.3%), <code>50 * 85%</code> (85% of 50), and <code>85% 50 =</code> (85% of 50). Operations are automatically completed, as expected (e.g. with <code>2 x 3 + 4 =</code>, <code>2 x 3</code> is completed when addition is triggered). You can use your regular keyboard to enter values <b>and</b> trigger operators - click in the display to focus the entry field and start typing. The corresponding buttons on the calculator keypad will be higlighted as you type. For appreciators of CSS, the characters in the display are styled using the CSS3 <code>text-shadow</code> property to produce an LCD / neon glow. This can be seen in browsers that support this property, such as Safari 4.x and Google Chrome 3.x. Finally, buttons are disabled whenever the actions they would trigger would not be valid. Play around for a while and you'll see. Try getting the square root of <code>-1</code>.</p>

  <center id="page-calculator">
    <!-- calculator widget's UI HTML gets dynamically inserted in here -->

  <center id="page-launcherButton" style="padding-top:10px;"></center>

<!-- JavaScript code to make the HTML "come alive" -->

<script type="text/javascript">

Uize.require (
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = = UizeSite.Page.Example ({evaluator:function (code) {eval (code)}});

    /*** add calculator widget instance ***/
      page.addChild (

    /*** add the launcher button ***/
      page.addChild (
          action:function () {
              'width=240, height=314, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no'
            ).focus ()

    /*** wire up the page widget ***/
      page.wireUi ();