====== LU06.A08 - Events - basic calculator ======

===== Prerequisites  =====
  * Work type: Individual
  * Means of aid: only teaching materials, no websearch, no use of ai.
  * Timeframe: 20 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.

===== 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 and a operation-button "+" to execute the operation respectively to receive the result.

===== 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 B - Variables - 2' =====
  * B01: To make an addition work in our VUE instance we need threee variables with the corresponding initial values
    * diggit1:0
    * diggit2:0
    * result:0  

===== Assignment C - Button for diggit 1 - 5' =====
  * 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** with the corresponding number 1-4, meaning when clicking the 1, the variable diggit will be set with 1.

===== Assignment D - Button for diggit 2 - 3' =====
  * D01: Create the second set of buttons 1 to 4 to set the second diggit. (4 of them shall suffice for our purpose)  
  * D02: When clicking on one of them the content will be saved in the variable **diggit2**

===== Assignment E: Implementation of the calculation - 5'  =====
  * E01: To execute our addition-operation we finally need a button **Operator**-button.
  * E02: Clicking this operator-Button adds diggit1 to diggit2 and displays the result (result = diggit1 + diggit2)

===== 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


===== Solution =====
[[en:modul:m291:learningunits:lu06:loesungen:08|Lösung]]

===== Vocabulary =====
^ English ^ German ^ 
| diggit | Ziffer |
| initial values | Startwerte |
| 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