Skip to content

DOKUMENTATION.md

Latest commit

 

History

History
154 lines (105 loc) · 4.75 KB

DOKUMENTATION.md

File metadata and controls

154 lines (105 loc) · 4.75 KB

📄 Dokumentation - Einfacher Rechner

Diese Dokumentation erklärt die Entwicklung eines einfachen Rechners mit HTML, CSS und JavaScript.
Die Anleitung ist Schritt für Schritt aufgebaut und enthält Erklärungen zur Nutzung von GitHub für die Versionskontrolle sowie zur Live-Vorschau mit Visual Studio Code.

📌 Inhalt

  1. Projektübersicht
  2. Vorbereitung
  3. Erstellen der Grundstruktur
  4. Gestaltung mit CSS
  5. Rechenlogik mit JavaScript
  6. Einsatz von GitHub
  7. Nutzung von Live Server in Visual Studio Code
  8. Abschluss und Erweiterungsmöglichkeiten

1️⃣ Projektübersicht

Der einfache Rechner unterstützt die grundlegenden Rechenoperationen:

  • ➕ Addition
  • ➖ Subtraktion
  • ✖️ Multiplikation
  • ➗ Division

Die Bedienung erfolgt über eine benutzerfreundliche Oberfläche mit Live-Berechnung durch JavaScript, ohne dass die Seite neu geladen werden muss.

2️⃣ Vorbereitung

🔹 Voraussetzungen:

  • Ein Texteditor (Visual Studio Code oder anderer)
  • Ein moderner Webbrowser (z. B. Google Chrome oder Firefox)
  • Git für die Versionskontrolle
  • Live Server-Erweiterung für Visual Studio Code, um das Projekt lokal zu testen

🔹 Repository klonen:

Falls du das Projekt direkt von GitHub herunterladen möchtest, kannst du das Repository mit folgendem Befehl klonen:

git clone https://github.com/marti99-lab/github-rechner-tutorial.git

Danach in den Projektordner wechseln:

cd github-rechner-tutorial

3️⃣ Erstellen der Grundstruktur

  • Erstellen einer HTML-Datei (index.html) mit Grundaufbau.
  • Aufbau des Rechners mit Eingabefeldern, Auswahlmenü und Button.
  • Strukturierung des Layouts mit Header, Hauptbereich und Footer.

4️⃣ Gestaltung mit CSS

  • Erstellen der CSS-Datei (styles.css) für das Design.
  • Anpassen von Farben, Schriften und Abständen für eine bessere Benutzeroberfläche.
  • Gestaltung der Ergebnisanzeige für eine übersichtliche Darstellung.

5️⃣ Rechenlogik mit JavaScript

  • Erstellen der JavaScript-Datei (rechnung.js) für die Berechnung.
  • Verarbeiten der Eingabewerte und Durchführung der Rechenoperation.
  • Anzeige des Ergebnisses auf der Webseite, ohne die Seite neu zu laden.

6️⃣ Einsatz von GitHub

🔹 Änderungen hochladen:

Falls du das Projekt bearbeitet hast und es auf GitHub aktualisieren möchtest, kannst du folgende Befehle nutzen:

git add .
git commit -m "Projektstruktur und Berechnung hinzugefügt"
git push origin main

Falls du noch kein Repository hast, erstelle eines auf GitHub und verbinde es:

git remote add origin https://github.com/marti99-lab/github-rechner-tutorial.git
git push -u origin main

7️⃣ Nutzung von Live Server in Visual Studio Code

Um das Projekt ohne einen Webserver direkt zu testen, kannst du die Live Server-Erweiterung in Visual Studio Code nutzen.

🔹 Installation von Live Server:

  1. Öffne Visual Studio Code.
  2. Gehe zu Erweiterungen (Ctrl + Shift + X).
  3. Suche nach "Live Server" und installiere die Erweiterung.
  4. Öffne die Datei index.html.
  5. Klicke unten rechts auf "Go Live" oder nutze das Kontextmenü.

🔹 Jetzt öffnet sich dein Rechner direkt im Browser!

✅ Abschluss und Erweiterungsmöglichkeiten

Erweiterungen des Rechners 🚀

In diesem Update wurden folgende Features hinzugefügt:

🔢 Neue mathematische Funktionen

  • Quadratwurzel (√x)
  • Potenz (x^y)
  • Prozentrechnung (x% von y)
  • Logarithmus (log(x))
  • Sinus, Kosinus, Tangens (sin, cos, tan)

📜 Ergebnis-Historie

  • Speichert bis zu 10 Berechnungen
  • Anzeige unterhalb des Rechners
  • Löschfunktion zum Zurücksetzen der Historie

⌨️ Tastatureingabe

  • Enter-Taste startet Berechnung

🎨 Design-Anpassung

  • Historie hat jetzt die gleiche Breite wie der Rechner für ein einheitliches Layout

📜 Neue Speicherfunktionen (Memory-Funktionen)

M+ (Add to Memory) → Speichert das aktuelle Ergebnis in den Speicher.
M- (Subtract from Memory) → Subtrahiert das aktuelle Ergebnis vom gespeicherten Wert.
MR (Memory Recall) → Ruft den gespeicherten Wert ab und zeigt ihn als Ergebnis an.
MC (Memory Clear) → Löscht den gespeicherten Wert und setzt den Speicher zurück.

Diese Funktionen ermöglichen eine bessere Nachverfolgung und Wiederverwendung von Berechnungen.

✏ Autor: marti99-lab
📅 Erstellt: 2025
📌 Lizenz: Open Source