https://github.com/innerjoin/hsr-wed2-notes
web app to manage personal notes - Testat project for HSR WED2 Module
https://github.com/innerjoin/hsr-wed2-notes
Last synced: about 1 year ago
JSON representation
web app to manage personal notes - Testat project for HSR WED2 Module
- Host: GitHub
- URL: https://github.com/innerjoin/hsr-wed2-notes
- Owner: innerjoin
- License: mit
- Created: 2016-10-03T07:13:56.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-11-21T07:29:30.000Z (over 9 years ago)
- Last Synced: 2025-01-21T01:41:59.671Z (over 1 year ago)
- Language: CSS
- Size: 87.9 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# HSR-WED2-Notes
## web app to manage personal notes - Testat project for HSR WED2 Module
## Setup
### Visual Studio Code
Basiert auf: https://code.visualstudio.com/docs/runtimes/nodejs
### Dependency Management
So wurde Projekt aufgesetzt
* `git init`
* `git pull https://github.com/...`
* `git config --global credential.helper wincred`
* `npm init`
* `npm install --save typings`
* ... usw für...
* node
* express
* nedb
* und allfällige weitere Abhängigkeiten
* `typings init`
* `typings search node`
* `typings install node --save --global --source dt`
* dt allenfalls durch anderes ersetzen, je nachdem was search für ein repository anzeigt.
* instll-Kommando für folgende Erweiterungen wiederholen (search optional, nur um Name herauszufinden)
* express
* serve-static
* express-serve-static-core
* nedb
### neues Modul hinzufügen
1. Modul installieren:
`npm install --save `
2. Typings suchen
`typings search `
3. Typings installieren
`typings install --save --global --source dt`
### SASS zu CSS Transpilation
1. SASS installieren
`npm install --save -g node-sass`
2. Gulp installieren
`npm install -g gulp`
`npm install --save gulp gulp-sass`
3. gulpfile.js erstellen, welches SASS zu CSS umwandelt
4. Task erstellen, welcher SASS Kompilation automatisch ausführt
## Anforderungen
Ihre Miniprojekt-Aufgabe besteht darin, eine Notizen-Webapplikation zu programmieren. Es soll möglich sein Notizen zu verwalten. Die Grundlagen bilden die Wireframes, welche den Funktionalitätsumfang zeigen. Zusätzlich definiert das Video „Testat-WED2.mp4“ die dynamische Ansicht der Webseite (z.B. vom Fluiden Design / Validation / Style Switcher). Ihre Aufgabe ist den kompletten Funktionsumfang der Wireframes zu implementieren und die im Video visualisierten Feinheiten zu berücksichtigen.
Am Aussehen dürfen Anpassungen vorgenommen werden.
### Kriterienkatalog
| **Anforderungen** | **Bemerkungen / geforderte Eigenschaften** | **Erfüllt?** |
|-----------------------------------------|------------------------------------------------------------------------------------------------------|--------------|
| Editieren und Erfassen von Notizen |
- Alle Felder vorhanden
- Alle Input-Typen richtig gesetzt
- Validation vom Input (Title required)
- Wichtigkeit zwischen 1-5
| Anzeigen von Einträgen | Wie in der Vorgabe (Video) | x |
| Sortieren von Notizen |
- Auf und Absteigend
- Bei Seiten-Refresh muss die Sortierung beibehalten werden.
| Filtern von „abgeschlossenen" Notizen | Bei Seiten-Refresh muss der Filter beibehalten werden. | x |
| Wechseln des Styles | Der Style auf Master und Detail anwenden. Bei Seiten-Wechsel sollte die Auswahl beibehalten werden. | x |
| Fluides Design | Die Seite soll auf Smartphone (IPhone 5) und Desktop ordentlich aussehen | x |
| Server Struktur |
- Sinnvolle File Struktur.
- z.B. Kein Datenbankzugriff im Controller
| Datenbank angebunden | nedb genutzt | x |
| Keine Daten | Ist die Liste der Notizen leer, soll dies auf sinnvolle Weise den Benutzern deutlich gemacht werden. | x |
| JS / HTML / CSS Qualität | Wie in WED1 gelernt.z.B. Kein Copy & Paste Code | x |
| Einschränkungen |
- kein JavaScript auf dem Client
- Hauptansicht ohne CSS-Grid von Bootstrap FlexBox und Media-Queries müssen eingesetzt werden