Visual Calculator

About This Space

A fun example of how NodeRun widget appearances can be totally customized, with transition animations giving visual feedback.


Last updated on May 13, 2021

Forked from: /jeff/visual-calculator/

Public Permissions:   View   Open/Fork   Run   Comment  

Visual Calculator

A fun example of how Profound UI widgets can be totally customized.

This calculator is based off of the stateless rich display file template, and illustrates several interesting things that can be done on NodeRun:

  • Setting widget properties in the Designer
  • Setting other widget properties in a CSS file
  • Using CSS transition animations with NodeRun widgets
  • Making key presses perform the same actions as mouse clicks

The way it works is each button (a styled label, actually) employs onmousedown and onmouseup events to call functions in the main JavaScript code. As numbers are typed, they are concatenated together until an operator button (+, -, etc.) is pressed, whereupon the concatenated number is stored and later used after a second number and operator are entered.

CSS transition animations are used to visually indicate which buttons are being pressed.

Be the first to comment:      

Comments

Write Preview Markdown: bold italic code link
Post