LU07.A09 - Basic caluclator with methods

• Work type: Individual
• Means of aid: only teaching materials, no websearch, no use of ai.
• Timeframe: 50 Minutes
• Expected result: A browser based calulator which can sum up 2 digits in the easiest way.

Take the solution of LU06.S08source-code and extend it

In LU06.S08 we were programming a basic calulator by manipulation the values directly when clicking the buttons. This is convenient, but limits the possibilities of the calculator significantly. For example handling the divided-by-zero operation can hardly be handled with events only.

Thus, it is basically a similar assignment, but this time by using methods:

• to set values of diggit1, diggit2 and the operator
• to calulate the result
• to reset all values of the variables

• A01: Copy the solution of LU06.s08 and name it LU07.s09.html
• A02: Make sure to have
  • the assignmen number in <h1> and
  • the description in <h3>-format
• A03: Safe it.

• B01: method setDiggit1(number): It sets the value of the variable diggit1 to the clicked number (diggit-block 1).
• B02: method setDiggit2(number): It sets the value of the variable diggit2 to the clicked number (diggit-block 2).
• B03: method setOperator(op): It sets the value of the variable operator to the clicked operation, e.g +. Hint: further operations are possible.
• B04: method calcResult(op): Performes the calculation correspondigly to the chosen operation, e.g. +.
• B05: method reset(): Sets all variables to the initial values.

• C01: A basic calculation, e.g. 3 + 3 = 6, compraises several variables and their initial values:
• C02: Set in the data-area: * diggit1: 0
• C03: operator: '+' (default operation is an addition)
• C04: diggit2: 0
• C05: result: 0

• D01: When clicking on the diggit keys of block one the content will be saved in the variable diggit1
• D02: But unlike in the previous task, this time the click triggers a method setDiggit1(dig1)
• D03: Continue with the other three buttons in the same fashion.
• D04: Check the result by displaying the content of the variable diggit1 on the display.

• E01: When clicking the +-button the content will be saved in the variable operator
• E02: Check the result by displaying the content of the variable operator on the screen.
• Hint: The other three basic operations (subtraktion, multiplication, division) are conducted in the same way.

• F01: When clicking on the button in diggit2-block, the content will be saved in the variable diggit2
• F02: But unlike in the previous task, this time the click triggers a method setDiggit2(dig2)
• F03: Continue with the other three buttons in the same fashion.
• F04: Check the result by displaying the content of the variable diggit2 on the display.

• G01: To execute our addition-operation we finally need a button ENTER. This triggers the method caldResult().
• G02: All relevant variables (diggit1, operator, diggit2) are set know, we are ready to finalize our calculation.
• G03: In the method calcResult we need to execute the calculation bases on the provided operator.
  • If the operator is a + we calculate our result as this.result = this.diggit1 + this.diggit2„ * And subsequently, if the calculator is a minus- the result is calculated as this.result = dthis.diggit1 - this.diggit2 * The Multiplication and the division a conducted in the same fashion. * G04: Finally have the result** displayed on the screen to check the correctness of your efforts.

Lösung

Volkan Demir