calc82: Devlog #7 21/07/2026

calc82: because calculators are for everyone

This devlog follows the introduction of an actual user interface to my calculator.

🌟 New functionality summary

• Grid of calculator buttons
• Different button output when modifiers pressed
• Navigation buttons work
• Calculator resembles a real calculator

👇 Button handling

The calculator needed buttons resembling that of the Casio to fulfil my purpose.

Buttons are dynamically built from an array, which defines their labels and actions. This allows easy changes.
For most buttons, the area surrounding the button also acts as a clickable area for better touch input. However, I didn’t find an easy way to do this for the navigation buttons (which are positioned off the grid).

🎨 CSS

CSS Grid allows a 2D layout system based on rows and columns. It has been supported by all major browsers since October 2017.

CSS Grid was used, as it allows consistent positioning across browsers. In addition, relative units were used to prevent resizing the calculator from affecting it. This should make it easier to make dynamic sizing in the future.

🗒️ Notes

Accessibility
<button>s are preferred over clickable <div>s because they work with screen readers and legacy browsers. However, I also made the surrounding elements clickable for a better touch experience. Also, keyboard input will make use significantly easier for computer users.
Aesthetics
The CSS applied so far is purely functional. In the future, I will improve the aesthetics of the calculator through CSS - but for now, this barebones look makes development easier and more focused.

📈 Next steps

The todo list was getting too empty, so it has been updated with new tasks
Immediate:

• Add remaining functions
• Add keyboard shortcuts

Medium:

• Add menu system and settings
• Multi-line calculation (Ans) and setting variables
• Implement polar/rectangualr conversion
• Add other modes (STAT, VERIFY)
• Add

Long-term:

• Create a test suite to ensure there is no unwanted behaviour
• Ship :)