MF Calculator Popup

This widget is a small function providing a responsive calculator popup for your webpages, supporting simple maths such as 1+1 and (1+1)*2 and supporting plus, minus, multiple, divide, percentages and curved brackets.

The widget also has the option to show the results converted to different units (lengths, weights, areas and basic temperatures).

Implementation

html

<link rel='stylesheet preload prefetch' as='style' href='https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined'>
<link rel='stylesheet preload prefetch' as='style' href='https://methodfish.com/Download/MFCalculatorPopup/files/latest/css/mf-calculator-popup.css'>
<script src='https://methodfish.com/Download/MFCalculatorPopup/files/latest/js/mf-calculator-popup.js'></script>

js ::  popup the calculator

const isInputEditable = navigator.userAgent.includes('Windows');
const showCalcKeypad = window.matchMedia('(pointer: coarse)').matches;
const standAloneMode = false;

MFCalculatorPopup(isInputEditable, showCalcKeypad, standAloneMode);

standAloneMode is for stand alone popups (PWAs) that don't need the titlebar.

Keyboard vs non-keyboard devices

The widget allows you to show either a small calculator with just the input and answers, or you can include a keyboard for environments that might otherwise place the device keyboard in the way of the UI.

On a keyboard enabled device, start with const showCalcKeypad = window.matchMedia('(pointer: coarse)').matches; or just const showCalcKeypad=false; in MFCalculatorPopup(isInputEditable, showCalcKeypad, isStandalone):

On a touch screen device needing an overlay keyboard, start with const showCalcKeypad=false; (this will have the popup include a keypad so that the device keyboard doesn't get in the way).

Pre-requisites:

The function requires the .css file included, and the fonts material-icons and material-icons-outlined to work

Memory

The function uses localStorage to remember if you wanted to use conversions

Stand-alone App

This script will also support being a PWA using stand-alone mode, as seen with demo-pwa.html, allowing you to install the calculator onto your desktop/home page and then use it as a stand-alone app. To install the PWA, run the demo and pop it out - then look for Install icon in the browser location-bar.

Pop out the demo:

Windows Chrome:

Windows Edge:

Once installed - simply pin the icon to the taskbar and you have a conversions calculator ready and easy to find every time.