Python – 07 Funktionen und Methoden
Voraussetzungen
Bevor du mit diesem Modul startest, solltest du bereits vertraut sein mit:
- Python – 06 While-Schleifen - while-Schleifen und Eingabevalidierung
Einführung
Funktionen kennst du aus der Mathematik. Man kann sagen: Es handelt sich dabei um Anweisungen, die für bestimmte Eingabewerte entsprechende Rückgabewerte haben¹.
f(x) = x² beispielsweise gibt für jeden Eingabewert x das Quadrat von x als Rückgabewert zurück, also x².
| |
Good to know: Je nach Kontext nennt man Funktionen in der Programmierung auch Methoden. Meinem Empfinden nach geschieht das selten konsistent. Den Begriff Methoden nutzt man eher in der Objektorientierten Programmierung, beim prozeduralen Stil – den wir gerade verfolgen – spricht man von Funktionen. Daher bleiben wir also erst einmal bei dem Begriff “Funktion”.
Zurück zum eigentlichen Thema: Was passiert oben in dem Code? Überlege, recherchiere vorher oder rate:
Funktionen machen das Leben leichter!
Das tolle an Funktionen ist, dass man sie nur einmal anlegen muss und dann immer wieder nutzen kann. Das Beispiel oben ist einfach, vielleicht zu einfach, um eine Funktion dafür zu anlegen? Selbst das ist in mancher Hinsicht sinnvoll, bspw. bei Objektorientierter Programmierung, wenn du Methoden einer Klasse formulierst. Doch so weit müssen wir nicht gehen, das folgende Beispiel sollte ganz schnell deutlich machen, warum es sinnvoll ist:
| |
Diese Funktion berechnet die Fakultät einer Zahl, Beispiel: 5! = 5·4·3·2·1 = 120 Du hast sicher keine Lust, so etwas jedes Mal neu einzugeben. Ist die Funktion einmal sauber implementiert, kannst du sie immer wieder verwenden. Du musst einfach nur die Funktion mit einem passenden Parameter aufrufen.
| |
Was oben nach mathematischer Spielerei aussieht, ist ein sehr mächtiges Konzept. Eine Funktion ist besonders dann hilfreich, wenn sie mithilfe von Parametern auf verschiedene Bedingungen reagieren können muss. Noch ein Beispiel:
| |
Fällt dir etwas an dieser Funktion auf? Es fehlt der return-Befehl! Das bedeutet, dass diese Funktion keinen Wert zurückgibt, sondern nur einen print-Befehl ausgibt. In einfachen Fällen ist das kein Problem, doch in der Regel sollte eine Funktion immer einen Wert zurückgeben. Denn dann kannst du damit weiterarbeiten. Beispiel:
| |
Parameter und Argumente
Der Eingabewert für Funktionen heißt Parameter, bei Methoden nennt man sie auch Argumente. Die Begriffe werden aber oft synonym verwendet, also Funktionen = Methoden und Parameter = Argumente. Wir machen uns da erst mal keine Gedanken. Wichtig ist jedoch das Folgende.
Sei func() eine Funktion in Python, dann gilt:
- func(param) hat den festen Parameter param, dieser muss eingegeben werden.
- func(*opt) hat den optionalen Parameter opt, dieser kann eingegeben werden.
- func(standard=“Mustermensch”) hat den Standardparameter standard. Die Funktion übernimmt den Standardwert, wenn nichts eingetragen wird.
- func(**kwargs) benutzt man, wenn man nicht weiß, wie viele Argumente mitgegeben werden. Der Fall ist etwas komplizierter.
Aufgaben
Aufgabe 1: Grundlagen im Quiz
Lies dich gut ein, recherchiere, probiere aus und beantworte anschließend die folgenden Fragen.
- Analysiere den Codeblock und beantworte anschließend die Fragen.
| |
Aufgabe 2: Funktionen abrufen (Turtle)
In dieser Übung verwenden wir ein Modul namens “turtle”. Dieses Modul ermöglicht uns, Vorgänge zu visualisieren.
- Probiere den Code unten aus. Verändere die Werte, um herauszufinden, wie es funktioniert.
| |
- Probiere den Code unten aus. Verändere die Werte, um herauszufinden, wie es funktioniert. Kommentiere hinter den Zeilen, was der Code bewirkt.
| |
Aufgabe 3: Funktionen aus anderen Funktionen zusammenstellen
- Probiere den Code unten aus. Verändere die Werte, um herauszufinden, wie es funktioniert.
| |
Wir können aus dem Code oben eine eigene Funktion zusammenstellen. Die alle Schritte zusammenfasst und nur bestimmte Werte ändert. Analysiere den Code unten und kommentiere die Zeilen, was passiert?
| |
Flask-Anwendung (Bonus)
Voraussetzung für die Flask-Aufgaben
Die folgenden Flask-Aufgaben setzen voraus, dass du bereits Flask – 01 Erste Schritte, Flask – 02 Jinja Templating Grundlagen und Flask – 03 Jinja Schleifen und Listen durchgearbeitet hast. Wenn nicht, überspringe diese Abschnitte zunächst.
Flask-Routen sind Funktionen!
Hast du schon mit Flask gearbeitet? Dann ist dir vielleicht aufgefallen: Flask-Routen sind Funktionen!
Flask und Funktionen
In Flask definierst du für jede Route eine Funktion. Diese Funktion wird aufgerufen, wenn jemand die URL besucht.
| |
Funktionen mit Parametern kannst du auch in Routen nutzen:
| |
Bonus 1: Rechner-Funktion in Flask
Erstelle eine Flask-App mit einer Funktion addiere(a, b), die zwei Zahlen addiert.
Anforderungen:
- Erstelle eine Route
/rechner/<int:a>/<int:b> - Die Route nutzt eine Funktion
addiere(a, b) - Gib das Ergebnis zurück
Beispiel: /rechner/5/3 sollte “5 + 3 = 8” anzeigen
Lösung zeigen
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15from flask import Flask app = Flask(__name__) # Hilfsfunktion für Addition def addiere(a, b): return a + b @app.route("/rechner/<int:a>/<int:b>") def rechner(a, b): ergebnis = addiere(a, b) return f"{a} + {b} = {ergebnis}" if __name__ == "__main__": app.run(debug=True)Erweiterung: Füge weitere Funktionen hinzu:
subtrahiere(),multipliziere(),dividiere()
Aufgabe 4 (Projekt): Mandalas und Blumenwiesen mit Turtle
Dieses Projekt soll Kleingruppen mit 3 Personen absolviert werden. In jeder Gruppe soll mind. 1 Mädchen bzw. Junge sein. Die Abgabe erfolgt gemeinsam. Ihr habt 3 Doppelstunden in der Schule Zeit. Es empfiehlt sich, die Aufgabe nach der 2. Doppelstunde zuhause abzuschließen. Tipp: In der Nextcloud könnt ihr auch Ordner untereinander freigeben und so Code teilen.
- Lies dich auf der Seite https://docs.python.org/3/library/turtle.html#introduction ein. Du solltest eine grobe Idee davon haben, wie funktioniert. Hier ist noch ein Videotutorial, das du gerne zuhause schauen kannst:
- Besprich mit deiner Gruppe, wer welche Teile übernimmt. Am Ende solltet ihr den Code zusammenführen. Dabei ist es nicht von Belang, ob ihr Dopplungen habt oder die Aufgabe ideal aufgeteilt habt. Wichtig ist, dass alle ganz genau Bescheid wissen, wie der Code funktioniert. Sorgt dafür, indem ihr auch den Code gegenseitig erklärt.
- Bereitet eine kurze Präsentation bzw. Demo eures Code vor. Ihr habt 6 Minuten Zeit, jede:r spricht ca. 2 Minuten.
Vorgaben
- Der Code soll hinreichend komplexe Bilder zeichnen. Der Titel lautet zwar “Mandalas und Blumenwiesen”. Ihr könnt aber beliebige Bilder erstellen.
- Verwendet mindestens eine for- oder while-Schleife.
- Mindestens eine Funktion soll verwendet werden, um bspw. ein Objekt zu zeichnen.
Schau dir dieses Beispiel an, teste die Funktion mit unterschiedlichen Werten für die Farbe und die Radien der Kreise:
| |
Aufgabe 5 (Projekt): Verschlüsselung
Auf dieser Website wird die Verschlüsselung mit dem Caesar-Code anhand von Funktionen vermittelt.
- Absolviere den Kurs und schreibe eine Funktion, die jedes eingegeben Wort mithilfe des Cäsar Codes verschlüsselt.
- Verbessere deine Verschlüsselung, in dem für je 7 Stellen (Buchstaben oder Satzzeichen) unterschiedliche Schlüssel verwendest. Der Schlüssel ist damit eine siebenstellige Zahl, die zufällig erzeugt wird und dir dann mitgeteilt wird.
- Finde heraus, wie man einen Text in eine Datei schreiben kann.
- Schreibe zusätzliche eine Funktion, die mit einem gegeben Schlüssel einen Text (aus einer Datei) entschlüsselt.
Aufgabe 6: Funktionen (ineinander abrufen)
- Analysiere den Code unten.
- Ändere ihn anschließend so, dass
- die Grußformel geändert wird und
- die Reaktionen auf die Eingabe anders sind.
- Ändere ihn anschließend so, dass
| |
Zahlenraten als Web-App
Das Zahlenraten-Spiel aus Aufgabe 6 funktioniert in der Konsole. Mit Flask kannst du es in eine Web-App verwandeln!
Bonus 2: Zahlenraten-Spiel
Setze das Zahlenraten-Spiel aus Aufgabe 6 als Flask-Anwendung um.
Anforderungen:
- Erstelle eine Route
/ratespielmit GET und POST - Nutze diese Hilfsfunktionen (erstelle sie!):
neue_zahl(start, ende)– Generiert Zufallszahlpruefe_zahl(eingabe, zielzahl)– Gibt “größer”, “kleiner” oder “richtig” zurück
- Zeige ein Formular zum Raten
- Nach dem Absenden: Zeige Hinweis (zu groß/klein) oder Erfolgsmeldung
- Bonus: Zähle die Versuche und zeige sie an
Tipp: Du musst die Zielzahl zwischen Anfragen speichern. Nutze dafür eine globale Variable oder Flask Sessions.
Lösung zeigen
app.py:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81from flask import Flask, render_template, request, session import random app = Flask(__name__) app.secret_key = "geheim123" # Für Sessions benötigt # Hilfsfunktion: Generiere Zufallszahl def neue_zahl(start: int, ende: int) -> int: """Generiert eine Zufallszahl zwischen start und ende.""" return random.randint(start, ende) # Hilfsfunktion: Prüfe Eingabe def pruefe_zahl(eingabe: int, zielzahl: int) -> str: """Vergleicht Eingabe mit Zielzahl. Gibt 'richtig', 'größer' oder 'kleiner' zurück.""" if eingabe == zielzahl: return "richtig" elif eingabe < zielzahl: return "größer" else: return "kleiner" @app.route("/") def home(): return render_template("home.html") @app.route("/ratespiel", methods=['GET', 'POST']) def ratespiel(): # Initialisiere Spiel (beim ersten Besuch) if 'zielzahl' not in session: session['zielzahl'] = neue_zahl(1, 100) session['versuche'] = 0 session['start'] = 1 session['ende'] = 100 if request.method == 'POST': aktion = request.form.get('aktion') # Neues Spiel starten if aktion == 'neu': session['zielzahl'] = neue_zahl(1, 100) session['versuche'] = 0 return render_template("ratespiel.html", nachricht="Neues Spiel gestartet! Rate eine Zahl zwischen 1 und 100.", versuche=0) # Zahl raten try: eingabe = int(request.form.get('zahl')) session['versuche'] += 1 ergebnis = pruefe_zahl(eingabe, session['zielzahl']) if ergebnis == "richtig": versuche = session['versuche'] # Spiel zurücksetzen session.pop('zielzahl', None) session.pop('versuche', None) return render_template("ratespiel_gewonnen.html", zahl=eingabe, versuche=versuche) elif ergebnis == "größer": nachricht = f"Die gesuchte Zahl ist GRÖẞER als {eingabe}! Versuch {session['versuche']}" else: # kleiner nachricht = f"Die gesuchte Zahl ist KLEINER als {eingabe}! Versuch {session['versuche']}" return render_template("ratespiel.html", nachricht=nachricht, versuche=session['versuche'], letzte_eingabe=eingabe) except ValueError: return render_template("ratespiel.html", nachricht="Bitte gib eine gültige Zahl ein!", versuche=session['versuche']) # GET-Request: Zeige Formular return render_template("ratespiel.html", versuche=session.get('versuche', 0)) if __name__ == "__main__": app.run(debug=True)templates/ratespiel.html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Zahlenraten</title> <style> body { font-family: Arial, sans-serif; max-width: 600px; margin: 50px auto; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); text-align: center; } .container { background: white; padding: 40px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); } h1 { color: #667eea; margin-bottom: 10px; } .nachricht { background: #fff3cd; color: #856404; padding: 15px; border-radius: 5px; margin: 20px 0; font-weight: bold; } .versuche { color: #666; font-size: 14px; margin-bottom: 20px; } input[type="number"] { width: 200px; padding: 15px; font-size: 24px; text-align: center; border: 3px solid #667eea; border-radius: 10px; margin: 20px 0; } button { padding: 15px 30px; margin: 10px; border: none; border-radius: 10px; font-size: 18px; cursor: pointer; font-weight: bold; } .btn-raten { background: #667eea; color: white; } .btn-neu { background: #95a5a6; color: white; } button:hover { opacity: 0.9; } </style> </head> <body> <div class="container"> <h1>Zahlenraten</h1> <p>Ich habe mir eine Zahl zwischen 1 und 100 ausgedacht!</p> <p class="versuche">Versuche: {{ versuche }}</p> {% if nachricht %} <div class="nachricht">{{ nachricht }}</div> {% endif %} <form method="POST"> <input type="number" name="zahl" min="1" max="100" placeholder="?" autofocus required value="{{ letzte_eingabe if letzte_eingabe else '' }}"> <br> <button type="submit" name="aktion" value="raten" class="btn-raten">Raten!</button> <button type="submit" name="aktion" value="neu" class="btn-neu">Neues Spiel</button> </form> </div> </body> </html>templates/ratespiel_gewonnen.html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Gewonnen!</title> <style> body { font-family: Arial, sans-serif; max-width: 600px; margin: 50px auto; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); text-align: center; } .container { background: white; padding: 40px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); } h1 { color: #4caf50; font-size: 48px; } .erfolg { background: #e8f5e9; color: #2e7d32; padding: 20px; border-radius: 10px; margin: 20px 0; font-size: 20px; } .emoji { font-size: 80px; } a { display: inline-block; margin-top: 20px; padding: 15px 30px; background: #667eea; color: white; text-decoration: none; border-radius: 10px; font-weight: bold; } a:hover { background: #5568d3; } </style> </head> <body> <div class="container"> <div class="emoji">OK</div> <h1>Gewonnen!</h1> <div class="erfolg"> <p><strong>Die Zahl war {{ zahl }}!</strong></p> <p>Du hast {{ versuche }} {% if versuche == 1 %}Versuch{% else %}Versuche{% endif %} benötigt.</p> {% if versuche == 1 %} <p>WOW! Beim ersten Versuch! Kannst du zaubern?</p> {% elif versuche <= 5 %} <p>Ausgezeichnet! Du bist sehr gut!</p> {% elif versuche <= 10 %} <p>Gut gemacht!</p> {% else %} <p>Geschafft! Übung macht den Meister.</p> {% endif %} </div> <a href="/ratespiel">Noch mal spielen!</a> </div> </body> </html>Wichtige Konzepte:
- Hilfsfunktionen:
neue_zahl()undpruefe_zahl()machen den Code übersichtlicher- Sessions: Speichern Daten zwischen Anfragen (Zielzahl, Versuche)
- Funktionen aufrufen: Die Route-Funktion
ratespiel()ruft die Hilfsfunktionen auf
Aufgabe 7: Eigene Funktionen anlegen
- Erstelle eine Funktion für einen Steckbrief. Die Funktion soll folgende Kriterien erfüllen:
- Name der Funktion: steckbrief()
- Parameter: mind. Name, Alter, Größe, Haarfarbe
- Die Ausgabe soll in Form eines Steckbriefes erfolgen.
- Erstelle eine Funktion, die 15 Zufallszahlen zwischen zwei Zahlen a und b in dieser Form ausgibt:
34,12,3,75,21, … Beim Aufrufen der Funktion sollen die Grenzen immer wieder neu festgelegt werden können. (Tipp: Du benötigst das Modul random, recherchiere die passende Methode zum Erstellen von Zufallszahlen.)- *Variante: Ungerade Zahlen sollen übersprungen werden.
- Erstelle eine Funktion, die zufällig Namen aus einer Liste ausgibt.
Tipp dazu anzeigen
| |
- Erstelle zwei eigene Funktionen und nutze die erste Funktion innerhalb der zweiten.
Zufallsgenerator-App (Umfassend)
Jetzt kombinierst du alles, was du über Funktionen gelernt hast, in einer Flask-App!
Bonus 3: Zufallsgenerator
Erstelle eine Flask-App, die verschiedene Zufallswerte generiert – ähnlich wie in Aufgabe 7!
Anforderungen:
1. Hilfsfunktionen erstellen (wie in Aufgabe 7):
generiere_zahlen(start, ende, anzahl)– Liste mit Zufallszahlenwaehle_name(namen_liste)– Wählt zufälligen Namenerstelle_steckbrief(name, alter, groesse, haarfarbe)– Formatierter Steckbrief-String
2. Flask-Routen:
/– Startseite mit Links zu den Generatoren/zahlen– Zeigt Zufallszahlen (GET/POST)/name– Wählt zufälligen Namen aus Liste/steckbrief– Generiert zufälligen Steckbrief
3. Features:
- Nutze alle Hilfsfunktionen in deinen Routes
- Übergebe Listen und Werte an Templates
- Zeige Ergebnisse ansprechend formatiert
Bonus:
- Füge eine Route
/wuerfelhinzu (würfelt 1-6) - Erstelle eine Funktion, die mehrere andere Funktionen aufruft
Lösung zeigen
app.py:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101from flask import Flask, render_template, request import random app = Flask(__name__) # ========== HILFSFUNKTIONEN ========== def generiere_zahlen(start: int, ende: int, anzahl: int) -> list[int]: """Generiert eine Liste mit Zufallszahlen.""" zahlen = [] for _ in range(anzahl): zahlen.append(random.randint(start, ende)) return zahlen def waehle_name(namen_liste: list[str]) -> str: """Wählt einen zufälligen Namen aus einer Liste.""" index = random.randint(0, len(namen_liste) - 1) return namen_liste[index] def erstelle_steckbrief(name: str, alter: int, groesse: int, haarfarbe: str) -> dict: """Erstellt einen Steckbrief als Dictionary.""" return { 'name': name, 'alter': alter, 'groesse': groesse, 'haarfarbe': haarfarbe, 'beschreibung': f"{name} ist {alter} Jahre alt, {groesse} cm groß und hat {haarfarbe}e Haare." } def wuerfeln(anzahl_wuerfel: int = 1) -> list[int]: """Würfelt mit einer bestimmten Anzahl an Würfeln.""" return [random.randint(1, 6) for _ in range(anzahl_wuerfel)] def generiere_zufalls_steckbrief() -> dict: """Generiert einen komplett zufälligen Steckbrief (nutzt andere Funktionen!)""" namen = ["Anna", "Ben", "Clara", "David", "Emma", "Felix", "Greta", "Hassan"] haarfarben = ["blond", "braun", "schwarz", "rot", "grau"] zufalls_name = waehle_name(namen) zufalls_alter = random.randint(10, 80) zufalls_groesse = random.randint(140, 200) zufalls_haarfarbe = waehle_name(haarfarben) return erstelle_steckbrief(zufalls_name, zufalls_alter, zufalls_groesse, zufalls_haarfarbe) # ========== ROUTEN ========== @app.route("/") def home(): return render_template("zufallsgenerator_home.html") @app.route("/zahlen", methods=['GET', 'POST']) def zahlen_generator(): zahlen = None summe = None durchschnitt = None if request.method == 'POST': start = int(request.form.get('start', 1)) ende = int(request.form.get('ende', 100)) anzahl = int(request.form.get('anzahl', 10)) zahlen = generiere_zahlen(start, ende, anzahl) summe = sum(zahlen) durchschnitt = round(summe / len(zahlen), 2) return render_template("zahlen_generator.html", zahlen=zahlen, summe=summe, durchschnitt=durchschnitt) @app.route("/name") def namen_generator(): namen = ["Alice", "Bob", "Charlie", "Diana", "Eve", "Frank", "Grace", "Henry"] gewaehlter_name = waehle_name(namen) return render_template("namen_generator.html", alle_namen=namen, gewaehlter_name=gewaehlter_name) @app.route("/steckbrief") def steckbrief_generator(): steckbrief = generiere_zufalls_steckbrief() return render_template("steckbrief_generator.html", steckbrief=steckbrief) @app.route("/wuerfel", methods=['GET', 'POST']) def wuerfel_generator(): ergebnisse = None gesamt = None if request.method == 'POST': anzahl = int(request.form.get('anzahl', 2)) ergebnisse = wuerfeln(anzahl) gesamt = sum(ergebnisse) return render_template("wuerfel_generator.html", ergebnisse=ergebnisse, gesamt=gesamt) if __name__ == "__main__": app.run(debug=True)templates/zufallsgenerator_home.html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Zufallsgenerator</title> <style> body { font-family: Arial, sans-serif; max-width: 800px; margin: 50px auto; padding: 20px; background: #f5f5f5; } h1 { color: #333; text-align: center; } .generators { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 30px; } .generator-card { background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); text-align: center; transition: transform 0.2s; } .generator-card:hover { transform: translateY(-5px); box-shadow: 0 5px 20px rgba(0,0,0,0.2); } .generator-card a { text-decoration: none; color: inherit; } .icon { font-size: 48px; margin-bottom: 10px; } h3 { color: #667eea; margin: 10px 0; } p { color: #666; font-size: 14px; } </style> </head> <body> <h1>Zufallsgenerator</h1> <p style="text-align: center; color: #666;">Wähle einen Generator aus:</p> <div class="generators"> <div class="generator-card"> <a href="/zahlen"> <div class="icon">123</div> <h3>Zufallszahlen</h3> <p>Generiere Listen mit Zufallszahlen</p> </a> </div> <div class="generator-card"> <a href="/name"> <div class="icon">N</div> <h3>Namens-Wähler</h3> <p>Wähle einen zufälligen Namen</p> </a> </div> <div class="generator-card"> <a href="/steckbrief"> <div class="icon">S</div> <h3>Steckbrief</h3> <p>Generiere zufälligen Steckbrief</p> </a> </div> <div class="generator-card"> <a href="/wuerfel"> <div class="icon">W</div> <h3>Würfel</h3> <p>Würfle mit mehreren Würfeln</p> </a> </div> </div> </body> </html>Weitere Templates (zahlen_generator.html, namen_generator.html, etc.) kannst du selbst gestalten!
Wichtige Konzepte in dieser App:
- Viele Hilfsfunktionen: Jede Funktion hat eine klare Aufgabe
- Funktionen rufen Funktionen auf:
generiere_zufalls_steckbrief()nutztwaehle_name()understelle_steckbrief()- Code-Wiederverwendung: Die gleichen Funktionen werden in verschiedenen Routes genutzt
- Strukturierter Code: Hilfsfunktionen oben, Routes unten