Basic Calculator App
Create a basic calculator that handles multiple arithmetic operations
In this tutorial, we will create a basic calculator app that handles multiple arithmetic operations and prioritizes multiplication and division. We will use the App Inventor Development Assistant GPT to make this app.
You can download the source code and the HTML file with JavaScript, created by the App Inventor Development Assistant GPT, from the download section at the bottom of the page.
What You Will Learn in This Tutorial
- How to execute JavaScript in a WebView
- How to pass values to and from a WebView
- How to perform loop processing using the “Any Components" block
Components Used
TextBox, Label, Buttons, WebView, HorizontalArrangement
Blocks Used
Global Variable, if then else, List, when any Buttons.Click, for each item in list do,
App Inventor Development Assistant GPT
Prompt
create a calculator app that can perform arithmetic operations. It will handle multiple operations and prioritize multiplication and division within expressions.Reply from GPT
To build a calculator app in MIT App Inventor 2 that handles multiple arithmetic operations and prioritizes multiplication and division, we'll use the WebViewer component and JavaScript logic in an HTML file. App Inventor on its own doesn't natively parse math expressions with operator precedence, so JavaScript is appropriate here.
🔧 App Inventor 2 Component Setup
1. User Interface Components:
* TextBox (InputBox) – for user input (optional if using buttons only).
* Label (ResultLabel) – to display the result.
* Buttons – for digits (0–9), operations (+, -, ×, ÷), C (clear), = (calculate).
* WebViewer (CalcWebViewer) – to handle logic in JavaScript.
* Optionally: VerticalArrangement or TableArrangement for layout.
2. Blocks Editor Logic:
* On button clicks, build the expression and send it to the WebViewer using:
set CalcWebViewer.WebViewString to (expression)
* call CalcWebViewer.EvaluateJavaScript("calculate()")
*
* In CalcWebViewer.WebViewStringChanged, set:
set ResultLabel.Text to CalcWebViewer.WebViewString
*
🌐 HTML + JavaScript (Calculator Logic)
Below is a complete HTML file you will upload as an asset (e.g., calc.html) and load into the WebViewer.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>App Inventor Calculator</title>
<script>
function parseAndEvaluate(expr) {
try {
// Replace App Inventor symbols with JavaScript-compatible ones
expr = expr.replace(/×/g, '*').replace(/÷/g, '/');
// Validate to prevent code injection
if (!/^[\d+\-*/(). ]+$/.test(expr)) return "Invalid input";
// Evaluate expression with correct precedence
let result = eval(expr);
return result;
} catch (e) {
return "Error";
}
}
function calculate() {
const input = window.AppInventor.getWebViewString();
const result = parseAndEvaluate(input);
window.AppInventor.setWebViewString(result.toString());
}
</script>
</head>
<body>
</body>
</html>
🔄 Communication Flow
* User input: Buttons form a string expression (2+3×4-6÷2)
* App Inventor sets WebViewString and calls calculate()
* JavaScript processes the expression using eval() (after cleaning and securing input)
* Result is returned via WebViewString, then displayed in ResultLabel
Would you like help designing the button layout in App Inventor or want me to generate a .aia file structure for this?