öffentliche Büro Dateien
IT-Beratung & Service S.G.

Dies ist eine alte Version des Dokuments!

---

erste Versuch wurde Projektname als Ordner angelegt diesen Teil löschen und aktuelle Verzeichnis angegeben!

(n20p3) intrepid-ibex@intrepid-ibex:~/2bhCode$ cd ibex-spielwiese/
(n20p3) intrepid-ibex@intrepid-ibex:~/2bhCode/ibex-spielwiese$ ls
index.html  main.js  package.json  package-lock.json  public  README.md  src  style.css
(n20p3) intrepid-ibex@intrepid-ibex:~/2bhCode/ibex-spielwiese$ git status
Auf Branch Referenzcode
Ihr Branch ist auf demselben Stand wie 'origin/Referenzcode'.

nichts zu committen, Arbeitsverzeichnis unverändert
(n20p3) intrepid-ibex@intrepid-ibex:~/2bhCode/ibex-spielwiese$ git checkout 
FETCH_HEAD            main                  origin/HEAD           origin/Referenzcode   
HEAD                  ORIG_HEAD             origin/main           Referenzcode          
(n20p3) intrepid-ibex@intrepid-ibex:~/2bhCode/ibex-spielwiese$ git checkout main 
Zu Zweig »main« gewechselt
Ihr Branch ist auf demselben Stand wie 'origin/main'.
(n20p3) intrepid-ibex@intrepid-ibex:~/2bhCode/ibex-spielwiese$ git status
Auf Branch main
Ihr Branch ist auf demselben Stand wie 'origin/main'.

nichts zu committen, Arbeitsverzeichnis unverändert
(n20p3) intrepid-ibex@intrepid-ibex:~/2bhCode/ibex-spielwiese$ 
(n20p3) intrepid-ibex@intrepid-ibex:~/2bhCode/ibex-spielwiese$ 
(n20p3) intrepid-ibex@intrepid-ibex:~/2bhCode/ibex-spielwiese$ ls
favicon.png  index.html  LICENSE  main.js  README.md  style.css
(n20p3) intrepid-ibex@intrepid-ibex:~/2bhCode/ibex-spielwiese$ 
(n20p3) intrepid-ibex@intrepid-ibex:~/2bhCode/ibex-spielwiese$ 
(n20p3) intrepid-ibex@intrepid-ibex:~/2bhCode/ibex-spielwiese$ 
(n20p3) intrepid-ibex@intrepid-ibex:~/2bhCode/ibex-spielwiese$ cat README.md 
# ibex-spielwiese
Quellcode zum gemeinschaftlichen programmieren von Kursinhalten.

[Notizen dazu](http://wiki.itbs.selfhost.co/doku.php?id=ibex:kursinhalte:spielwiese:start)

# General Infos

Wenn ihr das Projekt Video nicht abspielen könnt, installiert
den VLC Player über den Ubuntu Store und löschen die Standard
"Video"-App, dann werden alle Videos immer mit dem VLC Player
geöffnet


### Generelles Vorgehen

1. Starte immer mit dem HTML & CSS und versuche gedanklich
dein HTML so zu strukturieren, dass du schon weißt, welche
Elemente du später mit JavaScript manipulieren willst.

2. Mach deine App / Website responsiv, sodass sie auf allen
Geräten funktioniert und gut aussieht.

3. Implementiere JavaScript und beginne mit den Dingen, die
du am einfachsten findest. So hast du schnelle Erfolgserlebnisse.

4. Kopiere niemals Code von ChatGPT o.Ä. wenn du nicht 100%
sicher bist, dasss du den generierten Code verstanden hast.


## TO-DO

- [x] Erstelle ein GitHub Repo
- [x] Erstelle einen Netlify Account
- [x] Connecte GitHub Repo mit Netlify https://github.com/onlineCodes/ibex-spielwiese https://relaxed-otter-9ccf40.netlify.app
- [ ] Connecte GitHub Repo mit Netlify https://github.com/itbsStefan/solid-netlify
- [1] Nutze Vite für deine App
- [*] Commite deine Entwicklungsschritte
- [x] Deploy deine App auf Netlify Referenzcode
- [ ] Deploy deine App auf Netlify main Branch
- [ ] Commite deine Entwicklungsschritte benutze git commit -m "funktioniert ;-)"
  - [ ] Erstelle das Webdesign
  - [ ] Mache das Webdesign responsiv
  - [ ] Implementiere die JavaScript Funktionalität
  - [ ] Nutze JS Modules
  - [ ] Implementiere den Color-Mode Switcher (Html-Tag Data Attribute)
  - [ ] Implementiere einen Loading Spinner Indicator
  - [ ] Verbinde Such- & Filter-Funktion
  - [ ] Implementiere eine "Load More" & "Load Less" Funktion
  - [ ] Implementiere eine Country-Detail Seite
  - [ ] Lagere deine Funktionen aus (z.B. Objects)
- [ ] Lagere ein Object oder Functions aus
- [ ] BONUS: Implementiere eine Zeitzonen Live-Uhr
 
## Server Infos

+ Vite App Command: "npm create vite@latest"
+ Vite App Server Start: "npm run dev"
+ Vite App Build erstellen: "npm run build"


## Styling Infos

+ Nutze die Vite mitgelieferte style.css in erster Interation
+ Nutze Grid für die Country-Items
+ Ihr müsst nicht pixel-perfect arbeiten, aber folgendes berücksichtigen:

+ Scrollbar Selectoren: ::-webkit-scrollbar, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track

+ scrollbar-thumb border-radius: 10px;
+ scrollbar-track background-color: #242424

+ document background-color: #242424;
+ document font-color: rgba(255, 255, 255, 0.87);

+ input & select font-color: rgb(169, 167, 167);
+ input & select border-radius: 10px;
+ input padding-inline: 2rem;

+ country-item background-color: #213547;
+ grid-template-columns für Desktop: 5


## Nützliche Links
+ https://cssloaders.github.io/
+ https://developers.google.com/maps/documentation/javascript?hl=de
+ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl?retiredLocale=de
+ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC
+ https://restcountries.com/
+ https://www.w3schools.com/howto/howto_css_switch.asp
+ https://de.vitejs.dev/
+ https://www.netlify.com/
+ https://icon-sets.iconify.design/clarity/search-line/(n20p3) intrepid-ibex@intrepid-ibex:~/2bhCode/ibex-spielwiese$ node -v
v20.9.0
(n20p3) intrepid-ibex@intrepid-ibex:~/2bhCode/ibex-spielwiese$ npm -v
10.3.0
(n20p3) intrepid-ibex@intrepid-ibex:~/2bhCode/ibex-spielwiese$ npm run dev
npm ERR! Missing script: "dev"
npm ERR! 
npm ERR! To see a list of scripts, run:
npm ERR!   npm run

npm ERR! A complete log of this run can be found in: /home/intrepid-ibex/.npm/_logs/2024-01-19T18_26_01_806Z-debug-0.log
(n20p3) intrepid-ibex@intrepid-ibex:~/2bhCode/ibex-spielwiese$ npm run
(n20p3) intrepid-ibex@intrepid-ibex:~/2bhCode/ibex-spielwiese$ ls
favicon.png  index.html  LICENSE  main.js  README.md  style.css
(n20p3) intrepid-ibex@intrepid-ibex:~/2bhCode/ibex-spielwiese$ 
(n20p3) intrepid-ibex@intrepid-ibex:~/2bhCode/ibex-spielwiese$ 
(n20p3) intrepid-ibex@intrepid-ibex:~/2bhCode/ibex-spielwiese$ 
(n20p3) intrepid-ibex@intrepid-ibex:~/2bhCode/ibex-spielwiese$ npm create vite@latest
Need to install the following packages:
create-vite@5.1.0
Ok to proceed? (y) 
✔ Project name: … ibex-spielwiese
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript

Scaffolding project in /home/intrepid-ibex/2bhCode/ibex-spielwiese/ibex-spielwiese...

Done. Now run:

  cd ibex-spielwiese
  npm install
  npm run dev

(n20p3) intrepid-ibex@intrepid-ibex:~/2bhCode/ibex-spielwiese$ ls
favicon.png  ibex-spielwiese  index.html  LICENSE  main.js  README.md  style.css
(n20p3) intrepid-ibex@intrepid-ibex:~/2bhCode/ibex-spielwiese$ ls i
ibex-spielwiese/ index.html       
(n20p3) intrepid-ibex@intrepid-ibex:~/2bhCode/ibex-spielwiese$ ls ibex-spielwiese/
index.html  package.json  public  README.md  src  vite.config.js
(n20p3) intrepid-ibex@intrepid-ibex:~/2bhCode/ibex-spielwiese$ git status
Auf Branch main
Ihr Branch ist auf demselben Stand wie 'origin/main'.

Unversionierte Dateien:
  (benutzen Sie "git add <Datei>...", um die Änderungen zum Commit vorzumerken)
	ibex-spielwiese/

nichts zum Commit vorgemerkt, aber es gibt unversionierte Dateien
(benutzen Sie "git add" zum Versionieren)
(n20p3) intrepid-ibex@intrepid-ibex:~/2bhCode/ibex-spielwiese$ ls
favicon.png  ibex-spielwiese  index.html  LICENSE  main.js  README.md  style.css
(n20p3) intrepid-ibex@intrepid-ibex:~/2bhCode/ibex-spielwiese$ npm create vite@latest .
✔ Current directory is not empty. Please choose how to proceed: › Ignore files and continue
✔ Select a framework: › Vanilla
✔ Select a variant: › JavaScript

Scaffolding project in /home/intrepid-ibex/2bhCode/ibex-spielwiese...

Done. Now run:

  npm install
  npm run dev

(n20p3) intrepid-ibex@intrepid-ibex:~/2bhCode/ibex-spielwiese$ ls -la
insgesamt 60
drwxrwxr-x  4 intrepid-ibex intrepid-ibex 4096 Jan 19 19:40 .
drwxrwxr-x 18 intrepid-ibex intrepid-ibex 4096 Jan 19 18:07 ..
-rw-rw-r--  1 intrepid-ibex intrepid-ibex  247 Jan 19 19:40 counter.js
-rw-rw-r--  1 intrepid-ibex intrepid-ibex 1568 Jan 19 19:24 favicon.png
drwxrwxr-x  8 intrepid-ibex intrepid-ibex 4096 Jan 19 19:36 .git
-rw-rw-r--  1 intrepid-ibex intrepid-ibex  253 Jan 19 19:40 .gitignore
-rw-rw-r--  1 intrepid-ibex intrepid-ibex  351 Jan 19 19:40 index.html
-rw-rw-r--  1 intrepid-ibex intrepid-ibex  995 Jan 19 19:40 javascript.svg
-rw-rw-r--  1 intrepid-ibex intrepid-ibex 7048 Jan 19 19:24 LICENSE
-rw-rw-r--  1 intrepid-ibex intrepid-ibex  748 Jan 19 19:40 main.js
-rw-rw-r--  1 intrepid-ibex intrepid-ibex  238 Jan 19 19:40 package.json
drwxrwxr-x  2 intrepid-ibex intrepid-ibex 4096 Jan 19 19:40 public
-rw-rw-r--  1 intrepid-ibex intrepid-ibex 3377 Jan 19 19:24 README.md
-rw-rw-r--  1 intrepid-ibex intrepid-ibex 1530 Jan 19 19:40 style.css
(n20p3) intrepid-ibex@intrepid-ibex:~/2bhCode/ibex-spielwiese$ ls public/
vite.svg