Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- en:modul:m291:learningunits:lu06:aufgaben:08 [2025/05/18 14:04] – angelegt vdemir
+++ en:modul:m291:learningunits:lu06:aufgaben:08 [2025/05/20 13:37] (aktuell) – vdemir
@@ Zeile 1: / Zeile 1: @@
-====== LU06.A08 - Events - basic calculator - TBD ======
+====== LU06.A08 - Events - basic calculator ======
 ===== Prerequisites  =====
   * Work type: Individual
   * Means of aid: only teaching materials, no websearch, no use of ai.
-  * Timeframe: 30 Minutes
+  * Timeframe: 20 Minutes
-  * Expected result: Changing the colour of a area which the reactiing to events e.g.
+  * Expected result: A browser based calulator which can sum up 2 digits in the easiest way.
-    * simple-click
-    * mouseover
-    * mouse.right-click
-    * mouse-left-click
-    * mouse-middle-click
 ===== Source =====
-  * [[https://www.w3schools.com/vue/tryit.php?filename=tryvue_v-on_changeColor|Source-code for the assignment]]
+  * You can take any script an adjust it to your needs.
-===== Assignments  ======
+===== Assignment =====
-The idea of this assignment is to exercise on the one hand the four basic events, and on the other hand the increment and decrement-operators with various step-sizes. As a base for our exercise we are goint to change the appearance of html-visual-elements such as background colour. Your result should look as following
+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 and a operation-button "+" to execute the operation respectively to receive the result.
-{{:en:modul:m291:learningunits:lu06:aufgaben:lu06.s07_5.png?500|Result of the assignment A-D}}
+===== Assignment A - 3' ======
+  * A01: Create in Webstorm in your directory **06_methods** a html file and name it correctly **LU06.S08**.
+  * 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)
+  * A03: Make sure to have
+    * the assignment number <h1>-titel and
+    * the description in <h3>-format
+  * A04: Safe it.
-==== Assignment A ====
+===== Assignment B - Variables - 2' =====
-  - Test the code example provided to you: When moving the mouse over a list food elements each element must change the backgroundcolour to grey.
+  * B01: To make an addition work in our VUE instance we need threee variables with the corresponding initial values
-  - Make sure that you have the title <h1>  and have the correctl filename: **lu06.s07.html**
+    * diggit1:0
-  - After moving the mouse over the colour area the background-colour should change randomly. Behind this effect there is a sophisticated Math-Operation.
+    * diggit2:0
-  - Replace the math-method with a **simple increment** operation with **step-size 1**.
+    * result:0
-  - Start with the **colour value of 0**.
-==== Assignment B ====
+===== Assignment C - Button for diggit 1 - 5' =====
-  - Add another area for the a **right-click** event.
+  * C01: Create the buttons 1 to 4 (that shall suffice for our purpose)
-  - Start with a **colour value of 120**
+  * C02: When clicking on one of them the content will be saved in the variable **diggit1** with the corresponding number 1-4, meaning when clicking the 1, the variable diggit will be set with 1.
-  - Decrement **step-size is 2**
-==== Assignment C ====
+===== Assignment D - Button for diggit 2 - 3' =====
-  - Add another area for the a **left-click** event.
+  * D01: Create the second set of buttons 1 to 4 to set the second diggit. (4 of them shall suffice for our purpose)
-  - Start with a **colour value of 240**
+  * D02: When clicking on one of them the content will be saved in the variable **diggit2**
-  - Increment **step-size is 5**
-==== Assignment C ====
+===== Assignment E: Implementation of the calculation - 5'  =====
-  - Add another area for the a **left-click** event.
+  * E01: To execute our addition-operation we finally need a button **Operator**-button.
-  - Start with a **colour value of 240**
+  * E02: Clicking this operator-Button adds diggit1 to diggit2 and displays the result (result = diggit1 + diggit2)
-  - Increment **step-size is 5**
+===== Assignment F: Reset button - 5'  =====
+  * F01: Create finally a **reset**-button which sets all value to the initial ones.
+  * F02: Meaning clicking on the reset-button uses: result=0, diggit1=0, diggit2=0
-==== Assignment D ====
-  - Add another area for the a **mouseover** event.
-  - Start with a **colour value of 360**
-  - Decrement **step-size is 10**
-==== Assignment E ====
-  - Add to all four textareas a mouse-middle event which resets all colour to the initial values.
-  - **Hint**: To get the initial values, you need to store te values in separately in the first place: either in 4 variables or in a array with all four initial values.
 ===== Solution =====
@@ Zeile 57: / Zeile 49: @@
 ===== Vocabulary =====
 ^ English ^ German ^
-| to compraise | beinhalten |
+| diggit | Ziffer |
-| sophisticated | raffiniert, anspruchsvoll |
+| initial values | Startwerte |
-| appearance | Erscheinung |
+| to suffice | ausreichen |
+| respectively | beziehungsweise |
+| to compraise | umfassen |
+| several | einige, etliche |
 ----
 [[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir