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).

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 environment start with MFCalculatorPopup(true):

On a touch screen with overlay keyboard, start with MFCalculatorPopup(false) to 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

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 isWindows = navigator.userAgent.includes('Windows');
MFCalculatorPopup(isWindows); // windows assumes that a keyboard is attached; non windows assumes no keyboard and therefore a calculator one is painted