Lernfabrik

Multi-Taschenrechner – Design & Funktion

In dieser Aufgabe siehst du ein Beispiel für einen Taschenrechner mit Bootstrap und JavaScript.

Aufgabe
  • Nutze Bootstrap für Buttons und Layout
  • Verwende Eingabefelder für Zahlen
  • Nutze Buttons für Rechenoperationen
  • Gib das Ergebnis dynamisch aus
Verwendete Bootstrap-Komponenten
  • container – zentriert den Inhalt auf der Seite
  • card – Rahmen für den Taschenrechner
  • form-control – gestaltet Eingabefelder
  • row und col – Layout der Buttons
  • btn und btn-* – Rechen-Buttons
  • alert – Anzeige des Ergebnisses
Beispiel: Funktionierender Taschenrechner

Multi-Taschenrechner

Ergebnis erscheint hier
Anleitung: So baust du den Taschenrechner selbst
1️⃣ Grundstruktur

Lege zuerst einen container an und platziere darin eine card. Diese dient als Rahmen für den Taschenrechner.

2️⃣ Eingabefelder

Erstelle zwei input-Felder vom Typ number. Verwende die Klasse form-control, damit Bootstrap das Design übernimmt.

3️⃣ Ergebnisanzeige

Nutze eine alert-Box, um das Ergebnis anzuzeigen. Dieser Bereich wird später mit JavaScript verändert.

4️⃣ Rechen-Buttons

Lege eine row an und platziere darin vier Buttons mit col-6, damit sie in einem 2×2-Raster erscheinen.

5️⃣ Löschen-Button

Unter den Rechenbuttons platzierst du einen weiteren Button, der später alle Felder zurücksetzt.

💡 Tipp: Baue zuerst nur das Design. Die JavaScript-Funktionen kommen später!

So funktioniert der Button

Jeder Button ist mit JavaScript verbunden. So passiert es, wenn du auf "+" klickst:

Button
+
onclick="rechne('add')"
Funktion
rechne('add')
JavaScript weiß, dass Addieren ausgeführt werden soll
Ergebnis
document.getElementById("ergebnis").innerHTML
Das Ergebnis wird hier angezeigt

💡 Tipp: Für die anderen Buttons änderst du nur den Parameter ('sub', 'mul', 'div') – der Rest bleibt gleich.

Denkaufgabe (Vorbereitung auf JavaScript)
  • Welche HTML-Elemente brauchen eine id?
  • Wie kann JavaScript später auf die Eingabefelder zugreifen?
  • Wie wird das Ergebnis in der alert-Box ausgegeben?
  • Welche Rechenarten müssen programmiert werden?

👉 In der nächsten Einheit programmierst du die Funktionen selbst.