Browserbasierte Notenverwaltung mit HTML, CSS & JS

Generated from prompt:

Erstelle eine professionelle PowerPoint-Präsentation (ca. 16–17 Folien, 20 Minuten) zum Thema: "Wie funktioniert eine browserbasierte Notenverwaltung mit HTML, CSS und JavaScript?". Zielgruppe: 12. Klasse, Fach Informationsverarbeitung. Design: Modern, technisch, klar strukturiert (Blautöne, dezente Icons, übersichtlich). Folienstruktur: 1. Titel (Projekt Notenverwaltung, Name frei lassen) 2. Problemstellung (manuelle Notenberechnung, zwei Notensysteme, Fehleranfälligkeit) 3. Ziel des Projekts 4. Verwendete Technologien (HTML, CSS, JavaScript, LocalStorage) 5. Aufbau der Benutzeroberfläche 6. HTML – Struktur der Webseite 7. CSS – Design und Layout 8. JavaScript – Programmlogik 9. Datenstruktur (Objekt "daten", Arrays) 10. Umrechnung Notensystem 1–6 und 0–15 Punkte 11. Berechnung des Durchschnitts (reduce, toFixed) 12. LocalStorage – Datenspeicherung im Browser 13. Besondere Funktionen (Löschen per Klick, dynamische Tabelle) 14. Herausforderungen bei der Umsetzung 15. Live-Demo Hinweis 16. Interaktives Quiz für die Klasse (3 Fragen) 17. Fazit & eigene Bewertung Zusätzlich: - Sprecher-Notizen für jede Folie (Stichpunkte zum freien Sprechen) - Klare Stichpunkte auf den Folien (nicht zu viel Text) - Technische Grafiken/Icons passend zum Thema - Abschlussfolie mit "Vielen Dank für eure Aufmerksamkeit"

Projektpräsentation für die 12. Klasse Informationsverarbeitung: Browserbasiertes Tool zur Eingabe, Umrechnung (1–6 ↔ 0–15 Punkte), Durchschnittsberechnung und lokalen Speicherung von Noten mit HTML, CSS, JavaScript und LocalStorage. Inkl. UI, Heraus

February 21, 202618 slides

Slide 1 of 18

Slide 1 - Browserbasierte Notenverwaltung

Wie funktioniert sie mit HTML, CSS und JavaScript?

Projektpräsentation für die 12. Klasse Informationsverarbeitung

---

Photo by Pict4life on Unsplash

Slide 1 - Browserbasierte Notenverwaltung

Slide 2 of 18

Slide 2 - Problemstellung

Manuelle Notenberechnung: zeitaufwendig und fehleranfällig
Zwei Notensysteme: 1–6 (Note) und 0–15 Punkte
Keine dauerhafte Speicherung: Risiko von Datenverlust

Slide 2 - Problemstellung

Slide 3 of 18

Slide 3 - Ziel des Projekts

Browserbasierte Eingabe und Verwaltung von Noten
Automatische Umrechnung: 1–6 ↔ 0–15 Punkte
Berechnung des Notendurchschnitts
Lokale Datenspeicherung mit LocalStorage
Einfache, intuitive Benutzeroberfläche

Slide 3 - Ziel des Projekts

Slide 4 of 18

Slide 4 - Verwendete Technologien

🖥️ HTML Grundstruktur der Webseite (Elemente, Tags)

🎨 CSS Design, Layout und Responsivität

⚡ JavaScript Programmlogik, DOM, Berechnungen

💾 LocalStorage Lokale Datenspeicherung im Browser

---

Photo by Robert Stump on Unsplash

Source: Wikipedia: HTML, JavaScript

Slide 4 - Verwendete Technologien

Slide 5 of 18

Slide 5 - Aufbau der Benutzeroberfläche

Eingabefelder: Note (1-6) oder Punkte (0-15)
Dynamische Tabelle: Übersicht aller Noten
Aktionen: Hinzufügen, Löschen pro Zeile
Anzeige: Durchschnitt und Speicherstatus

---

Photo by Stephen Phillips - Hostreviews.co.uk on Unsplash

Slide 5 - Aufbau der Benutzeroberfläche

Slide 6 of 18

Slide 6 - HTML – Struktur der Webseite

Semantische Struktur: <header>, <main>, <footer>
Formular: <input> für Note/Punkte, <select> für Typ
Tabelle: <table> mit <tbody> für dynamische Zeilen
Buttons: <button> für Hinzufügen/Löschen

Source: Wikipedia: HTML

Slide 6 - HTML – Struktur der Webseite

Slide 7 of 18

Slide 7 - CSS – Design und Layout

Moderne Blautöne: Primär #007BFF, Sekundär #0056b3
Flexbox/Grid: Responsives Layout
Dezente Icons: Font Awesome oder Emoji
Animationen: Hover-Effekte, Fade-Ins
Box-Shadows und Borders für Klarheit

Slide 7 - CSS – Design und Layout

Slide 8 of 18

Slide 8 - JavaScript – Programmlogik

Event-Listener: addEventListener('click')
DOM-Manipulation: createElement, appendChild
Funktionen: Umrechnung, Durchschnittsberechnung
Array-Methoden: push, filter, reduce

Source: Wikipedia: JavaScript

Slide 8 - JavaScript – Programmlogik

Slide 9 of 18

Slide 9 - Datenstruktur

Zentrales Objekt: daten = {notes: [], average: 0}
Notes-Array: [{id: 1, grade: 4.0, points: 12, type: 'note'}]
Automatische ID-Generierung
JSON-kompatibel für Speicherung

Slide 9 - Datenstruktur

Slide 10 of 18

Slide 10 - Umrechnung Notensysteme

Note 1–6 → Punkte 0–15 1 → 15 2 → 13 3 → 11 4 → 9 5 → 7 6 → 4

Punkte 0–15 → Note 1–6 15–13: 1 12–10: 2 9–7: 3 6–4: 4 3–1: 5 0: 6

Slide 10 - Umrechnung Notensysteme

Slide 11 of 18

Slide 11 - Berechnung des Durchschnitts

Punkte-Durchschnitt: reduce() auf notes.points
Formel: sum(points) / Anzahl Noten
Formatierung: toFixed(2) für Dezimalen
Automatische Aktualisierung der Anzeige

Slide 11 - Berechnung des Durchschnitts

Slide 12 of 18

Slide 12 - LocalStorage – Datenspeicherung im Browser

JSON.stringify(daten) → localStorage.setItem('daten', ...)
Beim Laden: JSON.parse(localStorage.getItem('daten'))
Persistente Speicherung über Browser-Sessions
Kapazität: ca. 5–10 MB pro Domain

Slide 12 - LocalStorage – Datenspeicherung im Browser

Slide 13 of 18

Slide 13 - Besondere Funktionen

🗑️ Löschen per Klick Event-Listener pro Zeile, filter() Array

📋 Dynamische Tabelle DOM-Erstellung mit createElement()

🔄 Auto-Update Berechnung und Save nach jeder Änderung

📱 Responsive Design Funktioniert auf Desktop & Mobile

Slide 13 - Besondere Funktionen

Slide 14 of 18

Slide 14 - Herausforderungen bei der Umsetzung

Genauigkeit der Note-Punkte-Umrechnung
Dynamische Events: Delegation statt per Element
Input-Validation und Edge-Cases (0 Noten)
LocalStorage: JSON-Fehlerbehandlung
Performance bei vielen Noten

Slide 14 - Herausforderungen bei der Umsetzung

Slide 15 of 18

Slide 15 - Live-Demo Hinweis

App im Browser starten
Noten eingeben & umrechnen
Tabelle dynamisch aktualisieren
LocalStorage testen: Seite neu laden

---

Photo by Swello on Unsplash

Slide 15 - Live-Demo Hinweis

Slide 16 of 18

Slide 16 - Interaktives Quiz (3 Fragen)

Frage	A	B	Richtig
Welche Sprache für Struktur?	CSS	HTML	B
Wo gespeichert?	Server	LocalStorage	B
Durchschnitt mit welcher Methode?	for-Schleife	reduce()	B

Slide 16 - Interaktives Quiz (3 Fragen)

Slide 17 of 18

Slide 17 - Fazit & eigene Bewertung

Erfolgreiche Umsetzung einer browserbasierten Notenverwaltung

Gelernte Skills: HTML-Struktur, CSS-Design, JS-Logik & LocalStorage

Eigene Bewertung: 1,3 – Funktional, intuitiv, erweiterbar

Slide 17 - Fazit & eigene Bewertung

Slide 18 of 18

Slide 18 - Vielen Dank

Vielen Dank für eure Aufmerksamkeit!

Fragen?

Browserbasierte Notenverwaltung – Projekt erfolgreich umgesetzt

---

Photo by Codioful (Formerly Gradienta) on Unsplash

Slide 18 - Vielen Dank

Discover More Presentations

Explore thousands of AI-generated presentations for inspiration

Browse Presentations

Powered by AI

Create Your Own Presentation

Generate professional presentations in seconds with Karaf's AI. Customize this presentation or start from scratch.

Create New Presentation