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
   135   136   137   138   139   140   141   142   143   144   145