LU07.A10 - Basic caluclator simple

• Work type: Individual
• Means of aid: only teaching materials, no websearch, no use of ai.
• Timeframe: 40 Minutes
• Expected result: A browser based calulator which can sum up 2 digits in the easiest way.

• You can take any script an adjust it to your needs.

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.

• A01: Create in Webstorm in your directory 07_methods a html file and name it correctly LU07.S09.
• 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 assignmen number in <h1> and
  • the description in <h3>-format
• A04: Safe it.

• B1: A basic calculation 3 + 3 = 6 compraises several variables:
  • diggit1 = 0,
  • operator = ''
  • diggit2 = 0,
  • result

• 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

• 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

• 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.

#### Übungen 21 D - Buttons für diggit1 - 5' * 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.

#### Übungen 21 E - Buttons für diggit2 - 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. * 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>. * A21.10: Geben Sie die jeweiligen Werte der <b> diggit1, diggit2, operator</b> und <b>result</b> am Monitor aus.

Lösung

Volkan Demir