Page 140 - KEC Khaitan C5 Flipbook
P. 140
Step-by-Step Instructions
Step 1: Plan the Features
The calculator should:
o Perform basic arithmetic operations (addition, subtraction, multiplication, and
division).
o Have a clear, user-friendly interface with buttons for numbers, operators, and the
equal sign.
o Display results on a screen or output box.
Step 2: Set Up the User Interface
Open App Lab on Code.org.
Go to Code.org > Projects > App Lab.
Design the Layout:
o Add a Text Input Box (ID: display) to show user input and results (set it to read-only).
o Add Buttons for numbers (0-9), operators (+, -, *, /), equal sign (=), and clear (C).
o Assign unique IDs to each button (e.g., btn1, btnPlus, btnEquals, btnClear).
o Arrange buttons in a grid format for ease of use.
Customize the Design:
o Use colors, fonts, and button styles to enhance visual appeal.
o Add labels or placeholders for better clarity.
Step 3: Code the Calculator
Switch to Code Mode to add functionality to buttons.
A. Initialize Variables:
o Set up variables to store user inputs and operators:
var currentInput = ""; // Stores current input
var previousInput = ""; // Stores previous input
var operator = ""; // Stores selected operator
B. Add Event Listeners for Number Buttons:
o Capture number inputs when buttons are clicked:
onEvent("btn1", "click", function() {
currentInput += "1";
setText("display", currentInput);
});
// Repeat for buttons 2-9 and 0
138 Premium Edition-V

