fix bonus points

This commit is contained in:
Michael Czechowski
2025-07-30 11:15:04 +02:00
parent 1b6c0c3303
commit fb847e534f

139
README.md
View File

@@ -1,11 +1,11 @@
# DHBW 2025: Web Engineering Prüfungsleistung # DHBW 2025: Web Engineering Prüfungsleistung
**Maximale Punktzahl: 100 Punkte** **Maximale Basispunktzahl: 100 Punkte + bis zu 15 Bonuspunkte**
--- ---
## 1. Grundanforderungen (insg. 30 Punkte) ## 1. Grundanforderungen (30 Punkte)
### Projektgrundlagen (15/30 Punkte) ### Projektgrundlagen (15 Punkte)
- **Funktionsfähige Anwendung** (8 Punkte) - **Funktionsfähige Anwendung** (8 Punkte)
- Webapp oder Backend-Anwendung läuft fehlerfrei - Webapp oder Backend-Anwendung läuft fehlerfrei
- Kernfunktionalitäten sind in der Projektdokumentation beschrieben und testbar - Kernfunktionalitäten sind in der Projektdokumentation beschrieben und testbar
@@ -17,7 +17,7 @@
- README.md mit Installation, Verwendung und Technologie-Stack - README.md mit Installation, Verwendung und Technologie-Stack
- Kurze Erklärung der Hauptfunktionen am Anfang relevanter Dateien - Kurze Erklärung der Hauptfunktionen am Anfang relevanter Dateien
### Präsentation (15/30 Punkte) ### Präsentation (15 Punkte)
- **Elevator Pitch** (5 Punkte) - **Elevator Pitch** (5 Punkte)
- Maximal 1 Minute - Maximal 1 Minute
- Welches Problem wird gelöst und warum wurde es vorher noch nicht gelöst? - Welches Problem wird gelöst und warum wurde es vorher noch nicht gelöst?
@@ -25,7 +25,7 @@
- **Technische Präsentation** (5 Punkte) - **Technische Präsentation** (5 Punkte)
- PowerPoint/Folien mit Technologie-Stack - PowerPoint/Folien mit Technologie-Stack
- Live-Demo der Anwendung - Live-Demo der Anwendung
- **Projektevolution:** (5 Punkte) - **Projektevolution** (5 Punkte)
Jedes Projekt verläuft unterschiedlich. Jedes Projekt verläuft unterschiedlich.
Sofern es zutrifft, beschreibt die unterschiedlichen Phasen des Projekts. Sofern es zutrifft, beschreibt die unterschiedlichen Phasen des Projekts.
*Wie weit seid ihr gekommen? Wo waren die Stolpersteine? Wie könnte sich eure Anwendung bei fortgesetzter Arbeit entwickeln?* *Wie weit seid ihr gekommen? Wo waren die Stolpersteine? Wie könnte sich eure Anwendung bei fortgesetzter Arbeit entwickeln?*
@@ -37,9 +37,9 @@
--- ---
## 2. Clean Code Prinzipien (insg. 30 Punkte) ## 2. Clean Code Prinzipien (25 Punkte)
### Projektstruktur (10/30 Punkte) ### Projektstruktur (10 Punkte)
- **Ordnerstruktur** (5 Punkte) - **Ordnerstruktur** (5 Punkte)
``` ```
projekt/ projekt/
@@ -64,9 +64,9 @@
- Ein Konzept pro Datei (Single Responsibility) - Ein Konzept pro Datei (Single Responsibility)
- Konsistente Namenskonventionen: `kebab-case` für Dateien, `camelCase` für Variablen, `PascalCase` für Komponenten/Klassen - Konsistente Namenskonventionen: `kebab-case` für Dateien, `camelCase` für Variablen, `PascalCase` für Komponenten/Klassen
### Code-Qualität (10/30 Punkte) ### Code-Qualität (10 Punkte)
#### KISS Prinzip (2 Punkte) #### KISS Prinzip (3 Punkte)
**❌ Nicht so einfach:** **❌ Nicht so einfach:**
```javascript ```javascript
@@ -85,23 +85,7 @@ function calculateActiveTotal(data) {
} }
``` ```
**❌ Nicht so einfach:** #### Beschreibende Namen (3 Punkte)
```javascript
const u = users.find(u => u.id === id && u.active && !u.deleted) || null;
```
**✅ Einfach:**
```javascript
function findActiveUser(users, userId) {
return users.find(user =>
user.id === userId &&
user.active &&
!user.deleted
) || null;
}
```
#### Beschreibende Namen (2 Punkte)
**❌ Schlecht:** **❌ Schlecht:**
```javascript ```javascript
@@ -117,21 +101,7 @@ let userProfiles = [];
function calculateTotalPrice(price, taxRate) { return price * taxRate; } function calculateTotalPrice(price, taxRate) { return price * taxRate; }
``` ```
**❌ Unklar und uneindeutig:** #### Funktionsverantwortlichkeiten (4 Punkte)
```javascript
const btn = document.getElementById('btn');
let flag = false;
function process(items) { /* ... */ }
```
**✅ Sprechende Variablennamen:**
```javascript
const submitButton = document.getElementById('submit-btn');
let isFormValid = false;
function validateUserInput(formData) { /* ... */ }
```
#### Funktionsverantwortlichkeiten (5 Punkte)
**❌ Zu viele Verantwortlichkeiten:** **❌ Zu viele Verantwortlichkeiten:**
```javascript ```javascript
@@ -163,7 +133,7 @@ function sendWelcomeEmail(email) {
} }
``` ```
### Kommentierung & Dokumentation (5/30 Punkte) ### Kommentierung & Dokumentation (5 Punkte)
**JSDoc ist optional und der beste Code muss nicht kommentiert werden.** **JSDoc ist optional und der beste Code muss nicht kommentiert werden.**
**❌ Über-/Unterkommentiert:** **❌ Über-/Unterkommentiert:**
@@ -193,40 +163,11 @@ function calculateCompoundInterest(principal, rate, time) {
} }
``` ```
**❌ Unterkommentiert:**
```javascript
function x(a,b,c,d,e) {
return a*b+c-d/e;
}
```
**✅ Mit JSDoc dokumentiert:**
```javascript
/**
* Calculates shipping cost based on weight, distance and priority
* @param {number} weight - Package weight in kg
* @param {number} distance - Delivery distance in km
* @param {boolean} isPriority - Priority delivery flag
* @returns {number} Total shipping cost
*/
function calculateShippingCost(weight, distance, priority) {
const baseCost = weight * 2.5;
const distanceCost = distance * 0.1;
const priorityMultiplier = priority ? 1.5 : 1;
return (baseCost + distanceCost) * priorityMultiplier;
}
```
### Live-Demo (5/30 Punkte)
- Anwendung läuft während der Präsentation stabil
- Alle Kernfunktionen werden erfolgreich vorgeführt
- Ungefähr 5 Minuten Demo-Zeit
--- ---
## 3. Accessibility & UX (25 Punkte insg.) ## 3. Accessibility & UX (25 Punkte)
### Web Accessibility (15/25 Punkte) ### Web Accessibility (15 Punkte)
#### Semantisches HTML (5 Punkte) #### Semantisches HTML (5 Punkte)
@@ -307,7 +248,7 @@ div.clickable:focus {
<div class="clickable" tabindex="0" aria-label="Menü öffnen">🍔</div> <div class="clickable" tabindex="0" aria-label="Menü öffnen">🍔</div>
``` ```
### Responsive Design (10/25 Punkte) ### Responsive Design (10 Punkte)
#### Mobile First Approach (5 Punkte - mindestens 1 Breakpoint) #### Mobile First Approach (5 Punkte - mindestens 1 Breakpoint)
```css ```css
@@ -358,9 +299,9 @@ div.clickable:focus {
--- ---
## 4. Erweiterte Technologien & Innovation (15 Punkte insg.) ## 4. Technische Umsetzung (20 Punkte)
### Plattformunabhängigkeit (5/15 Punkte) ### Plattformunabhängigkeit (5 Punkte)
- Funktioniert auf macOS, Windows, GNU/Linux - Funktioniert auf macOS, Windows, GNU/Linux
- Browser-Kompatibilität (Chrome, Firefox, Safari, Edge) - Browser-Kompatibilität (Chrome, Firefox, Safari, Edge)
@@ -391,9 +332,7 @@ function copyToClipboard(text) {
} }
``` ```
### Entwicklungs-Tools (10/15 Punkte) ### Package Management (5 Punkte)
#### Package Management (4 Punkte)
Sämtliche nodeJS/JavaScript Projekte sollten eine `package.json` beinhalten. Sämtliche nodeJS/JavaScript Projekte sollten eine `package.json` beinhalten.
`npm init` und ein Dialog öffnet sich. `npm init` und ein Dialog öffnet sich.
@@ -417,7 +356,7 @@ Sämtliche nodeJS/JavaScript Projekte sollten eine `package.json` beinhalten.
} }
``` ```
#### Build Tools & Optimierung (6 Punkte) ### Build Tools & Optimierung (5 Punkte)
- Vite, Webpack, oder ähnliche Tools - Vite, Webpack, oder ähnliche Tools
- Optimierte Produktions-Builds - Optimierte Produktions-Builds
- Debugger und unnötige console.log()'s entfernen - Debugger und unnötige console.log()'s entfernen
@@ -442,10 +381,18 @@ import { debounce } from 'lodash';
// Debug-Code entfernt in Production // Debug-Code entfernt in Production
``` ```
### Zusätzliche Features (Bonus: bis maximal 10 Punkte zusätzlich) ### Live-Demo (5 Punkte)
**Wähle mindestens 2 Bereiche:** - Anwendung läuft während der Präsentation stabil
- Alle Kernfunktionen werden erfolgreich vorgeführt
- Ungefähr 5 Minuten Demo-Zeit
#### API Integration (5 Punkte) ---
## 5. Bonusfeatures (max. 15 Zusatzpunkte)
**Wähle mindestens 2 Bereiche für Bonuspunkte:**
### API Integration (5 Bonuspunkte)
**❌ Ohne Error Handling:** **❌ Ohne Error Handling:**
```javascript ```javascript
@@ -471,7 +418,7 @@ async function fetchUserData(userId) {
} }
``` ```
#### Local Storage / State Management (5 Punkte) ### Local Storage / State Management (5 Bonuspunkte)
**❌ Ohne Error Handling:** **❌ Ohne Error Handling:**
```javascript ```javascript
@@ -506,7 +453,7 @@ function loadUserPreferences() {
} }
``` ```
#### Progressive Web App Features (5 Punkte) ### Progressive Web App Features (5 Bonuspunkte)
- Service Worker für Offline-Funktionalität - Service Worker für Offline-Funktionalität
- Manifest.json für App-Installation - Manifest.json für App-Installation
- Caching-Strategien - Caching-Strategien
@@ -528,7 +475,7 @@ if ('serviceWorker' in navigator) {
</script> </script>
``` ```
#### Testing (10 Punkte) ### Testing (5 Bonuspunkte)
Von Vornherein mitgedachte Tests helfen beim Code-Splitting. Von Vornherein mitgedachte Tests helfen beim Code-Splitting.
Um beim Testen jene Funktionen eindeutig referenzieren zu können, hilft es sie in einzelne Dateien zu verteilen und Ordnern zu gruppieren. Um beim Testen jene Funktionen eindeutig referenzieren zu können, hilft es sie in einzelne Dateien zu verteilen und Ordnern zu gruppieren.
@@ -563,7 +510,7 @@ test('calculateTotal should throw error for invalid input', () => {
}); });
``` ```
#### Responsive Design Erweitert (5 Punkte - 2 oder mehr Breakpoints) ### Erweiterte Responsive Features (5 Bonuspunkte - 3+ Breakpoints)
```css ```css
/* Mobile */ /* Mobile */
.grid { display: block; } .grid { display: block; }
@@ -591,7 +538,7 @@ test('calculateTotal should throw error for invalid input', () => {
} }
``` ```
#### Security Features (5 Punkte) ### Security Features (5 Bonuspunkte)
**❌ Unsicher:** **❌ Unsicher:**
```javascript ```javascript
@@ -622,6 +569,20 @@ function search(query) {
--- ---
## Punkteverteilung im Überblick
**Basispunkte (100 Punkte):**
- Grundanforderungen: 30 Punkte
- Clean Code Prinzipien: 25 Punkte
- Accessibility & UX: 25 Punkte
- Technische Umsetzung: 20 Punkte
**Bonuspunkte (max. 15 Punkte):**
- Bis zu 3 Bonusfeatures à 5 Punkte wählbar
- Gesamtmögliche Punktzahl: 115 Punkte
---
## Abgabe ## Abgabe
- **Deadline:** 27.07.2025 - **Deadline:** 27.07.2025
@@ -635,4 +596,4 @@ function search(query) {
3. **Fragt bei Unklarheiten** rechtzeitig nach 3. **Fragt bei Unklarheiten** rechtzeitig nach
4. **Fokussiert euch** auf Qualität statt Quantität 4. **Fokussiert euch** auf Qualität statt Quantität
5. **Behaltet Barrieren im Blick** und vermeidet sie rechtzeitig 5. **Behaltet Barrieren im Blick** und vermeidet sie rechtzeitig
5. **Verwendet gute Struktur** um eure Code-Beispiele zu organisieren 6. **Verwendet gute Struktur** um eure Code-Beispiele zu organisieren