Hex Calculator - Bootstrap 5 PWA

2021-11-15

A Progressive web app that has features to convert between Hexagonal, Octagonal, Decimal and Binary numbers, as well as adding, subtracting, multiplying and dividing them. I call it the Hex Calculator.

Technologies used:

JavaScript
HTML5
W3CSS
Bootstrap 5

See it live:

LIVE TEST

Github:

SEE CODE

Two iPhones showing a calculator that has special feautures to convert between different base numbers

Features

Progressive Web App compliant, it can be installed to work completely offline as a native app
Convert between the following base numbers: base 16 (Hexagonal), base 10 (Decimal), base 8 (Octagonal) and base 2 (Binary)
Adding, subtracting, multiplying and dividing using the different base numbers.
Dark and light mode that you can toggle via a button.

Using different base numbers

When changing between the base number options, the UI responds accordingly, turning on or off the available buttons for that base number type.

A Gif of an iPhone changing between the base number modes available in the hexagonal calculator

Switching between the Dark and Light mode

The app has two UI themes, a Dark, and a Light one, to switch between them, you use the bottom left corner button.

A Gif of an iPhone changing between the dark and light mode available in the hexagonal calculator

Calculator functions

The app has basic adding, subtracting, multiplying and dividing functions that you can use with the different base number types.

A Gif of an iPhone using the calculator features of the app