Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- en:modul:m291:learningunits:lu07:aufgaben:09 [2025/05/19 13:15] – vdemir
+++ en:modul:m291:learningunits:lu07:aufgaben:09 [2025/05/20 12:58] (aktuell) – [Assignment G: Implementation of the calculation - 10'] vdemir
@@ Zeile 1: / Zeile 1: @@
-====== LU07.A10 - Basic caluclator simple ======
+====== LU07.A09 - Basic caluclator with methods ======
 ===== Prerequisites  =====
   * Work type: Individual
   * Means of aid: only teaching materials, no websearch, no use of ai.
-  * Timeframe: 40 Minutes
+  * Timeframe: 50 Minutes
   * Expected result: A browser based calulator which can sum up 2 digits in the easiest way.
 ===== Source =====
-  * You can take any script an adjust it to your needs.
+{{ :en:modul:m291:learningunits:lu07:aufgaben:lu06.s08.zip | Take the solution of LU06.S08source-code and extend it}}
 ===== Assignment =====
-This assignment compraises the programming of a tiny caculator for basic calculation operations, meaning two diggit have to be added together. To do the assignment we need two blocks of diggits-buttons, an operation-button for "+" and finally an ENTER-Button to execute the operation respectively to receive the result.
+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.
-===== Assignment A - 3' ======
+Thus, it is basically a similar assignment, but this time by using methods:
-  * A01: Create in Webstorm in your directory **07_methods** a html file and name it correctly **LU07.S09**.
+  * to set values of diggit1, diggit2 and the operator
-  * A02: Copy the structure of the sfc (single file component) from a solution of your choice (in that way we don't have to type it manually --> easier and faster)
+  * to calulate the result
-  * A03: Make sure to have
+  * to reset all values of the variables
+==== Assignment A - 3' =====
+  * 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
-  * A04: Safe it.
+  * A03: Safe it.
-===== Assignment D - Button for diggit 1 - 10' =====
+==== Assignment B - Required methods - 16' ====
-  * B01: Create the buttons 1 to 4 (that shall suffice for our purpose)
+  * B01: method **setDiggit1(number)**: It sets the value of the variable **diggit1** to the clicked number (diggit-block 1).
-  * B02: When clicking on one of them the content will be saved in the variable **diggit1**
+  * 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.
-===== Assignment C - Variables - 5' =====
+  * B04: method **calcResult(op)**: Performes the calculation correspondigly to the chosen operation, e.g. **+**.
-  * C01: A basic calculation **3 + 3  = 6** compraises several variables:
+  * B05: method **reset()**: Sets all variables to the initial values.
-    * diggit1 = 0,
-    * operator = ''
-    * diggit2 = 0,
-    * result
-===== Assignment D - Button for diggit 1 - 10' =====
+==== Assignment C - Variables - 1' ====
-  * D01: Create the second set of buttons 1 to 4 to set the second diggit. (4 of them shall suffice for our purpose)
+  * C01: A basic calculation, e.g. **3 + 3  = 6**, compraises several variables and their initial values:
-  * D02: When clicking on one of them the content will be saved in the variable **diggit2**
+  * C02: Set in the data-area: * diggit1: 0
+  * C03: operator: '+' (default operation is an addition)
+  * C04: diggit2: 0
+  * C05: result: 0
-===== Assignment E
+==== Assignment D - Button for diggit 1 - 10' ====
-  * E01: To execute our addition-operation we finally need a button **ENTER**.
+  * D01: When clicking on the diggit keys of block one the content will be saved in the variable **diggit1**
-  * E02: This enter calls a method calcResult(operator).
+  * D02: But unlike in the previous task, this time the click triggers a method **setDiggit1(dig1)**
-  * E03: Thus the addition is done in the method, correspondingly to the providet operator.
+  * D03: Continue with the other three buttons in the same fashion.
-  * E04: As a result, after pressing the enter button, the result should be displayed in the screen.
+  * D04: Check the result by displaying the content of the variable **diggit1** on the display.
+==== Assignment E - Button the operation - 5' ====
+  * 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.
+==== Assignment F - Button for diggit 2 - 5' ====
+  * 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.
+==== Assignment G: Implementation of the calculation - 10'  ====
+  * 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.
 ===== Solution =====
@@ Zeile 49: / Zeile 71: @@
 ^ English ^ German ^
 | diggit | Ziffer |
-| to suffice | ausreichen |
+| initial values | Startwerte |
-| respectively | beziehungungsweise |
+| to conduct | umsetzten|
+| respectively | beziehungsweise |
 | to compraise | umfassen |
-| several | einige, etliche |