Search this site:
Enterprise Search Blog

HTML5 Calculator

Scroll down for notes, or View / Source for detailed comments.

 
1 2 3 +
4 5 6 -
7 8 9 *
C 0 = /

Notes / General Steps

  • Basic elements drawn with HTML. Our "buttons" are table cells, the <td> element. And we use an input box and div tag for the Display and Register.
  • CSS is used to make the td cells look like buttons! Our CSS is embedded in the header of this file so only one file to worry about.
  • Define event handlers for mouse clicks.
  • Then hookup those event handlers to the buttons.
  • And then... that's it! Once the page is fully loaded, the browser should do the rest of the work. Any event should trigger it's registered handler. There's no "main" or run() to start it.

Do a View / Source if you want to see the CSS and Javascript.

About This App, Copyrights and Open Source Licenses

Copyright 2011 by New Idea Engineering, Inc.

Originally created as an internal teaching app, something more interesting than wiki pages or PowerPoint, and possibly a template for other simple apps.

License:
This is free to use and modify. It's multi-licensed, which means you can decide to treat it as one of: Apache Software 2.0, BSD or Creative Commons license. For the most part you or your company can do almost anything you want with it, except claim that you wrote it, or charge people money to use it, or other nasty things. Lookup the 3 licenses mentioned above if you have questions, or email us (see below).

We'd really appreciate a link back to our site ideaeng.com if you use this, but it's not required under the BSD license. It would also be awesome if you'd share any fixes or improvements with the rest of the world, but again that's not required.

If your organization needs a commercial license for compliance reasons, or you have other issues, please email us at sales@ideaeng.com. We specialize in search and data centric applications.