| Nächste Überarbeitung | Vorhergehende Überarbeitung |
| en:modul:m291:learningunits:lu06:loesungen:08 [2025/05/18 14:05] – angelegt vdemir | en:modul:m291:learningunits:lu06:loesungen:08 [2025/05/19 14:41] (aktuell) – vdemir |
|---|
| ====== LU06.S08 - Events - calculator - TBD ====== | ====== LU06.S08 - Events - basic calculator ====== |
| |
| ===== Solution ===== | ===== Assignment ===== |
| {{ :en:modul:m291:learningunits:lu06:loesungen:lu06.s08.zip | Source-code of the solution }} | 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 ==== | ==== Assignment A - 3' ===== |
| - Test the code example provided to you: When moving the mouse over a list food elements each element must change the backgroundcolour to grey. | * A01: Create in Webstorm in your directory **06_methods** a html file and name it correctly **LU06.S08**. |
| - Make sure that you have the title <h1> and have the correctl filename: **lu06.s07.html** | * 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) |
| - After moving the mouse over the colour area the background-colour should change randomly. Behind this effect there is a sophisticated Math-Operation. | * A03: Make sure to have |
| - Replace the math-method with a **simple increment** operation with **step-size 1**. | * the assignment number <h1>-titel and |
| - Start with the **colour value of 0**. | * the description in <h3>-format |
| | * A04: Safe it. |
| |
| ==== Assignment B ==== | ==== Assignment B - Variables - 5' ==== |
| - Add another area for the a **right-click** event. | * B01: To make an addition work in our VUE instance we need threee variables with the corresponding initial values |
| - Start with a **colour value of 120** | * diggit1:0 |
| - Decrement **step-size is 2** | * diggit2:0 |
| | * result:0 |
| |
| ==== Assignment C ==== | ==== Assignment C - Button for diggit 1 - 10' ==== |
| - Add another area for the a **left-click** event. | * C01: Create the buttons 1 to 4 (that shall suffice for our purpose) |
| - Start with a **colour value of 240** | * 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. |
| - Increment **step-size is 5** | |
| |
| ==== Assignment C ==== | ==== Assignment D - Button for diggit 2 - 2' ==== |
| - 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 D ==== | ==== Assignment E: Implementation of the calculation - 10' ==== |
| - Add another area for the a **mouseover** event. | * E01: To execute our addition-operation we finally need a button **Operator**-button. |
| - Start with a **colour value of 360** | * E02: Clicking this operator-Button adds diggit1 to diggit2 and displays the result (result = diggit1 + diggit2) |
| - 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. | |
| |
| | ==== 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 |
| |
| {{:en:modul:m291:learningunits:lu06:loesungen:lu06.s07.png?1200| Solution }} | ===== Solutions ===== |
| | {{:en:modul:m291:learningunits:lu06:loesungen:lu06.s08.png| Source code for the basic calulator as a screenshot}} |
| |
| | {{ :en:modul:m291:learningunits:lu06:loesungen:lu06.s08.zip?1200 | Source code for the basic calulator}} |
| ---- | ---- |
| [[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir | [[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir |
| |