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.

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.
English German
diggit Ziffer
initial values Startwerte
to conduct umsetzten
respectively beziehungsweise
to compraise umfassen

Volkan Demir

  • en/modul/m291/learningunits/lu07/aufgaben/09.txt
  • Zuletzt geändert: 2025/05/20 12:58
  • von vdemir