Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- en:modul:m291:learningunits:lu07:aufgaben:09 [2025/05/19 13:03] – 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 B - Variables - 5' =====
-  * B1: A basic calculation **3 + 3  = 6** compraises several variables:
-    * **diggit1 = 0**,
-    * **operator = ''**
-    * **diggit2 = 0**,
-    * **result**
-===== Assignment C - Button for diggit 1 - 10' =====
-  * C01: Create the buttons 1 to 4 (that shall suffice for our purpose)
-  * C02: When clicking on one of them the content will be saved in the variable **diggit1**
-===== Assignment D: Button for tbhe operator  - 10'=====
-  * D01: Create a button "1" for the addition-operation.
-  * C02: The variable **operator** is set, when the button was clicked. When clicking on one of them the content will be saved in the variable **diggit1**
-===== Button for diggit2 - 5' =====
-  * C03: Furthermore we need four new buttons for the operation we want to conduct.
-    * **Plus +""
-    * **Minus -**
-    * **Mal* **
-    * **Geteilt /**
-  * C02: When clicking on the operator-button the variable **operator** is being set.
+==== Assignment B - Required methods - 16' ====
+  * 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.
-#### Übungen 21 D - Buttons für diggit1 - 5'
+==== Assignment C - Variables - 1' ====
-* A21.7: Erstellen Sie die Buttons 0 - 9 für die zweite Zahl diggit2. Beim <b>CLICK</b> wird der entsprechende Wert in die Variable <b>diggit2</b> geschrieben.
+  * 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
-#### Übungen 21 E - Buttons für diggit2 - 10'
+==== Assignment D - Button for diggit 1 - 10' ====
-* A21.8: Jetzt brauchen wir noch einen Button <b>RESET</b>, was mittels der Methode <b>reset()</b> die Werte der Variable <b> diggit1, diggit2, operator</b> und <b>result</b> auf 0 setzt.
+  * D01: When clicking on the diggit keys of block one the content will be saved in the variable **diggit1**
-* A21.9: Zum Abschluss brauchen wir noch einen Button <b>CALCULATE</b>, das die Berechnung mittels der Methode  <b>calc()</b> berechnet. Es speichert das Ergebnis in der Variablen <b>result</b>.
+  * D02: But unlike in the previous task, this time the click triggers a method **setDiggit1(dig1)**
-* A21.10: Geben Sie die jeweiligen Werte der  <b> diggit1, diggit2, operator</b> und <b>result</b> am Monitor aus.
+  * 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.
+==== 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 =====
-[[en:modul:m291:learningunits:lu07:loesungen:10|Lösung]]
+[[en:modul:m291:learningunits:lu07:loesungen:09|Lösung]]
 ===== Vocabulary =====
 ^ English ^ German ^
-| ... | ... |
+| diggit | Ziffer |
+| initial values | Startwerte |
+| to conduct | umsetzten|
+| respectively | beziehungsweise |
+| to compraise | umfassen |