diff --git a/.gitignore b/.gitignore index 772f614..ec37328 100644 --- a/.gitignore +++ b/.gitignore @@ -1,8 +1,8 @@ -node_modules/ -package-lock.json -mongodb/ -data/ - -Aufgaben/Aufgabe_10_2020-07-01 - +node_modules/ +package-lock.json +mongodb/ +data/ + +Aufgaben/Aufgabe_10_2020-07-01 + Endabgabe/#archiv \ No newline at end of file diff --git a/.vscode/launch.json b/.vscode/launch.json index 2ba986f..47adbad 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -1,15 +1,15 @@ -{ - // Use IntelliSense to learn about possible attributes. - // Hover to view descriptions of existing attributes. - // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 - "version": "0.2.0", - "configurations": [ - { - "type": "chrome", - "request": "launch", - "name": "Launch Chrome against localhost", - "url": "http://localhost:8080", - "webRoot": "${workspaceFolder}" - } - ] +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}" + } + ] } \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json index f673a71..63662ed 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ -{ - "liveServer.settings.port": 5502 +{ + "liveServer.settings.port": 5502 } \ No newline at end of file diff --git a/Aufgaben/Aufgabe_00_2020-04-22/index.html b/Aufgaben/Aufgabe_00_2020-04-22/index.html index 0f73ae3..6e09c3e 100644 --- a/Aufgaben/Aufgabe_00_2020-04-22/index.html +++ b/Aufgaben/Aufgabe_00_2020-04-22/index.html @@ -1,10 +1,10 @@ - - - - Aufgabe 0 - - - -

Wer das liest, ist ein toller Mensch ♥

- Schade, ich konnte dein Bild nicht finden :c + + + + Aufgabe 0 + + + +

Wer das liest, ist ein toller Mensch ♥

+ Schade, ich konnte dein Bild nicht finden :c \ No newline at end of file diff --git a/Aufgaben/Aufgabe_01_2020-04-29/index.html b/Aufgaben/Aufgabe_01_2020-04-29/index.html index adcfc02..abdb3f5 100644 --- a/Aufgaben/Aufgabe_01_2020-04-29/index.html +++ b/Aufgaben/Aufgabe_01_2020-04-29/index.html @@ -1,30 +1,30 @@ - - - - - Aufgabe 01 - - - - - Hier ist der Anker zu deinem Glück!
- This is supposed to be a picture of me! -

THIS IS ME

-

Ich bin Justin. Ich mag Kekse. Ich studiere Medieninformatik im zweiten Semester. Du möchtest mehr über mich wissen? Dann frag mich doch. :3

-

THIS IS MY FUTURE

-

Ich mag Informatik aber auch Medien. Also studiere ich Medieninformatik!

- -

Hier ist ein Link für: Youtube

- -

Homepage von Janina: Press me!

-

Homepage von Linda: Press me!

-

Homepage von Jacqueline: Press me!

- -

-























- You've found me ó_ò
- Here, have a cookie (UwU)~🍪 -

- - + + + + + Aufgabe 01 + + + + + Hier ist der Anker zu deinem Glück!
+ This is supposed to be a picture of me! +

THIS IS ME

+

Ich bin Justin. Ich mag Kekse. Ich studiere Medieninformatik im zweiten Semester. Du möchtest mehr über mich wissen? Dann frag mich doch. :3

+

THIS IS MY FUTURE

+

Ich mag Informatik aber auch Medien. Also studiere ich Medieninformatik!

+ +

Hier ist ein Link für: Youtube

+ +

Homepage von Janina: Press me!

+

Homepage von Linda: Press me!

+

Homepage von Jacqueline: Press me!

+ +

+























+ You've found me ó_ò
+ Here, have a cookie (UwU)~🍪 +

+ + \ No newline at end of file diff --git a/Aufgaben/Aufgabe_02_2020-05-06/about_me.html b/Aufgaben/Aufgabe_02_2020-05-06/about_me.html index 36a99cc..a4fd76c 100644 --- a/Aufgaben/Aufgabe_02_2020-05-06/about_me.html +++ b/Aufgaben/Aufgabe_02_2020-05-06/about_me.html @@ -1,78 +1,78 @@ - - - - - About Me - - - - -

Here you get ( o-o)~[ 20€ ]

-

Now you have to get me an A++ (ò-ó)

- -

Hier kommt ihr zu den anderen Seiten

- - -

This is real, this is me

-

This is exactly, where I'm supposed to be ♫

- -

Damit das "about mew!" mal gerechtfertigt ist:

-

Mew is also a Pokémon!

- - -
- - -
- - - - - - - - - - - - - - - - - - - - -
Hello I'm a table
a table without css is ugly
a table without css is ugly

- - Cheep Cheep, I'm a Sheep

- -
- Quick Mafs!
- - x = 5;
- y = 3;
- x + y = 8; - -
- -
    -
  1. Ich kann schon
    2. -
  2. den Zahlenbereich
    3. -
  3. von 1 bis 20
    4. -
- - - + + + + + About Me + + + + +

Here you get ( o-o)~[ 20€ ]

+

Now you have to get me an A++ (ò-ó)

+ +

Hier kommt ihr zu den anderen Seiten

+ + +

This is real, this is me

+

This is exactly, where I'm supposed to be ♫

+ +

Damit das "about mew!" mal gerechtfertigt ist:

+

Mew is also a Pokémon!

+ + +
+ + +
+ + + + + + + + + + + + + + + + + + + + +
Hello I'm a table
a table without css is ugly
a table without css is ugly

+ + Cheep Cheep, I'm a Sheep

+ +
+ Quick Mafs!
+ + x = 5;
+ y = 3;
+ x + y = 8; + +
+ +
    +
  1. Ich kann schon
    2. +
  2. den Zahlenbereich
    3. +
  3. von 1 bis 20
    4. +
+ + + \ No newline at end of file diff --git a/Aufgaben/Aufgabe_02_2020-05-06/contact.html b/Aufgaben/Aufgabe_02_2020-05-06/contact.html index 5ab6010..f173087 100644 --- a/Aufgaben/Aufgabe_02_2020-05-06/contact.html +++ b/Aufgaben/Aufgabe_02_2020-05-06/contact.html @@ -1,58 +1,58 @@ - - - - - Contact - - - - -

Look for stuff py pressing Ctrl + F

- -

Hier kommt ihr zu den anderen Seiten

- - -
- - -
- -

Hier ist eine PDF mit Leertext verlinkt!

-

Diese dient dazu, genug Datentypen für die Aufgabe zu verwenden.

- -

Mail

-

Justin.Dretvic@hs-furtwangen.de

- -

Facebook

- Facebook Logo -

Here is a related quote:

-
-

We're running the company to serve more people.

-

Said by: Mark Zuckerberg

-
- - -

Instagram

- Instagram Logo - - - - - + + + + + Contact + + + + +

Look for stuff py pressing Ctrl + F

+ +

Hier kommt ihr zu den anderen Seiten

+ + +
+ + +
+ +

Hier ist eine PDF mit Leertext verlinkt!

+

Diese dient dazu, genug Datentypen für die Aufgabe zu verwenden.

+ +

Mail

+

Justin.Dretvic@hs-furtwangen.de

+ +

Facebook

+ Facebook Logo +

Here is a related quote:

+
+

We're running the company to serve more people.

+

Said by: Mark Zuckerberg

+
+ + +

Instagram

+ Instagram Logo + + + + + \ No newline at end of file diff --git a/Aufgaben/Aufgabe_02_2020-05-06/portfolio.html b/Aufgaben/Aufgabe_02_2020-05-06/portfolio.html index cfe071b..97c4edf 100644 --- a/Aufgaben/Aufgabe_02_2020-05-06/portfolio.html +++ b/Aufgaben/Aufgabe_02_2020-05-06/portfolio.html @@ -1,51 +1,51 @@ - - - - - Portfolio - - - - - -

Willkommen auf meiner Website

- -

Ich bin ein Fan davon, Anforderungen zu abusen

- -
Ich hab jetzt schon 3 HTML-Elemente
- -

Hier kommt ihr zu den anderen Seiten

- - - Don't click on me

- -
- - -
- -

- -

- -

Don't you dare pressing on the play-button! I warned you!

-
- - - + + + + + Portfolio + + + + + +

Willkommen auf meiner Website

+ +

Ich bin ein Fan davon, Anforderungen zu abusen

+ +
Ich hab jetzt schon 3 HTML-Elemente
+ +

Hier kommt ihr zu den anderen Seiten

+ + + Don't click on me

+ +
+ + +
+ +

+ +

+ +

Don't you dare pressing on the play-button! I warned you!

+
+ + + \ No newline at end of file diff --git a/Aufgaben/Aufgabe_02_2020-05-06/tags_used.html b/Aufgaben/Aufgabe_02_2020-05-06/tags_used.html index 8f1c107..e37f635 100644 --- a/Aufgaben/Aufgabe_02_2020-05-06/tags_used.html +++ b/Aufgaben/Aufgabe_02_2020-05-06/tags_used.html @@ -1,161 +1,161 @@ - - - - - used tags - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
tag Nutzen portfolio About_me contact
<h1–6> header [X] [X] [X]
<p> paragraph [X] [X] [X]
<del> deleted [X] [ ] [ ]
<a> anchor [X] [X] [X]
<ul> unordered list [X] [X] [X]
<ol> ordered list [ ] [X] [ ]
<div> Container [X] [X] [X]
<table> Tabelle [ ] [X] [ ]
<code> code-block [ ] [X] [ ]
<img> image [ ] [X] [X]
<button> button [X] [ ] [ ]
<iframe> iframe [X] [ ] [ ]
<audio> audio control [X] [ ] [ ]
<br> break [X] [X] [X]
<embed> embed [ ] [X] [ ]
<label> label [X] [X] [X]
<input> input [X] [X] [X]
<footer> footer [ ] [ ] [X]
<blockquote> blockquote [ ] [ ] [X]
<b> [X] [X] [X]
- - + + + + + used tags + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
tag Nutzen portfolio About_me contact
<h1–6> header [X] [X] [X]
<p> paragraph [X] [X] [X]
<del> deleted [X] [ ] [ ]
<a> anchor [X] [X] [X]
<ul> unordered list [X] [X] [X]
<ol> ordered list [ ] [X] [ ]
<div> Container [X] [X] [X]
<table> Tabelle [ ] [X] [ ]
<code> code-block [ ] [X] [ ]
<img> image [ ] [X] [X]
<button> button [X] [ ] [ ]
<iframe> iframe [X] [ ] [ ]
<audio> audio control [X] [ ] [ ]
<br> break [X] [X] [X]
<embed> embed [ ] [X] [ ]
<label> label [X] [X] [X]
<input> input [X] [X] [X]
<footer> footer [ ] [ ] [X]
<blockquote> blockquote [ ] [ ] [X]
<b> [X] [X] [X]
+ + \ No newline at end of file diff --git a/Aufgaben/Aufgabe_03_2020-05-13/about_me.html b/Aufgaben/Aufgabe_03_2020-05-13/about_me.html index 5848692..0298017 100644 --- a/Aufgaben/Aufgabe_03_2020-05-13/about_me.html +++ b/Aufgaben/Aufgabe_03_2020-05-13/about_me.html @@ -1,127 +1,127 @@ - - - - - - - - About Me - - - - - - - - A B O U T - M E - - - - -
- -
- -
- -
-

Here you get ( o-o)~[ 20€ ]

-

Now you HAVE TO get me an A++ (ò-ó)

-
- -
-

This is real, this is me

-

This is exactly, where I'm supposed to be ♫

-
- -
-

I'm a D I G I M O N

- - pokeball - -
- - -
-
- - - - - - - - - - - - - - - - - - - - - - - -
WHICH ONE AM I?

- -
-
- Quick Mafs!
- - x = 5;
- y = 3;
- x + y = 8; - -
- -
-
    -
  1. Ich kann schon
    2. -
  2. den Zahlenbereich
    3. -
  3. von 1 bis 20
    4. -
-
-
- -
-

Ich saß zu viele Stunden an der Aufgabe, irgendwann hab ich das Design nur noch sehr einfach gehalten. - Bitte - vergebt mir, Eure Dozentheit! :c

-
- -
- - - - + + + + + + + + About Me + + + + + + + + A B O U T + M E + + + + +
+ +
+ +
+ +
+

Here you get ( o-o)~[ 20€ ]

+

Now you HAVE TO get me an A++ (ò-ó)

+
+ +
+

This is real, this is me

+

This is exactly, where I'm supposed to be ♫

+
+ +
+

I'm a D I G I M O N

+ + pokeball + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + +
WHICH ONE AM I?

+ +
+
+ Quick Mafs!
+ + x = 5;
+ y = 3;
+ x + y = 8; + +
+ +
+
    +
  1. Ich kann schon
    2. +
  2. den Zahlenbereich
    3. +
  3. von 1 bis 20
    4. +
+
+
+ +
+

Ich saß zu viele Stunden an der Aufgabe, irgendwann hab ich das Design nur noch sehr einfach gehalten. + Bitte + vergebt mir, Eure Dozentheit! :c

+
+ +
+ + + + \ No newline at end of file diff --git a/Aufgaben/Aufgabe_03_2020-05-13/basic.css b/Aufgaben/Aufgabe_03_2020-05-13/basic.css index 0819eee..964c079 100644 --- a/Aufgaben/Aufgabe_03_2020-05-13/basic.css +++ b/Aufgaben/Aufgabe_03_2020-05-13/basic.css @@ -1,89 +1,89 @@ -p,a,h1,h2,h3,h4,h5,h6{ - font-family: sans-serif; -} - -body { - background-image: url(bg.png); - background-color: #03396c; - margin: 0; -} - -footer { - position: relative; - bottom: 0; - width: 100% ; - background-color: #005b96; - padding: 30px 20px; - text-align: center; - border-top: solid #011f4b; -} - -footer a { - text-decoration: none ; - color: black; -} - -a { - text-decoration: none; -} - -svg { - margin: 0px 30px 10px; -} - -svg text { - color: transparent; -} - -.navigation ul { - list-style-type: none; - position: fixed; - top: 0; - width: 240px; - background-color: #005b96; - margin: 0px 0px 0px 80%; - padding: 0px 5px; - align-items: center; - border: solid #011f4b; - border-radius: 0px 0px 15px 15px; -} - -.navigation li { - float: left; -} - -.navigation a.active { - color: #011f4b; - font-weight: bold; -} - -.navigation a { - display: block; - color: white; - padding: 4px 6px; -} - -.navigation a:hover { - color: #00cc00; -} - -.achthundert { - width: 800px ; - margin: 0px auto; - padding: 0px auto; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.second_nav a { - text-decoration: none; - font-size: 30px; - color: black; -} - -.second_nav a :hover{ - color: white; -} - +p,a,h1,h2,h3,h4,h5,h6{ + font-family: sans-serif; +} + +body { + background-image: url(bg.png); + background-color: #03396c; + margin: 0; +} + +footer { + position: relative; + bottom: 0; + width: 100% ; + background-color: #005b96; + padding: 30px 20px; + text-align: center; + border-top: solid #011f4b; +} + +footer a { + text-decoration: none ; + color: black; +} + +a { + text-decoration: none; +} + +svg { + margin: 0px 30px 10px; +} + +svg text { + color: transparent; +} + +.navigation ul { + list-style-type: none; + position: fixed; + top: 0; + width: 240px; + background-color: #005b96; + margin: 0px 0px 0px 80%; + padding: 0px 5px; + align-items: center; + border: solid #011f4b; + border-radius: 0px 0px 15px 15px; +} + +.navigation li { + float: left; +} + +.navigation a.active { + color: #011f4b; + font-weight: bold; +} + +.navigation a { + display: block; + color: white; + padding: 4px 6px; +} + +.navigation a:hover { + color: #00cc00; +} + +.achthundert { + width: 800px ; + margin: 0px auto; + padding: 0px auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.second_nav a { + text-decoration: none; + font-size: 30px; + color: black; +} + +.second_nav a :hover{ + color: white; +} + diff --git a/Aufgaben/Aufgabe_03_2020-05-13/contact.css b/Aufgaben/Aufgabe_03_2020-05-13/contact.css index 846f140..4b25851 100644 --- a/Aufgaben/Aufgabe_03_2020-05-13/contact.css +++ b/Aufgaben/Aufgabe_03_2020-05-13/contact.css @@ -1,72 +1,72 @@ -.socialMedia { - display: grid; - grid-template-columns: 65% 30%; - column-gap: 5%; - margin: 20px 0px 0px 0px; - padding: 20px; - background-color: #005b96; - border: solid #011f4b; - border-radius: 15px; - width: 80%; - text-align: center; -} - -.contact_me { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin: 20px 0px 20px 0px; - padding: 20px; - background-color: #005b96; - border: solid #011f4b; - border-radius: 15px; - width: 80%; -} - -.contact_me form { - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-start; -} - -.contact_me input, textarea{ - margin: 2px 0px 5px; -} - -.socialMediaText h1 { - font-size: 50px; - margin: 10px 0px; -} - -.socialMediaText p { - margin: 2px 0px; -} - -.socialMediaText{ - margin: auto; -} - -.socialMedia i { - margin: auto; -} - -.socialMedia a :hover{ - color: white; -} - -.socialMedia a { - text-decoration: none ; - color: black; -} - -#extra { - font-size: 10px; - color: lightgrey; -} - -#extra a { - text-decoration: underline; - color: lightgrey; -} +.socialMedia { + display: grid; + grid-template-columns: 65% 30%; + column-gap: 5%; + margin: 20px 0px 0px 0px; + padding: 20px; + background-color: #005b96; + border: solid #011f4b; + border-radius: 15px; + width: 80%; + text-align: center; +} + +.contact_me { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 20px 0px 20px 0px; + padding: 20px; + background-color: #005b96; + border: solid #011f4b; + border-radius: 15px; + width: 80%; +} + +.contact_me form { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; +} + +.contact_me input, textarea{ + margin: 2px 0px 5px; +} + +.socialMediaText h1 { + font-size: 50px; + margin: 10px 0px; +} + +.socialMediaText p { + margin: 2px 0px; +} + +.socialMediaText{ + margin: auto; +} + +.socialMedia i { + margin: auto; +} + +.socialMedia a :hover{ + color: white; +} + +.socialMedia a { + text-decoration: none ; + color: black; +} + +#extra { + font-size: 10px; + color: lightgrey; +} + +#extra a { + text-decoration: underline; + color: lightgrey; +} diff --git a/Aufgaben/Aufgabe_03_2020-05-13/contact.html b/Aufgaben/Aufgabe_03_2020-05-13/contact.html index fbfca2b..4fddb95 100644 --- a/Aufgaben/Aufgabe_03_2020-05-13/contact.html +++ b/Aufgaben/Aufgabe_03_2020-05-13/contact.html @@ -1,116 +1,116 @@ - - - - - - - - Contact - - - - -
-
- -
- - - - C O N T A C T - - -
- -
- -
-
-

Facebook

-

Justin Dretvic

-
- - - - -
- - - -
-
-

Instagram

-

@justin_da_ghost

-
- - - -
- -
-
-

Xing

-

Justin Dretvic

-
- - - -
- -
-
-

E-Mail

-

Justin.Dretvic@hs-furtwangen.de

-
- - - -
- -
-

Kontaktiere mich doch!

-
- - - - -

Mit Absenden der Nachricht bestätige ich
den Datenschutz

- -
-
- - - -
- - - - - + + + + + + + + Contact + + + + +
+
+ +
+ + + + C O N T A C T + + +
+ +
+ +
+
+

Facebook

+

Justin Dretvic

+
+ + + + +
+ + + +
+
+

Instagram

+

@justin_da_ghost

+
+ + + +
+ +
+
+

Xing

+

Justin Dretvic

+
+ + + +
+ +
+
+

E-Mail

+

Justin.Dretvic@hs-furtwangen.de

+
+ + + +
+ +
+

Kontaktiere mich doch!

+
+ + + + +

Mit Absenden der Nachricht bestätige ich
den Datenschutz

+ +
+
+ + + +
+ + + + + \ No newline at end of file diff --git a/Aufgaben/Aufgabe_03_2020-05-13/portfolio.css b/Aufgaben/Aufgabe_03_2020-05-13/portfolio.css index fd8bf95..90ea55e 100644 --- a/Aufgaben/Aufgabe_03_2020-05-13/portfolio.css +++ b/Aufgaben/Aufgabe_03_2020-05-13/portfolio.css @@ -1,68 +1,68 @@ -.containment { -position: relative; - overflow: hidden; - width: 100%; - padding-top: 56.25%; -} - -#youtube { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - width: 99%; - height: 100%; - border: solid #011f4b; -} - -h1, h3{ - border: solid #011f4b; - border-radius: 30px; - padding: 10px; - background-color: #005b96; - color: white -} - -#anchor_tag { - text-decoration: none; - color: black; - border: dotted #011f4b; - background-color: #b3cde0; - padding: 5px; -} - -#button { - color: #011f4b; - font-weight: bold; - background-color: #b3cde0; - padding: 5px; - margin: 25px 0px 10px; -} - -#audio { - display: flex; - flex-direction: column; - align-items: center ; - background-color: #005b96; - border: solid #011f4b; - border-radius: 100px; - color: white; - margin: 30px 0px 30px; - padding: 30px; -} - -#audio audio { - border: solid #03396c; - border-radius: 100px; - margin-top: 10px; -} - -#audio p { - margin: 2px -} - -span { - color: red; - font-weight: bolder; +.containment { +position: relative; + overflow: hidden; + width: 100%; + padding-top: 56.25%; +} + +#youtube { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + width: 99%; + height: 100%; + border: solid #011f4b; +} + +h1, h3{ + border: solid #011f4b; + border-radius: 30px; + padding: 10px; + background-color: #005b96; + color: white +} + +#anchor_tag { + text-decoration: none; + color: black; + border: dotted #011f4b; + background-color: #b3cde0; + padding: 5px; +} + +#button { + color: #011f4b; + font-weight: bold; + background-color: #b3cde0; + padding: 5px; + margin: 25px 0px 10px; +} + +#audio { + display: flex; + flex-direction: column; + align-items: center ; + background-color: #005b96; + border: solid #011f4b; + border-radius: 100px; + color: white; + margin: 30px 0px 30px; + padding: 30px; +} + +#audio audio { + border: solid #03396c; + border-radius: 100px; + margin-top: 10px; +} + +#audio p { + margin: 2px +} + +span { + color: red; + font-weight: bolder; } \ No newline at end of file diff --git a/Aufgaben/Aufgabe_03_2020-05-13/portfolio.html b/Aufgaben/Aufgabe_03_2020-05-13/portfolio.html index fcb5ce6..a75d2e2 100644 --- a/Aufgaben/Aufgabe_03_2020-05-13/portfolio.html +++ b/Aufgaben/Aufgabe_03_2020-05-13/portfolio.html @@ -1,91 +1,91 @@ - - - - - - - - Portfolio - - - - - -
- - - P O R T F O L I O - - -
- -
- -
- -
- - -

Willkommen auf meiner Website

- -

Die Website zeigt Ihnen ein paar HTML-Tags

- -
Ich hab jetzt schon 3 HTML-Elemente
- - - - Don't click on me

- -
- - -
- -

- -
-

-
- -
-

Don't you dare pressing on the play-button!

-

I warned you!

-
-
- - -
- - - - - + + + + + + + + Portfolio + + + + + +
+ + + P O R T F O L I O + + +
+ +
+ +
+ +
+ + +

Willkommen auf meiner Website

+ +

Die Website zeigt Ihnen ein paar HTML-Tags

+ +
Ich hab jetzt schon 3 HTML-Elemente
+ + + + Don't click on me

+ +
+ + +
+ +

+ +
+

+
+ +
+

Don't you dare pressing on the play-button!

+

I warned you!

+
+
+ + +
+ + + + + \ No newline at end of file diff --git a/Aufgaben/Aufgabe_03_2020-05-13/tags_used.html b/Aufgaben/Aufgabe_03_2020-05-13/tags_used.html index 8f1c107..e37f635 100644 --- a/Aufgaben/Aufgabe_03_2020-05-13/tags_used.html +++ b/Aufgaben/Aufgabe_03_2020-05-13/tags_used.html @@ -1,161 +1,161 @@ - - - - - used tags - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
tag Nutzen portfolio About_me contact
<h1–6> header [X] [X] [X]
<p> paragraph [X] [X] [X]
<del> deleted [X] [ ] [ ]
<a> anchor [X] [X] [X]
<ul> unordered list [X] [X] [X]
<ol> ordered list [ ] [X] [ ]
<div> Container [X] [X] [X]
<table> Tabelle [ ] [X] [ ]
<code> code-block [ ] [X] [ ]
<img> image [ ] [X] [X]
<button> button [X] [ ] [ ]
<iframe> iframe [X] [ ] [ ]
<audio> audio control [X] [ ] [ ]
<br> break [X] [X] [X]
<embed> embed [ ] [X] [ ]
<label> label [X] [X] [X]
<input> input [X] [X] [X]
<footer> footer [ ] [ ] [X]
<blockquote> blockquote [ ] [ ] [X]
<b> [X] [X] [X]
- - + + + + + used tags + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
tag Nutzen portfolio About_me contact
<h1–6> header [X] [X] [X]
<p> paragraph [X] [X] [X]
<del> deleted [X] [ ] [ ]
<a> anchor [X] [X] [X]
<ul> unordered list [X] [X] [X]
<ol> ordered list [ ] [X] [ ]
<div> Container [X] [X] [X]
<table> Tabelle [ ] [X] [ ]
<code> code-block [ ] [X] [ ]
<img> image [ ] [X] [X]
<button> button [X] [ ] [ ]
<iframe> iframe [X] [ ] [ ]
<audio> audio control [X] [ ] [ ]
<br> break [X] [X] [X]
<embed> embed [ ] [X] [ ]
<label> label [X] [X] [X]
<input> input [X] [X] [X]
<footer> footer [ ] [ ] [X]
<blockquote> blockquote [ ] [ ] [X]
<b> [X] [X] [X]
+ + \ No newline at end of file diff --git a/Aufgaben/Aufgabe_04_2020-05-20/product-big.css b/Aufgaben/Aufgabe_04_2020-05-20/product-big.css index 75c1953..3a38a67 100644 --- a/Aufgaben/Aufgabe_04_2020-05-20/product-big.css +++ b/Aufgaben/Aufgabe_04_2020-05-20/product-big.css @@ -1,89 +1,89 @@ -#übersicht { - display: flex; - flex-direction: column; - align-items: center; -} - -.container { - display: flex; - flex-direction: row; - justify-content: center; - flex-wrap: wrap; - margin: 10px 0px; - padding: 0px 10px; -} - -.container .product { - width: 300px; - display: flex; - flex-direction: column; - justify-content: center; - padding: 10px; - align-items: center; - border: solid #006a4e; - background-color: #b8d5cd; - border-radius: 40px; -} - -.container .product img { - width: 90%; - height: auto; - max-height: 300px; - border: solid #006a4e; - border-radius: 40px; - overflow: hidden; - object-fit: fill; -} - -.container .product p, h3 { - margin: 5px 0px; -} - -.container .product .title { - font-size: 20px; -} - -.container .product .shopIn { - display: flex; - flex-direction: row; - justify-content: start; - vertical-align: middle; -} - -.container .product .shopIn span,button{ - display: flex; - vertical-align: middle; - margin: 10px 10px; - font-size: 30px; -} - -.container .product .shopIn button>span.buttonModifier { - text-align: center; - margin: 0px; - padding: 3px; -} - -.container .product .shopIn button{ - border-radius: 30px; - border-color: #006a4e; - background-color: #2e856e; - width: 40px; - height: 40px; - text-align: center; - padding: 0px 10px; - color: #b8d5cd; - font-size: 30px; -} - -.container .product .size { - font-size: 20px; -} - -.container .product .description{ - display: flex; - flex-direction: column; - justify-content: center; - text-align: justify; - height: 150px; - font-size: 20px; +#übersicht { + display: flex; + flex-direction: column; + align-items: center; +} + +.container { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + margin: 10px 0px; + padding: 0px 10px; +} + +.container .product { + width: 300px; + display: flex; + flex-direction: column; + justify-content: center; + padding: 10px; + align-items: center; + border: solid #006a4e; + background-color: #b8d5cd; + border-radius: 40px; +} + +.container .product img { + width: 90%; + height: auto; + max-height: 300px; + border: solid #006a4e; + border-radius: 40px; + overflow: hidden; + object-fit: fill; +} + +.container .product p, h3 { + margin: 5px 0px; +} + +.container .product .title { + font-size: 20px; +} + +.container .product .shopIn { + display: flex; + flex-direction: row; + justify-content: start; + vertical-align: middle; +} + +.container .product .shopIn span,button{ + display: flex; + vertical-align: middle; + margin: 10px 10px; + font-size: 30px; +} + +.container .product .shopIn button>span.buttonModifier { + text-align: center; + margin: 0px; + padding: 3px; +} + +.container .product .shopIn button{ + border-radius: 30px; + border-color: #006a4e; + background-color: #2e856e; + width: 40px; + height: 40px; + text-align: center; + padding: 0px 10px; + color: #b8d5cd; + font-size: 30px; +} + +.container .product .size { + font-size: 20px; +} + +.container .product .description{ + display: flex; + flex-direction: column; + justify-content: center; + text-align: justify; + height: 150px; + font-size: 20px; } \ No newline at end of file diff --git a/Aufgaben/Aufgabe_04_2020-05-20/product-medium.css b/Aufgaben/Aufgabe_04_2020-05-20/product-medium.css index a5579e6..e285486 100644 --- a/Aufgaben/Aufgabe_04_2020-05-20/product-medium.css +++ b/Aufgaben/Aufgabe_04_2020-05-20/product-medium.css @@ -1,94 +1,94 @@ -#übersicht { - display: flex; - flex-direction: column; - align-items: center; -} - -.container { - display: flex; - flex-direction: row; - justify-content: center; - flex-wrap: wrap; - margin: 10px 0px; - padding: 0px 10px; -} - -.container .product { - display: flex; - flex-direction: column; - justify-content: center; - padding: 10px; - align-items: center; - border: solid #006a4e; - background-color: #b8d5cd; - border-radius: 40px; - margin: 10px 20px; - width: 40%; -} - -.container .product img { - width: 90%; - height: width; - max-height: 400px; - border: solid #006a4e; - border-radius: 40px; - overflow: hidden; - object-fit: fill; -} - -.container .product p, h3 { - margin: 5px 0px; -} - -.container .product .title { - font-size: 30px; -} - -.container .product .shopIn { - display: flex; - flex-direction: row; - justify-content: start; - vertical-align: middle; -} - -.container .product .shopIn span,button{ - display: flex; - vertical-align: middle; - margin: 10px 10px; - font-size: 30px; -} - -.container .product .shopIn button>span.buttonModifier { - text-align: center; - margin: 0px; - padding: 3px; -} - -.container .product .shopIn button{ - border-radius: 30px; - border-color: #006a4e; - background-color: #2e856e; - width: 40px; - height: 40px; - text-align: center; - padding: 0px 10px; - color: #b8d5cd; - font-size: 30px; -} - -.container .product .size { - font-size: 25px; -} - -.container .product .description{ - display: flex; - flex-direction: column; - justify-content: center; - text-align: justify; - height: 150px; -} - -#bunt,#grün,#special { - font-size: 50px; - color: #006a4e; +#übersicht { + display: flex; + flex-direction: column; + align-items: center; +} + +.container { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + margin: 10px 0px; + padding: 0px 10px; +} + +.container .product { + display: flex; + flex-direction: column; + justify-content: center; + padding: 10px; + align-items: center; + border: solid #006a4e; + background-color: #b8d5cd; + border-radius: 40px; + margin: 10px 20px; + width: 40%; +} + +.container .product img { + width: 90%; + height: width; + max-height: 400px; + border: solid #006a4e; + border-radius: 40px; + overflow: hidden; + object-fit: fill; +} + +.container .product p, h3 { + margin: 5px 0px; +} + +.container .product .title { + font-size: 30px; +} + +.container .product .shopIn { + display: flex; + flex-direction: row; + justify-content: start; + vertical-align: middle; +} + +.container .product .shopIn span,button{ + display: flex; + vertical-align: middle; + margin: 10px 10px; + font-size: 30px; +} + +.container .product .shopIn button>span.buttonModifier { + text-align: center; + margin: 0px; + padding: 3px; +} + +.container .product .shopIn button{ + border-radius: 30px; + border-color: #006a4e; + background-color: #2e856e; + width: 40px; + height: 40px; + text-align: center; + padding: 0px 10px; + color: #b8d5cd; + font-size: 30px; +} + +.container .product .size { + font-size: 25px; +} + +.container .product .description{ + display: flex; + flex-direction: column; + justify-content: center; + text-align: justify; + height: 150px; +} + +#bunt,#grün,#special { + font-size: 50px; + color: #006a4e; } \ No newline at end of file diff --git a/Aufgaben/Aufgabe_04_2020-05-20/product-small.css b/Aufgaben/Aufgabe_04_2020-05-20/product-small.css index 3d0f2e0..9465889 100644 --- a/Aufgaben/Aufgabe_04_2020-05-20/product-small.css +++ b/Aufgaben/Aufgabe_04_2020-05-20/product-small.css @@ -1,87 +1,87 @@ -.container { - display: flex; - flex-direction: column; - justify-content: center; - margin: 10px 0px; - padding: 0px 10px; -} - -.container .product { - display: flex; - flex-direction: column; - justify-content: center; - padding: 10px; - align-items: center; - border: solid #006a4e; - background-color: #b8d5cd; - border-radius: 40px; - margin: 10px 0px; -} - -.container .product img { - width: 90%; - height: auto; - max-height: 300px; - border: solid #006a4e; - border-radius: 40px; - overflow: hidden; - object-fit: fill; -} - -.container .product p, h3 { - margin: 5px 0px; -} - -.container .product .title { - font-size: 20px; -} - -.container .product .shopIn { - display: flex; - flex-direction: row; - justify-content: start; - vertical-align: middle; -} - -.container .product .shopIn span,button{ - display: flex; - vertical-align: middle; - margin: 10px 10px; - font-size: 30px; -} - -.container .product .shopIn button>span.buttonModifier { - text-align: center; - margin: 0px; - padding: 3px; -} - -.container .product .shopIn button{ - border-radius: 30px; - border-color: #006a4e; - background-color: #2e856e; - width: 40px; - height: 40px; - text-align: center; - padding: 0px 10px; - color: #b8d5cd; - font-size: 30px; -} - -.container .product .size { - font-size: 20px; -} - -.container .product .description{ - display: flex; - flex-direction: column; - justify-content: center; - text-align: justify; - height: 100px; -} - -#bunt,#grün,#special { - text-align: center; - font-size: 30px; - color: #006a4e; +.container { + display: flex; + flex-direction: column; + justify-content: center; + margin: 10px 0px; + padding: 0px 10px; +} + +.container .product { + display: flex; + flex-direction: column; + justify-content: center; + padding: 10px; + align-items: center; + border: solid #006a4e; + background-color: #b8d5cd; + border-radius: 40px; + margin: 10px 0px; +} + +.container .product img { + width: 90%; + height: auto; + max-height: 300px; + border: solid #006a4e; + border-radius: 40px; + overflow: hidden; + object-fit: fill; +} + +.container .product p, h3 { + margin: 5px 0px; +} + +.container .product .title { + font-size: 20px; +} + +.container .product .shopIn { + display: flex; + flex-direction: row; + justify-content: start; + vertical-align: middle; +} + +.container .product .shopIn span,button{ + display: flex; + vertical-align: middle; + margin: 10px 10px; + font-size: 30px; +} + +.container .product .shopIn button>span.buttonModifier { + text-align: center; + margin: 0px; + padding: 3px; +} + +.container .product .shopIn button{ + border-radius: 30px; + border-color: #006a4e; + background-color: #2e856e; + width: 40px; + height: 40px; + text-align: center; + padding: 0px 10px; + color: #b8d5cd; + font-size: 30px; +} + +.container .product .size { + font-size: 20px; +} + +.container .product .description{ + display: flex; + flex-direction: column; + justify-content: center; + text-align: justify; + height: 100px; +} + +#bunt,#grün,#special { + text-align: center; + font-size: 30px; + color: #006a4e; } \ No newline at end of file diff --git a/Aufgaben/Aufgabe_04_2020-05-20/product.css b/Aufgaben/Aufgabe_04_2020-05-20/product.css index e84906b..498acee 100644 --- a/Aufgaben/Aufgabe_04_2020-05-20/product.css +++ b/Aufgaben/Aufgabe_04_2020-05-20/product.css @@ -1,76 +1,76 @@ -.container { - display: flex; - flex-direction: column; - justify-content: center; - margin: 10px 0px; - padding: 0px 10px; -} - -.container .product { - display: flex; - flex-direction: column; - justify-content: center; - padding: 10px; - align-items: center; - border: solid #006a4e; - background-color: #b8d5cd; - border-radius: 40px; -} - -.container .product img { - width: 90%; - height: auto; - max-height: 300px; - border: solid #006a4e; - border-radius: 40px; - overflow: hidden; - object-fit: none; -} - -.container .product p, h3 { - margin: 5px 0px; -} - -.container .product .title { - font-size: 20px; -} - -.container .product .shopIn { - display: flex; - flex-direction: row; - justify-content: start; - vertical-align: middle; -} - -.container .product .shopIn span,button{ - display: flex; - vertical-align: middle; - margin: 10px 10px; - font-size: 30px; -} - -.container .product .shopIn button>span.buttonModifier { - text-align: center; - margin: 0px; - padding: 3px; -} - -.container .product .shopIn button{ -border-radius: 30px; -border-color: #006a4e; -background-color: #2e856e; -width: 40px; -height: 40px; -text-align: center; -padding: 0px 10px; -color: #b8d5cd; -font-size: 30px; -} - -.container .product .size { - font-size: 20px; -} - -.container .product .description{ - text-align: justify; +.container { + display: flex; + flex-direction: column; + justify-content: center; + margin: 10px 0px; + padding: 0px 10px; +} + +.container .product { + display: flex; + flex-direction: column; + justify-content: center; + padding: 10px; + align-items: center; + border: solid #006a4e; + background-color: #b8d5cd; + border-radius: 40px; +} + +.container .product img { + width: 90%; + height: auto; + max-height: 300px; + border: solid #006a4e; + border-radius: 40px; + overflow: hidden; + object-fit: none; +} + +.container .product p, h3 { + margin: 5px 0px; +} + +.container .product .title { + font-size: 20px; +} + +.container .product .shopIn { + display: flex; + flex-direction: row; + justify-content: start; + vertical-align: middle; +} + +.container .product .shopIn span,button{ + display: flex; + vertical-align: middle; + margin: 10px 10px; + font-size: 30px; +} + +.container .product .shopIn button>span.buttonModifier { + text-align: center; + margin: 0px; + padding: 3px; +} + +.container .product .shopIn button{ +border-radius: 30px; +border-color: #006a4e; +background-color: #2e856e; +width: 40px; +height: 40px; +text-align: center; +padding: 0px 10px; +color: #b8d5cd; +font-size: 30px; +} + +.container .product .size { + font-size: 20px; +} + +.container .product .description{ + text-align: justify; } \ No newline at end of file diff --git a/Aufgaben/Aufgabe_04_2020-05-20/shop.css b/Aufgaben/Aufgabe_04_2020-05-20/shop.css index a5e8bfe..2493666 100644 --- a/Aufgaben/Aufgabe_04_2020-05-20/shop.css +++ b/Aufgaben/Aufgabe_04_2020-05-20/shop.css @@ -1,124 +1,124 @@ -body { - margin: 0; - font-family: Chelsea Market; -} - -header { - padding: 10px 0px; - position: relative; - top: 0; - width: 100%; - background-color: #006a4e; - color: #b8d5cd; -} - -header ul { - list-style: none; - padding: 0px; -} - -header li { - display: block; - margin: 10px auto 0px; -} - -header li a { - text-decoration: none; - color: #b8d5cd; -} - -header .dropdown { - text-align: center; - font-size: 20px; - position: relative; - display: block; - background-color: #2e856e; - border-radius: 40px; - margin: 10px 5px 0px 5px; - padding: 10px 0px; - width: 80%; -} - -header .dropdown-content { - display: none; -} - -header .dropdown:hover .dropdown-content { - display: block; - margin-bottom: 0px; -} - -header #shopping_cart { - text-align: center; - position: relative; - display: block; - background-color: #2e856e; - border-radius: 40px; - margin: 10px 5px 0px 5px; - padding: 10px 0px; - width: 60px; - height: 30px; -} - -header #shopping_cart a { - text-decoration: none; - color: #b8d5cd; - font-size:24px -} - -header #shopping_cart a:hover { - color: white; -} - -header .title_bar img { - width: 40px; - height: 40px; - margin: 5px 15px; -} - -header .title_bar span { - font-size: 27px; - line-height: 50px; - margin: auto 0px; -} - -header .title_bar { - display: flex; - flex-direction: row; - justify-content: center; - background-color: #2e856e; - border-radius: 40px; - padding: 5px; - margin: 5px -} - -header #bottom { - display: flex; - flex-direction: row; - justify-content: center; -} - -header #shopping_cart { - margin: 10px auto; - text-align: center; - color: #b8d5cd; - display: block; - background-color: #2e856e; - border-radius: 40px; - margin: 10px 5px 0px 5px; - padding: 10px 0px; -} - -footer { - text-align: center; - padding: 10px 5px; - position: relative; - bottom: 0; - width: calc(100%-10px); - background-color: #272727; - color: white; -} - -footer p { - margin: 0px 0px 10px; +body { + margin: 0; + font-family: Chelsea Market; +} + +header { + padding: 10px 0px; + position: relative; + top: 0; + width: 100%; + background-color: #006a4e; + color: #b8d5cd; +} + +header ul { + list-style: none; + padding: 0px; +} + +header li { + display: block; + margin: 10px auto 0px; +} + +header li a { + text-decoration: none; + color: #b8d5cd; +} + +header .dropdown { + text-align: center; + font-size: 20px; + position: relative; + display: block; + background-color: #2e856e; + border-radius: 40px; + margin: 10px 5px 0px 5px; + padding: 10px 0px; + width: 80%; +} + +header .dropdown-content { + display: none; +} + +header .dropdown:hover .dropdown-content { + display: block; + margin-bottom: 0px; +} + +header #shopping_cart { + text-align: center; + position: relative; + display: block; + background-color: #2e856e; + border-radius: 40px; + margin: 10px 5px 0px 5px; + padding: 10px 0px; + width: 60px; + height: 30px; +} + +header #shopping_cart a { + text-decoration: none; + color: #b8d5cd; + font-size:24px +} + +header #shopping_cart a:hover { + color: white; +} + +header .title_bar img { + width: 40px; + height: 40px; + margin: 5px 15px; +} + +header .title_bar span { + font-size: 27px; + line-height: 50px; + margin: auto 0px; +} + +header .title_bar { + display: flex; + flex-direction: row; + justify-content: center; + background-color: #2e856e; + border-radius: 40px; + padding: 5px; + margin: 5px +} + +header #bottom { + display: flex; + flex-direction: row; + justify-content: center; +} + +header #shopping_cart { + margin: 10px auto; + text-align: center; + color: #b8d5cd; + display: block; + background-color: #2e856e; + border-radius: 40px; + margin: 10px 5px 0px 5px; + padding: 10px 0px; +} + +footer { + text-align: center; + padding: 10px 5px; + position: relative; + bottom: 0; + width: calc(100%-10px); + background-color: #272727; + color: white; +} + +footer p { + margin: 0px 0px 10px; } \ No newline at end of file diff --git a/Aufgaben/Aufgabe_04_2020-05-20/shop.html b/Aufgaben/Aufgabe_04_2020-05-20/shop.html index 1bd36e8..f377027 100644 --- a/Aufgaben/Aufgabe_04_2020-05-20/shop.html +++ b/Aufgaben/Aufgabe_04_2020-05-20/shop.html @@ -1,302 +1,302 @@ - - - - - - - - - - - - - green grass - - - -
-
- grass - GREEEN GRASS - grass -
-
-
- Categories - -
-
- -
-
-
- -
-

Special Offers!

-
-
-

Color: Rainbow

-
- 3279,99 ¥ - - -
- Product -

Size: 4m²

-
-

If you can't choose one color, go and catch them all!

-
-
-
-

Color: White

-
- 3279,99 ¥ - - -
- Product -

Size: 4m²

-

The appearance of many sparkling stars on your garden floor.

-
-
-

Color: Black

-
- 3279,99 ¥ - - -
- Product -

Size: 4m²

-
-

Dark as the night. Be careful not to form a black hole!

-
-
-
-

Pattern: Murica

-
- 3279,99 ¥ - - -
- Product -

Size: 4m²

-
-

Texas, Trump, Guns & Hamburgers

-
-
-
-

Pattern: Schachbrett

-
- 3279,99 ¥ - - -
- Product -

Size: 4m²

-
-

Show your intellect on your own lawn and embarrass your opponents!

-
-
-
-

Bunte Gräser!

-
-
-

Color: Green

-
- 2339,99 ¥ - - -
- Product -

Size: 4m²

-
-

The standard model in our range. Ensures a natural look and pleasant freshness in your living room!

-
-
-
-

Color: Desert

-
- 2339,99 ¥ - - -
- Product -

Size: 4m²

-
-

Summer, sun and oh my god, I'm hot! Are they pyramids in my garden ?!

-
-
-
-

Color: Beach

-
- 2339,99 ¥ - - -
- Product -

Size: 4m²

-
-

Summer, sun and hot feelings!

-
-
-
-

Color: Hell

-
- 2339,99 ¥ - - -
- Product -

Size: 4m²

-
-

Look into the abyss that could await you after your death and invite guests to it!

-
-
-
-

Color: Unicorn

-
- 2339,99 ¥ - - -
- Product -

Size: 4m²

-
-

PINK FLUFFY UNICORN, DANCING ON RAINBOWS (which you can also buy in here) !!!

-
-
-
-

Color: Grape

-
- 2339,99 ¥ - - -
- Product -

Size: 4m²

-
-

It looks purple. Do you have to say more?

-
-
-
-

Color: Atlantic

-
- 2339,99 ¥ - - -
- Product -

Size: 4m²

-
-

Blue like the ocean. A deep look and mysterious nature.

-
-
-
-

Green-Tones!

-
-
-

Green: 3B

-
- 3499,99 ¥ - - -
- Product -

Size: 10m²

-
-

Green in every way. Nothing more to know about it.

-
-
-
-

Green: 2B

-
- 3499,99 - - -
- Product -

Size: 10m²

-
-

Green in every way. Nothing more to know about it.

-
-
-
-

Green: B

-
- 3499,99 ¥ - - -
- Product -

Size: 10m²

-
-

Green in every way. Nothing more to know about it.

-
-
-
-

Green: HB

-
- 2339,99 ¥ - - -
- Product -

Size: 10m²

-
-

The standard model in our range. Ensures a natural look and pleasant freshness in your living room!

-
-
-
-

Size: H

-
- 3499,99 ¥ - - -
- Product -

Size: 10m²

-
-

Green in every way. Nothing more to know about it.

-
-
-
-

Size: 2H

-
- 3499,99 ¥ - - -
- Product -

Size: 10m²

-
-

Green in every way. Nothing more to know about it.

-
-
-
-

Green: 3H

-
- 3499,99 ¥ - - -
- Product -

Size: 10m²

-
-

Green in every way. Nothing more to know about it.

-
-
-
-
- - - - + + + + + + + + + + + + + green grass + + + +
+
+ grass + GREEEN GRASS + grass +
+
+
+ Categories + +
+
+ +
+
+
+ +
+

Special Offers!

+
+
+

Color: Rainbow

+
+ 3279,99 ¥ + + +
+ Product +

Size: 4m²

+
+

If you can't choose one color, go and catch them all!

+
+
+
+

Color: White

+
+ 3279,99 ¥ + + +
+ Product +

Size: 4m²

+

The appearance of many sparkling stars on your garden floor.

+
+
+

Color: Black

+
+ 3279,99 ¥ + + +
+ Product +

Size: 4m²

+
+

Dark as the night. Be careful not to form a black hole!

+
+
+
+

Pattern: Murica

+
+ 3279,99 ¥ + + +
+ Product +

Size: 4m²

+
+

Texas, Trump, Guns & Hamburgers

+
+
+
+

Pattern: Schachbrett

+
+ 3279,99 ¥ + + +
+ Product +

Size: 4m²

+
+

Show your intellect on your own lawn and embarrass your opponents!

+
+
+
+

Bunte Gräser!

+
+
+

Color: Green

+
+ 2339,99 ¥ + + +
+ Product +

Size: 4m²

+
+

The standard model in our range. Ensures a natural look and pleasant freshness in your living room!

+
+
+
+

Color: Desert

+
+ 2339,99 ¥ + + +
+ Product +

Size: 4m²

+
+

Summer, sun and oh my god, I'm hot! Are they pyramids in my garden ?!

+
+
+
+

Color: Beach

+
+ 2339,99 ¥ + + +
+ Product +

Size: 4m²

+
+

Summer, sun and hot feelings!

+
+
+
+

Color: Hell

+
+ 2339,99 ¥ + + +
+ Product +

Size: 4m²

+
+

Look into the abyss that could await you after your death and invite guests to it!

+
+
+
+

Color: Unicorn

+
+ 2339,99 ¥ + + +
+ Product +

Size: 4m²

+
+

PINK FLUFFY UNICORN, DANCING ON RAINBOWS (which you can also buy in here) !!!

+
+
+
+

Color: Grape

+
+ 2339,99 ¥ + + +
+ Product +

Size: 4m²

+
+

It looks purple. Do you have to say more?

+
+
+
+

Color: Atlantic

+
+ 2339,99 ¥ + + +
+ Product +

Size: 4m²

+
+

Blue like the ocean. A deep look and mysterious nature.

+
+
+
+

Green-Tones!

+
+
+

Green: 3B

+
+ 3499,99 ¥ + + +
+ Product +

Size: 10m²

+
+

Green in every way. Nothing more to know about it.

+
+
+
+

Green: 2B

+
+ 3499,99 + + +
+ Product +

Size: 10m²

+
+

Green in every way. Nothing more to know about it.

+
+
+
+

Green: B

+
+ 3499,99 ¥ + + +
+ Product +

Size: 10m²

+
+

Green in every way. Nothing more to know about it.

+
+
+
+

Green: HB

+
+ 2339,99 ¥ + + +
+ Product +

Size: 10m²

+
+

The standard model in our range. Ensures a natural look and pleasant freshness in your living room!

+
+
+
+

Size: H

+
+ 3499,99 ¥ + + +
+ Product +

Size: 10m²

+
+

Green in every way. Nothing more to know about it.

+
+
+
+

Size: 2H

+
+ 3499,99 ¥ + + +
+ Product +

Size: 10m²

+
+

Green in every way. Nothing more to know about it.

+
+
+
+

Green: 3H

+
+ 3499,99 ¥ + + +
+ Product +

Size: 10m²

+
+

Green in every way. Nothing more to know about it.

+
+
+
+
+ + + + \ No newline at end of file diff --git a/Aufgaben/Aufgabe_05_2020-05-27/files/original/grass-purple.png b/Aufgaben/Aufgabe_05_2020-05-27/files/original/grass-purple.png index 323e522..8165bfd 100644 Binary files a/Aufgaben/Aufgabe_05_2020-05-27/files/original/grass-purple.png and b/Aufgaben/Aufgabe_05_2020-05-27/files/original/grass-purple.png differ diff --git a/Aufgaben/Aufgabe_05_2020-05-27/product-big.css b/Aufgaben/Aufgabe_05_2020-05-27/product-big.css index 75c1953..3a38a67 100644 --- a/Aufgaben/Aufgabe_05_2020-05-27/product-big.css +++ b/Aufgaben/Aufgabe_05_2020-05-27/product-big.css @@ -1,89 +1,89 @@ -#übersicht { - display: flex; - flex-direction: column; - align-items: center; -} - -.container { - display: flex; - flex-direction: row; - justify-content: center; - flex-wrap: wrap; - margin: 10px 0px; - padding: 0px 10px; -} - -.container .product { - width: 300px; - display: flex; - flex-direction: column; - justify-content: center; - padding: 10px; - align-items: center; - border: solid #006a4e; - background-color: #b8d5cd; - border-radius: 40px; -} - -.container .product img { - width: 90%; - height: auto; - max-height: 300px; - border: solid #006a4e; - border-radius: 40px; - overflow: hidden; - object-fit: fill; -} - -.container .product p, h3 { - margin: 5px 0px; -} - -.container .product .title { - font-size: 20px; -} - -.container .product .shopIn { - display: flex; - flex-direction: row; - justify-content: start; - vertical-align: middle; -} - -.container .product .shopIn span,button{ - display: flex; - vertical-align: middle; - margin: 10px 10px; - font-size: 30px; -} - -.container .product .shopIn button>span.buttonModifier { - text-align: center; - margin: 0px; - padding: 3px; -} - -.container .product .shopIn button{ - border-radius: 30px; - border-color: #006a4e; - background-color: #2e856e; - width: 40px; - height: 40px; - text-align: center; - padding: 0px 10px; - color: #b8d5cd; - font-size: 30px; -} - -.container .product .size { - font-size: 20px; -} - -.container .product .description{ - display: flex; - flex-direction: column; - justify-content: center; - text-align: justify; - height: 150px; - font-size: 20px; +#übersicht { + display: flex; + flex-direction: column; + align-items: center; +} + +.container { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + margin: 10px 0px; + padding: 0px 10px; +} + +.container .product { + width: 300px; + display: flex; + flex-direction: column; + justify-content: center; + padding: 10px; + align-items: center; + border: solid #006a4e; + background-color: #b8d5cd; + border-radius: 40px; +} + +.container .product img { + width: 90%; + height: auto; + max-height: 300px; + border: solid #006a4e; + border-radius: 40px; + overflow: hidden; + object-fit: fill; +} + +.container .product p, h3 { + margin: 5px 0px; +} + +.container .product .title { + font-size: 20px; +} + +.container .product .shopIn { + display: flex; + flex-direction: row; + justify-content: start; + vertical-align: middle; +} + +.container .product .shopIn span,button{ + display: flex; + vertical-align: middle; + margin: 10px 10px; + font-size: 30px; +} + +.container .product .shopIn button>span.buttonModifier { + text-align: center; + margin: 0px; + padding: 3px; +} + +.container .product .shopIn button{ + border-radius: 30px; + border-color: #006a4e; + background-color: #2e856e; + width: 40px; + height: 40px; + text-align: center; + padding: 0px 10px; + color: #b8d5cd; + font-size: 30px; +} + +.container .product .size { + font-size: 20px; +} + +.container .product .description{ + display: flex; + flex-direction: column; + justify-content: center; + text-align: justify; + height: 150px; + font-size: 20px; } \ No newline at end of file diff --git a/Aufgaben/Aufgabe_05_2020-05-27/product-medium.css b/Aufgaben/Aufgabe_05_2020-05-27/product-medium.css index a5579e6..e285486 100644 --- a/Aufgaben/Aufgabe_05_2020-05-27/product-medium.css +++ b/Aufgaben/Aufgabe_05_2020-05-27/product-medium.css @@ -1,94 +1,94 @@ -#übersicht { - display: flex; - flex-direction: column; - align-items: center; -} - -.container { - display: flex; - flex-direction: row; - justify-content: center; - flex-wrap: wrap; - margin: 10px 0px; - padding: 0px 10px; -} - -.container .product { - display: flex; - flex-direction: column; - justify-content: center; - padding: 10px; - align-items: center; - border: solid #006a4e; - background-color: #b8d5cd; - border-radius: 40px; - margin: 10px 20px; - width: 40%; -} - -.container .product img { - width: 90%; - height: width; - max-height: 400px; - border: solid #006a4e; - border-radius: 40px; - overflow: hidden; - object-fit: fill; -} - -.container .product p, h3 { - margin: 5px 0px; -} - -.container .product .title { - font-size: 30px; -} - -.container .product .shopIn { - display: flex; - flex-direction: row; - justify-content: start; - vertical-align: middle; -} - -.container .product .shopIn span,button{ - display: flex; - vertical-align: middle; - margin: 10px 10px; - font-size: 30px; -} - -.container .product .shopIn button>span.buttonModifier { - text-align: center; - margin: 0px; - padding: 3px; -} - -.container .product .shopIn button{ - border-radius: 30px; - border-color: #006a4e; - background-color: #2e856e; - width: 40px; - height: 40px; - text-align: center; - padding: 0px 10px; - color: #b8d5cd; - font-size: 30px; -} - -.container .product .size { - font-size: 25px; -} - -.container .product .description{ - display: flex; - flex-direction: column; - justify-content: center; - text-align: justify; - height: 150px; -} - -#bunt,#grün,#special { - font-size: 50px; - color: #006a4e; +#übersicht { + display: flex; + flex-direction: column; + align-items: center; +} + +.container { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + margin: 10px 0px; + padding: 0px 10px; +} + +.container .product { + display: flex; + flex-direction: column; + justify-content: center; + padding: 10px; + align-items: center; + border: solid #006a4e; + background-color: #b8d5cd; + border-radius: 40px; + margin: 10px 20px; + width: 40%; +} + +.container .product img { + width: 90%; + height: width; + max-height: 400px; + border: solid #006a4e; + border-radius: 40px; + overflow: hidden; + object-fit: fill; +} + +.container .product p, h3 { + margin: 5px 0px; +} + +.container .product .title { + font-size: 30px; +} + +.container .product .shopIn { + display: flex; + flex-direction: row; + justify-content: start; + vertical-align: middle; +} + +.container .product .shopIn span,button{ + display: flex; + vertical-align: middle; + margin: 10px 10px; + font-size: 30px; +} + +.container .product .shopIn button>span.buttonModifier { + text-align: center; + margin: 0px; + padding: 3px; +} + +.container .product .shopIn button{ + border-radius: 30px; + border-color: #006a4e; + background-color: #2e856e; + width: 40px; + height: 40px; + text-align: center; + padding: 0px 10px; + color: #b8d5cd; + font-size: 30px; +} + +.container .product .size { + font-size: 25px; +} + +.container .product .description{ + display: flex; + flex-direction: column; + justify-content: center; + text-align: justify; + height: 150px; +} + +#bunt,#grün,#special { + font-size: 50px; + color: #006a4e; } \ No newline at end of file diff --git a/Aufgaben/Aufgabe_05_2020-05-27/product-small.css b/Aufgaben/Aufgabe_05_2020-05-27/product-small.css index 3d0f2e0..9465889 100644 --- a/Aufgaben/Aufgabe_05_2020-05-27/product-small.css +++ b/Aufgaben/Aufgabe_05_2020-05-27/product-small.css @@ -1,87 +1,87 @@ -.container { - display: flex; - flex-direction: column; - justify-content: center; - margin: 10px 0px; - padding: 0px 10px; -} - -.container .product { - display: flex; - flex-direction: column; - justify-content: center; - padding: 10px; - align-items: center; - border: solid #006a4e; - background-color: #b8d5cd; - border-radius: 40px; - margin: 10px 0px; -} - -.container .product img { - width: 90%; - height: auto; - max-height: 300px; - border: solid #006a4e; - border-radius: 40px; - overflow: hidden; - object-fit: fill; -} - -.container .product p, h3 { - margin: 5px 0px; -} - -.container .product .title { - font-size: 20px; -} - -.container .product .shopIn { - display: flex; - flex-direction: row; - justify-content: start; - vertical-align: middle; -} - -.container .product .shopIn span,button{ - display: flex; - vertical-align: middle; - margin: 10px 10px; - font-size: 30px; -} - -.container .product .shopIn button>span.buttonModifier { - text-align: center; - margin: 0px; - padding: 3px; -} - -.container .product .shopIn button{ - border-radius: 30px; - border-color: #006a4e; - background-color: #2e856e; - width: 40px; - height: 40px; - text-align: center; - padding: 0px 10px; - color: #b8d5cd; - font-size: 30px; -} - -.container .product .size { - font-size: 20px; -} - -.container .product .description{ - display: flex; - flex-direction: column; - justify-content: center; - text-align: justify; - height: 100px; -} - -#bunt,#grün,#special { - text-align: center; - font-size: 30px; - color: #006a4e; +.container { + display: flex; + flex-direction: column; + justify-content: center; + margin: 10px 0px; + padding: 0px 10px; +} + +.container .product { + display: flex; + flex-direction: column; + justify-content: center; + padding: 10px; + align-items: center; + border: solid #006a4e; + background-color: #b8d5cd; + border-radius: 40px; + margin: 10px 0px; +} + +.container .product img { + width: 90%; + height: auto; + max-height: 300px; + border: solid #006a4e; + border-radius: 40px; + overflow: hidden; + object-fit: fill; +} + +.container .product p, h3 { + margin: 5px 0px; +} + +.container .product .title { + font-size: 20px; +} + +.container .product .shopIn { + display: flex; + flex-direction: row; + justify-content: start; + vertical-align: middle; +} + +.container .product .shopIn span,button{ + display: flex; + vertical-align: middle; + margin: 10px 10px; + font-size: 30px; +} + +.container .product .shopIn button>span.buttonModifier { + text-align: center; + margin: 0px; + padding: 3px; +} + +.container .product .shopIn button{ + border-radius: 30px; + border-color: #006a4e; + background-color: #2e856e; + width: 40px; + height: 40px; + text-align: center; + padding: 0px 10px; + color: #b8d5cd; + font-size: 30px; +} + +.container .product .size { + font-size: 20px; +} + +.container .product .description{ + display: flex; + flex-direction: column; + justify-content: center; + text-align: justify; + height: 100px; +} + +#bunt,#grün,#special { + text-align: center; + font-size: 30px; + color: #006a4e; } \ No newline at end of file diff --git a/Aufgaben/Aufgabe_05_2020-05-27/product.css b/Aufgaben/Aufgabe_05_2020-05-27/product.css index e84906b..498acee 100644 --- a/Aufgaben/Aufgabe_05_2020-05-27/product.css +++ b/Aufgaben/Aufgabe_05_2020-05-27/product.css @@ -1,76 +1,76 @@ -.container { - display: flex; - flex-direction: column; - justify-content: center; - margin: 10px 0px; - padding: 0px 10px; -} - -.container .product { - display: flex; - flex-direction: column; - justify-content: center; - padding: 10px; - align-items: center; - border: solid #006a4e; - background-color: #b8d5cd; - border-radius: 40px; -} - -.container .product img { - width: 90%; - height: auto; - max-height: 300px; - border: solid #006a4e; - border-radius: 40px; - overflow: hidden; - object-fit: none; -} - -.container .product p, h3 { - margin: 5px 0px; -} - -.container .product .title { - font-size: 20px; -} - -.container .product .shopIn { - display: flex; - flex-direction: row; - justify-content: start; - vertical-align: middle; -} - -.container .product .shopIn span,button{ - display: flex; - vertical-align: middle; - margin: 10px 10px; - font-size: 30px; -} - -.container .product .shopIn button>span.buttonModifier { - text-align: center; - margin: 0px; - padding: 3px; -} - -.container .product .shopIn button{ -border-radius: 30px; -border-color: #006a4e; -background-color: #2e856e; -width: 40px; -height: 40px; -text-align: center; -padding: 0px 10px; -color: #b8d5cd; -font-size: 30px; -} - -.container .product .size { - font-size: 20px; -} - -.container .product .description{ - text-align: justify; +.container { + display: flex; + flex-direction: column; + justify-content: center; + margin: 10px 0px; + padding: 0px 10px; +} + +.container .product { + display: flex; + flex-direction: column; + justify-content: center; + padding: 10px; + align-items: center; + border: solid #006a4e; + background-color: #b8d5cd; + border-radius: 40px; +} + +.container .product img { + width: 90%; + height: auto; + max-height: 300px; + border: solid #006a4e; + border-radius: 40px; + overflow: hidden; + object-fit: none; +} + +.container .product p, h3 { + margin: 5px 0px; +} + +.container .product .title { + font-size: 20px; +} + +.container .product .shopIn { + display: flex; + flex-direction: row; + justify-content: start; + vertical-align: middle; +} + +.container .product .shopIn span,button{ + display: flex; + vertical-align: middle; + margin: 10px 10px; + font-size: 30px; +} + +.container .product .shopIn button>span.buttonModifier { + text-align: center; + margin: 0px; + padding: 3px; +} + +.container .product .shopIn button{ +border-radius: 30px; +border-color: #006a4e; +background-color: #2e856e; +width: 40px; +height: 40px; +text-align: center; +padding: 0px 10px; +color: #b8d5cd; +font-size: 30px; +} + +.container .product .size { + font-size: 20px; +} + +.container .product .description{ + text-align: justify; } \ No newline at end of file diff --git a/Aufgaben/Aufgabe_05_2020-05-27/script.js b/Aufgaben/Aufgabe_05_2020-05-27/script.js index 97a0453..feefed4 100644 --- a/Aufgaben/Aufgabe_05_2020-05-27/script.js +++ b/Aufgaben/Aufgabe_05_2020-05-27/script.js @@ -149,18 +149,18 @@ function printProducts() { for (let index = 0; index < categories[nummer].products.length; index++) { let product = document.createElement("div"); product.classList.add("product"); - product.innerHTML = ` -

${categories[nummer].products[index].title}

-
- ${categories[nummer].products[index].price} ¥ - - -
- Product -

Size: ${categories[nummer].products[index].size}

-
-

${categories[nummer].products[index].description}

-
+ product.innerHTML = ` +

${categories[nummer].products[index].title}

+
+ ${categories[nummer].products[index].price} ¥ + + +
+ Product +

Size: ${categories[nummer].products[index].size}

+
+

${categories[nummer].products[index].description}

+
`; container.appendChild(product); } diff --git a/Aufgaben/Aufgabe_05_2020-05-27/script.ts b/Aufgaben/Aufgabe_05_2020-05-27/script.ts index 1d13dfa..b678b6a 100644 --- a/Aufgaben/Aufgabe_05_2020-05-27/script.ts +++ b/Aufgaben/Aufgabe_05_2020-05-27/script.ts @@ -1,232 +1,232 @@ -// Datensammlung für Produkte - -interface Product { - title: string; - price: number; - size: string; - imgName: string; - description: string; -} - -interface Category { - title: string; - id: string; - products: Product[]; -} - -let categories: Category[] = [ - { - title: "Special Offers!", - id: "special", - products: [ - { - title: "Color: Rainbow", - price: 3279.99, - size: "4m²", - imgName: "grass-rainbow-square.png", - description: "If you can't choose one color, go and catch them all!" - }, { - title: "Color: White", - price: 3279.99, - size: "4m²", - imgName: "grass-white.png", - description: "The appearance of many sparkling stars on your garden floor." - }, { - title: "Color: Black", - price: 3279.99, - size: "4m²", - imgName: "grass-black.png", - description: "Dark as the night. Be careful not to form a black hole!" - }, { - title: "Pattern: Murica", - price: 3279.99, - size: "4m²", - imgName: "grass-green-murica.png", - description: "Texas, Trump, Guns & Hamburgers" - }, { - title: "Pattern: Schachbrett", - price: 3279.99, - size: "4m²", - imgName: "grass-green-chess-square.png", - description: "Show your intellect on your own lawn and embarrass your opponents!" - } - ] - }, { - title: "Bunte Gräser", - id: "bunt", - products: [ - { - title: "Color: Green", - price: 2339.99, - size: "4m²", - imgName: "grass-green.png", - description: "The standard model in our range. Ensures a natural look and pleasant freshness in your living room!" - }, { - title: "Color: Desert", - price: 2339.99, - size: "4m²", - imgName: "grass-yellow.png", - description: "Summer, sun and oh my god, I'm hot! Are they pyramids in my garden ?!" - }, { - title: "Color: Beach", - price: 2339.99, - size: "4m²", - imgName: "grass-orange.png", - description: "Summer, sun and hot feelings!" - }, { - title: "Pattern: Hell", - price: 2339.99, - size: "4m²", - imgName: "grass-red.png", - description: "Look into the abyss that could await you after your death and invite guests to it!" - }, { - title: "Pattern: Unicorn", - price: 2339.99, - size: "4m²", - imgName: "grass-pink.png", - description: "PINK FLUFFY UNICORN, DANCING ON RAINBOWS (which you can also buy in here) !!!" - }, { - title: "Pattern: Grape", - price: 2339.99, - size: "4m²", - imgName: "grass-purple.png", - description: "It looks purple. Do you have to say more?" - }, { - title: "Pattern: Atlantic", - price: 2339.99, - size: "4m²", - imgName: "grass-blue.png", - description: "Blue like the ocean. A deep look and mysterious nature." - } - ] - }, { - title: "Green-Tones", - id: "grün", - products: [ - { - title: "Green: 3B", - price: 3499.99, - size: "10m²", - imgName: "grass-green-dark-3.png", - description: "Green in every way. Nothing more to know about it." - }, { - title: "Green: 2B", - price: 3499.99, - size: "10m²", - imgName: "grass-green-dark-2.png", - description: "Green in every way. Nothing more to know about it." - }, { - title: "Green: B", - price: 3499.99, - size: "10m²", - imgName: "grass-green-dark-1.png", - description: "Green in every way. Nothing more to know about it." - }, { - title: "Green: HB", - price: 2339.99, - size: "10m²", - imgName: "grass-green.png", - description: "The standard model in our range. Ensures a natural look and pleasant freshness in your living room!" - }, { - title: "Green: H", - price: 3499.99, - size: "10m²", - imgName: "grass-green-light-1.png", - description: "Green in every way. Nothing more to know about it." - }, { - title: "Green: 2H", - price: 3499.99, - size: "10m²", - imgName: "grass-green-light-2.png", - description: "Green in every way. Nothing more to know about it." - }, { - title: "Green: 3H", - price: 3499.99, - size: "10m²", - imgName: "grass-green-light-3.png", - description: "Green in every way. Nothing more to know about it." - } - ] - } -]; - -printProducts(); - -//create Structure; - -function printProducts(): void { - for (let nummer: number = 0; nummer < categories.length; nummer++) { - - let heading: HTMLHeadingElement = document.createElement("h1"); - heading.setAttribute("id", categories[nummer].id); - heading.innerHTML = `${categories[nummer].title}`; - (document.querySelector("#übersicht")).appendChild(heading); - - let container: HTMLDivElement = document.createElement("div"); - container.classList.add("container"); - (document.querySelector("#übersicht")).appendChild(container); - - for (let index: number = 0; index < categories[nummer].products.length; index++) { - let product: HTMLDivElement = document.createElement("div"); - product.classList.add("product"); - product.innerHTML = ` -

${categories[nummer].products[index].title}

-
- ${categories[nummer].products[index].price} ¥ - - -
- Product -

Size: ${categories[nummer].products[index].size}

-
-

${categories[nummer].products[index].description}

-
- `; - container.appendChild(product); - } - - } - -} - - -// Folgender auskommentierter Code dient mir als Archiv für Gedankenansätze oder Verläufe. -// Wenn dies nicht gerne gesehen ist, gebt mir kurz Bescheid und ich werde es entfernen - -/* -function zeichnen(tagArray: Tag[]): void { - for (let i: number = 0; i < tagArray.length ; i++){ - let title: HTMLElement = document.createElement(tagArray[i].tag); - title.innerHTML = "I bims title"; - title.classList.add("title"); - if (tagArray[i].image) { - title.setAttribute("src", "value"); - title.setAttribute("alt", "value"); - } - document.body.appendChild(title); - } -} -*/ - -/* -console.log("Hello Console"); -let theName: String = "Justin" + "Dretvic" + 20; -console.log(theName); -*/ - -/* -# Template für ein Produkt in HTML -
tag class -

Color: Rainbow

tag class content -
tag class - 3279,99 ¥ tag class content - tag content - tag content -
- Product tag attribute1 attribute2 -

Size: 4m²

tag class content -
tag class -

If you can't choose one color, go and catch them all!

tag content -
-
+// Datensammlung für Produkte + +interface Product { + title: string; + price: number; + size: string; + imgName: string; + description: string; +} + +interface Category { + title: string; + id: string; + products: Product[]; +} + +let categories: Category[] = [ + { + title: "Special Offers!", + id: "special", + products: [ + { + title: "Color: Rainbow", + price: 3279.99, + size: "4m²", + imgName: "grass-rainbow-square.png", + description: "If you can't choose one color, go and catch them all!" + }, { + title: "Color: White", + price: 3279.99, + size: "4m²", + imgName: "grass-white.png", + description: "The appearance of many sparkling stars on your garden floor." + }, { + title: "Color: Black", + price: 3279.99, + size: "4m²", + imgName: "grass-black.png", + description: "Dark as the night. Be careful not to form a black hole!" + }, { + title: "Pattern: Murica", + price: 3279.99, + size: "4m²", + imgName: "grass-green-murica.png", + description: "Texas, Trump, Guns & Hamburgers" + }, { + title: "Pattern: Schachbrett", + price: 3279.99, + size: "4m²", + imgName: "grass-green-chess-square.png", + description: "Show your intellect on your own lawn and embarrass your opponents!" + } + ] + }, { + title: "Bunte Gräser", + id: "bunt", + products: [ + { + title: "Color: Green", + price: 2339.99, + size: "4m²", + imgName: "grass-green.png", + description: "The standard model in our range. Ensures a natural look and pleasant freshness in your living room!" + }, { + title: "Color: Desert", + price: 2339.99, + size: "4m²", + imgName: "grass-yellow.png", + description: "Summer, sun and oh my god, I'm hot! Are they pyramids in my garden ?!" + }, { + title: "Color: Beach", + price: 2339.99, + size: "4m²", + imgName: "grass-orange.png", + description: "Summer, sun and hot feelings!" + }, { + title: "Pattern: Hell", + price: 2339.99, + size: "4m²", + imgName: "grass-red.png", + description: "Look into the abyss that could await you after your death and invite guests to it!" + }, { + title: "Pattern: Unicorn", + price: 2339.99, + size: "4m²", + imgName: "grass-pink.png", + description: "PINK FLUFFY UNICORN, DANCING ON RAINBOWS (which you can also buy in here) !!!" + }, { + title: "Pattern: Grape", + price: 2339.99, + size: "4m²", + imgName: "grass-purple.png", + description: "It looks purple. Do you have to say more?" + }, { + title: "Pattern: Atlantic", + price: 2339.99, + size: "4m²", + imgName: "grass-blue.png", + description: "Blue like the ocean. A deep look and mysterious nature." + } + ] + }, { + title: "Green-Tones", + id: "grün", + products: [ + { + title: "Green: 3B", + price: 3499.99, + size: "10m²", + imgName: "grass-green-dark-3.png", + description: "Green in every way. Nothing more to know about it." + }, { + title: "Green: 2B", + price: 3499.99, + size: "10m²", + imgName: "grass-green-dark-2.png", + description: "Green in every way. Nothing more to know about it." + }, { + title: "Green: B", + price: 3499.99, + size: "10m²", + imgName: "grass-green-dark-1.png", + description: "Green in every way. Nothing more to know about it." + }, { + title: "Green: HB", + price: 2339.99, + size: "10m²", + imgName: "grass-green.png", + description: "The standard model in our range. Ensures a natural look and pleasant freshness in your living room!" + }, { + title: "Green: H", + price: 3499.99, + size: "10m²", + imgName: "grass-green-light-1.png", + description: "Green in every way. Nothing more to know about it." + }, { + title: "Green: 2H", + price: 3499.99, + size: "10m²", + imgName: "grass-green-light-2.png", + description: "Green in every way. Nothing more to know about it." + }, { + title: "Green: 3H", + price: 3499.99, + size: "10m²", + imgName: "grass-green-light-3.png", + description: "Green in every way. Nothing more to know about it." + } + ] + } +]; + +printProducts(); + +//create Structure; + +function printProducts(): void { + for (let nummer: number = 0; nummer < categories.length; nummer++) { + + let heading: HTMLHeadingElement = document.createElement("h1"); + heading.setAttribute("id", categories[nummer].id); + heading.innerHTML = `${categories[nummer].title}`; + (document.querySelector("#übersicht")).appendChild(heading); + + let container: HTMLDivElement = document.createElement("div"); + container.classList.add("container"); + (document.querySelector("#übersicht")).appendChild(container); + + for (let index: number = 0; index < categories[nummer].products.length; index++) { + let product: HTMLDivElement = document.createElement("div"); + product.classList.add("product"); + product.innerHTML = ` +

${categories[nummer].products[index].title}

+
+ ${categories[nummer].products[index].price} ¥ + + +
+ Product +

Size: ${categories[nummer].products[index].size}

+
+

${categories[nummer].products[index].description}

+
+ `; + container.appendChild(product); + } + + } + +} + + +// Folgender auskommentierter Code dient mir als Archiv für Gedankenansätze oder Verläufe. +// Wenn dies nicht gerne gesehen ist, gebt mir kurz Bescheid und ich werde es entfernen + +/* +function zeichnen(tagArray: Tag[]): void { + for (let i: number = 0; i < tagArray.length ; i++){ + let title: HTMLElement = document.createElement(tagArray[i].tag); + title.innerHTML = "I bims title"; + title.classList.add("title"); + if (tagArray[i].image) { + title.setAttribute("src", "value"); + title.setAttribute("alt", "value"); + } + document.body.appendChild(title); + } +} +*/ + +/* +console.log("Hello Console"); +let theName: String = "Justin" + "Dretvic" + 20; +console.log(theName); +*/ + +/* +# Template für ein Produkt in HTML +
tag class +

Color: Rainbow

tag class content +
tag class + 3279,99 ¥ tag class content + tag content + tag content +
+ Product tag attribute1 attribute2 +

Size: 4m²

tag class content +
tag class +

If you can't choose one color, go and catch them all!

tag content +
+
*/ \ No newline at end of file diff --git a/Aufgaben/Aufgabe_05_2020-05-27/shop.css b/Aufgaben/Aufgabe_05_2020-05-27/shop.css index a5e8bfe..2493666 100644 --- a/Aufgaben/Aufgabe_05_2020-05-27/shop.css +++ b/Aufgaben/Aufgabe_05_2020-05-27/shop.css @@ -1,124 +1,124 @@ -body { - margin: 0; - font-family: Chelsea Market; -} - -header { - padding: 10px 0px; - position: relative; - top: 0; - width: 100%; - background-color: #006a4e; - color: #b8d5cd; -} - -header ul { - list-style: none; - padding: 0px; -} - -header li { - display: block; - margin: 10px auto 0px; -} - -header li a { - text-decoration: none; - color: #b8d5cd; -} - -header .dropdown { - text-align: center; - font-size: 20px; - position: relative; - display: block; - background-color: #2e856e; - border-radius: 40px; - margin: 10px 5px 0px 5px; - padding: 10px 0px; - width: 80%; -} - -header .dropdown-content { - display: none; -} - -header .dropdown:hover .dropdown-content { - display: block; - margin-bottom: 0px; -} - -header #shopping_cart { - text-align: center; - position: relative; - display: block; - background-color: #2e856e; - border-radius: 40px; - margin: 10px 5px 0px 5px; - padding: 10px 0px; - width: 60px; - height: 30px; -} - -header #shopping_cart a { - text-decoration: none; - color: #b8d5cd; - font-size:24px -} - -header #shopping_cart a:hover { - color: white; -} - -header .title_bar img { - width: 40px; - height: 40px; - margin: 5px 15px; -} - -header .title_bar span { - font-size: 27px; - line-height: 50px; - margin: auto 0px; -} - -header .title_bar { - display: flex; - flex-direction: row; - justify-content: center; - background-color: #2e856e; - border-radius: 40px; - padding: 5px; - margin: 5px -} - -header #bottom { - display: flex; - flex-direction: row; - justify-content: center; -} - -header #shopping_cart { - margin: 10px auto; - text-align: center; - color: #b8d5cd; - display: block; - background-color: #2e856e; - border-radius: 40px; - margin: 10px 5px 0px 5px; - padding: 10px 0px; -} - -footer { - text-align: center; - padding: 10px 5px; - position: relative; - bottom: 0; - width: calc(100%-10px); - background-color: #272727; - color: white; -} - -footer p { - margin: 0px 0px 10px; +body { + margin: 0; + font-family: Chelsea Market; +} + +header { + padding: 10px 0px; + position: relative; + top: 0; + width: 100%; + background-color: #006a4e; + color: #b8d5cd; +} + +header ul { + list-style: none; + padding: 0px; +} + +header li { + display: block; + margin: 10px auto 0px; +} + +header li a { + text-decoration: none; + color: #b8d5cd; +} + +header .dropdown { + text-align: center; + font-size: 20px; + position: relative; + display: block; + background-color: #2e856e; + border-radius: 40px; + margin: 10px 5px 0px 5px; + padding: 10px 0px; + width: 80%; +} + +header .dropdown-content { + display: none; +} + +header .dropdown:hover .dropdown-content { + display: block; + margin-bottom: 0px; +} + +header #shopping_cart { + text-align: center; + position: relative; + display: block; + background-color: #2e856e; + border-radius: 40px; + margin: 10px 5px 0px 5px; + padding: 10px 0px; + width: 60px; + height: 30px; +} + +header #shopping_cart a { + text-decoration: none; + color: #b8d5cd; + font-size:24px +} + +header #shopping_cart a:hover { + color: white; +} + +header .title_bar img { + width: 40px; + height: 40px; + margin: 5px 15px; +} + +header .title_bar span { + font-size: 27px; + line-height: 50px; + margin: auto 0px; +} + +header .title_bar { + display: flex; + flex-direction: row; + justify-content: center; + background-color: #2e856e; + border-radius: 40px; + padding: 5px; + margin: 5px +} + +header #bottom { + display: flex; + flex-direction: row; + justify-content: center; +} + +header #shopping_cart { + margin: 10px auto; + text-align: center; + color: #b8d5cd; + display: block; + background-color: #2e856e; + border-radius: 40px; + margin: 10px 5px 0px 5px; + padding: 10px 0px; +} + +footer { + text-align: center; + padding: 10px 5px; + position: relative; + bottom: 0; + width: calc(100%-10px); + background-color: #272727; + color: white; +} + +footer p { + margin: 0px 0px 10px; } \ No newline at end of file diff --git a/Aufgaben/Aufgabe_05_2020-05-27/shop.html b/Aufgaben/Aufgabe_05_2020-05-27/shop.html index 2529db2..99ec1c4 100644 --- a/Aufgaben/Aufgabe_05_2020-05-27/shop.html +++ b/Aufgaben/Aufgabe_05_2020-05-27/shop.html @@ -1,50 +1,50 @@ - - - - - - - - - - - - - - green grass - - - -
-
- grass - GREEEN GRASS - grass -
-
-
- Categories - -
-
- -
-
-
- -
- -
- -
-

Disclaimer

-

This website is not used monetarily

-

Not even if things seem to be sold here!

-
- - + + + + + + + + + + + + + + green grass + + + +
+
+ grass + GREEEN GRASS + grass +
+
+
+ Categories + +
+
+ +
+
+
+ +
+ +
+ +
+

Disclaimer

+

This website is not used monetarily

+

Not even if things seem to be sold here!

+
+ + \ No newline at end of file diff --git a/Aufgaben/Aufgabe_06_2020-06-03/product-big.css b/Aufgaben/Aufgabe_06_2020-06-03/product-big.css index 75c1953..3a38a67 100644 --- a/Aufgaben/Aufgabe_06_2020-06-03/product-big.css +++ b/Aufgaben/Aufgabe_06_2020-06-03/product-big.css @@ -1,89 +1,89 @@ -#übersicht { - display: flex; - flex-direction: column; - align-items: center; -} - -.container { - display: flex; - flex-direction: row; - justify-content: center; - flex-wrap: wrap; - margin: 10px 0px; - padding: 0px 10px; -} - -.container .product { - width: 300px; - display: flex; - flex-direction: column; - justify-content: center; - padding: 10px; - align-items: center; - border: solid #006a4e; - background-color: #b8d5cd; - border-radius: 40px; -} - -.container .product img { - width: 90%; - height: auto; - max-height: 300px; - border: solid #006a4e; - border-radius: 40px; - overflow: hidden; - object-fit: fill; -} - -.container .product p, h3 { - margin: 5px 0px; -} - -.container .product .title { - font-size: 20px; -} - -.container .product .shopIn { - display: flex; - flex-direction: row; - justify-content: start; - vertical-align: middle; -} - -.container .product .shopIn span,button{ - display: flex; - vertical-align: middle; - margin: 10px 10px; - font-size: 30px; -} - -.container .product .shopIn button>span.buttonModifier { - text-align: center; - margin: 0px; - padding: 3px; -} - -.container .product .shopIn button{ - border-radius: 30px; - border-color: #006a4e; - background-color: #2e856e; - width: 40px; - height: 40px; - text-align: center; - padding: 0px 10px; - color: #b8d5cd; - font-size: 30px; -} - -.container .product .size { - font-size: 20px; -} - -.container .product .description{ - display: flex; - flex-direction: column; - justify-content: center; - text-align: justify; - height: 150px; - font-size: 20px; +#übersicht { + display: flex; + flex-direction: column; + align-items: center; +} + +.container { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + margin: 10px 0px; + padding: 0px 10px; +} + +.container .product { + width: 300px; + display: flex; + flex-direction: column; + justify-content: center; + padding: 10px; + align-items: center; + border: solid #006a4e; + background-color: #b8d5cd; + border-radius: 40px; +} + +.container .product img { + width: 90%; + height: auto; + max-height: 300px; + border: solid #006a4e; + border-radius: 40px; + overflow: hidden; + object-fit: fill; +} + +.container .product p, h3 { + margin: 5px 0px; +} + +.container .product .title { + font-size: 20px; +} + +.container .product .shopIn { + display: flex; + flex-direction: row; + justify-content: start; + vertical-align: middle; +} + +.container .product .shopIn span,button{ + display: flex; + vertical-align: middle; + margin: 10px 10px; + font-size: 30px; +} + +.container .product .shopIn button>span.buttonModifier { + text-align: center; + margin: 0px; + padding: 3px; +} + +.container .product .shopIn button{ + border-radius: 30px; + border-color: #006a4e; + background-color: #2e856e; + width: 40px; + height: 40px; + text-align: center; + padding: 0px 10px; + color: #b8d5cd; + font-size: 30px; +} + +.container .product .size { + font-size: 20px; +} + +.container .product .description{ + display: flex; + flex-direction: column; + justify-content: center; + text-align: justify; + height: 150px; + font-size: 20px; } \ No newline at end of file diff --git a/Aufgaben/Aufgabe_06_2020-06-03/product-medium.css b/Aufgaben/Aufgabe_06_2020-06-03/product-medium.css index a5579e6..e285486 100644 --- a/Aufgaben/Aufgabe_06_2020-06-03/product-medium.css +++ b/Aufgaben/Aufgabe_06_2020-06-03/product-medium.css @@ -1,94 +1,94 @@ -#übersicht { - display: flex; - flex-direction: column; - align-items: center; -} - -.container { - display: flex; - flex-direction: row; - justify-content: center; - flex-wrap: wrap; - margin: 10px 0px; - padding: 0px 10px; -} - -.container .product { - display: flex; - flex-direction: column; - justify-content: center; - padding: 10px; - align-items: center; - border: solid #006a4e; - background-color: #b8d5cd; - border-radius: 40px; - margin: 10px 20px; - width: 40%; -} - -.container .product img { - width: 90%; - height: width; - max-height: 400px; - border: solid #006a4e; - border-radius: 40px; - overflow: hidden; - object-fit: fill; -} - -.container .product p, h3 { - margin: 5px 0px; -} - -.container .product .title { - font-size: 30px; -} - -.container .product .shopIn { - display: flex; - flex-direction: row; - justify-content: start; - vertical-align: middle; -} - -.container .product .shopIn span,button{ - display: flex; - vertical-align: middle; - margin: 10px 10px; - font-size: 30px; -} - -.container .product .shopIn button>span.buttonModifier { - text-align: center; - margin: 0px; - padding: 3px; -} - -.container .product .shopIn button{ - border-radius: 30px; - border-color: #006a4e; - background-color: #2e856e; - width: 40px; - height: 40px; - text-align: center; - padding: 0px 10px; - color: #b8d5cd; - font-size: 30px; -} - -.container .product .size { - font-size: 25px; -} - -.container .product .description{ - display: flex; - flex-direction: column; - justify-content: center; - text-align: justify; - height: 150px; -} - -#bunt,#grün,#special { - font-size: 50px; - color: #006a4e; +#übersicht { + display: flex; + flex-direction: column; + align-items: center; +} + +.container { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + margin: 10px 0px; + padding: 0px 10px; +} + +.container .product { + display: flex; + flex-direction: column; + justify-content: center; + padding: 10px; + align-items: center; + border: solid #006a4e; + background-color: #b8d5cd; + border-radius: 40px; + margin: 10px 20px; + width: 40%; +} + +.container .product img { + width: 90%; + height: width; + max-height: 400px; + border: solid #006a4e; + border-radius: 40px; + overflow: hidden; + object-fit: fill; +} + +.container .product p, h3 { + margin: 5px 0px; +} + +.container .product .title { + font-size: 30px; +} + +.container .product .shopIn { + display: flex; + flex-direction: row; + justify-content: start; + vertical-align: middle; +} + +.container .product .shopIn span,button{ + display: flex; + vertical-align: middle; + margin: 10px 10px; + font-size: 30px; +} + +.container .product .shopIn button>span.buttonModifier { + text-align: center; + margin: 0px; + padding: 3px; +} + +.container .product .shopIn button{ + border-radius: 30px; + border-color: #006a4e; + background-color: #2e856e; + width: 40px; + height: 40px; + text-align: center; + padding: 0px 10px; + color: #b8d5cd; + font-size: 30px; +} + +.container .product .size { + font-size: 25px; +} + +.container .product .description{ + display: flex; + flex-direction: column; + justify-content: center; + text-align: justify; + height: 150px; +} + +#bunt,#grün,#special { + font-size: 50px; + color: #006a4e; } \ No newline at end of file diff --git a/Aufgaben/Aufgabe_06_2020-06-03/product-small.css b/Aufgaben/Aufgabe_06_2020-06-03/product-small.css index 3d0f2e0..9465889 100644 --- a/Aufgaben/Aufgabe_06_2020-06-03/product-small.css +++ b/Aufgaben/Aufgabe_06_2020-06-03/product-small.css @@ -1,87 +1,87 @@ -.container { - display: flex; - flex-direction: column; - justify-content: center; - margin: 10px 0px; - padding: 0px 10px; -} - -.container .product { - display: flex; - flex-direction: column; - justify-content: center; - padding: 10px; - align-items: center; - border: solid #006a4e; - background-color: #b8d5cd; - border-radius: 40px; - margin: 10px 0px; -} - -.container .product img { - width: 90%; - height: auto; - max-height: 300px; - border: solid #006a4e; - border-radius: 40px; - overflow: hidden; - object-fit: fill; -} - -.container .product p, h3 { - margin: 5px 0px; -} - -.container .product .title { - font-size: 20px; -} - -.container .product .shopIn { - display: flex; - flex-direction: row; - justify-content: start; - vertical-align: middle; -} - -.container .product .shopIn span,button{ - display: flex; - vertical-align: middle; - margin: 10px 10px; - font-size: 30px; -} - -.container .product .shopIn button>span.buttonModifier { - text-align: center; - margin: 0px; - padding: 3px; -} - -.container .product .shopIn button{ - border-radius: 30px; - border-color: #006a4e; - background-color: #2e856e; - width: 40px; - height: 40px; - text-align: center; - padding: 0px 10px; - color: #b8d5cd; - font-size: 30px; -} - -.container .product .size { - font-size: 20px; -} - -.container .product .description{ - display: flex; - flex-direction: column; - justify-content: center; - text-align: justify; - height: 100px; -} - -#bunt,#grün,#special { - text-align: center; - font-size: 30px; - color: #006a4e; +.container { + display: flex; + flex-direction: column; + justify-content: center; + margin: 10px 0px; + padding: 0px 10px; +} + +.container .product { + display: flex; + flex-direction: column; + justify-content: center; + padding: 10px; + align-items: center; + border: solid #006a4e; + background-color: #b8d5cd; + border-radius: 40px; + margin: 10px 0px; +} + +.container .product img { + width: 90%; + height: auto; + max-height: 300px; + border: solid #006a4e; + border-radius: 40px; + overflow: hidden; + object-fit: fill; +} + +.container .product p, h3 { + margin: 5px 0px; +} + +.container .product .title { + font-size: 20px; +} + +.container .product .shopIn { + display: flex; + flex-direction: row; + justify-content: start; + vertical-align: middle; +} + +.container .product .shopIn span,button{ + display: flex; + vertical-align: middle; + margin: 10px 10px; + font-size: 30px; +} + +.container .product .shopIn button>span.buttonModifier { + text-align: center; + margin: 0px; + padding: 3px; +} + +.container .product .shopIn button{ + border-radius: 30px; + border-color: #006a4e; + background-color: #2e856e; + width: 40px; + height: 40px; + text-align: center; + padding: 0px 10px; + color: #b8d5cd; + font-size: 30px; +} + +.container .product .size { + font-size: 20px; +} + +.container .product .description{ + display: flex; + flex-direction: column; + justify-content: center; + text-align: justify; + height: 100px; +} + +#bunt,#grün,#special { + text-align: center; + font-size: 30px; + color: #006a4e; } \ No newline at end of file diff --git a/Aufgaben/Aufgabe_06_2020-06-03/product.css b/Aufgaben/Aufgabe_06_2020-06-03/product.css index e84906b..498acee 100644 --- a/Aufgaben/Aufgabe_06_2020-06-03/product.css +++ b/Aufgaben/Aufgabe_06_2020-06-03/product.css @@ -1,76 +1,76 @@ -.container { - display: flex; - flex-direction: column; - justify-content: center; - margin: 10px 0px; - padding: 0px 10px; -} - -.container .product { - display: flex; - flex-direction: column; - justify-content: center; - padding: 10px; - align-items: center; - border: solid #006a4e; - background-color: #b8d5cd; - border-radius: 40px; -} - -.container .product img { - width: 90%; - height: auto; - max-height: 300px; - border: solid #006a4e; - border-radius: 40px; - overflow: hidden; - object-fit: none; -} - -.container .product p, h3 { - margin: 5px 0px; -} - -.container .product .title { - font-size: 20px; -} - -.container .product .shopIn { - display: flex; - flex-direction: row; - justify-content: start; - vertical-align: middle; -} - -.container .product .shopIn span,button{ - display: flex; - vertical-align: middle; - margin: 10px 10px; - font-size: 30px; -} - -.container .product .shopIn button>span.buttonModifier { - text-align: center; - margin: 0px; - padding: 3px; -} - -.container .product .shopIn button{ -border-radius: 30px; -border-color: #006a4e; -background-color: #2e856e; -width: 40px; -height: 40px; -text-align: center; -padding: 0px 10px; -color: #b8d5cd; -font-size: 30px; -} - -.container .product .size { - font-size: 20px; -} - -.container .product .description{ - text-align: justify; +.container { + display: flex; + flex-direction: column; + justify-content: center; + margin: 10px 0px; + padding: 0px 10px; +} + +.container .product { + display: flex; + flex-direction: column; + justify-content: center; + padding: 10px; + align-items: center; + border: solid #006a4e; + background-color: #b8d5cd; + border-radius: 40px; +} + +.container .product img { + width: 90%; + height: auto; + max-height: 300px; + border: solid #006a4e; + border-radius: 40px; + overflow: hidden; + object-fit: none; +} + +.container .product p, h3 { + margin: 5px 0px; +} + +.container .product .title { + font-size: 20px; +} + +.container .product .shopIn { + display: flex; + flex-direction: row; + justify-content: start; + vertical-align: middle; +} + +.container .product .shopIn span,button{ + display: flex; + vertical-align: middle; + margin: 10px 10px; + font-size: 30px; +} + +.container .product .shopIn button>span.buttonModifier { + text-align: center; + margin: 0px; + padding: 3px; +} + +.container .product .shopIn button{ +border-radius: 30px; +border-color: #006a4e; +background-color: #2e856e; +width: 40px; +height: 40px; +text-align: center; +padding: 0px 10px; +color: #b8d5cd; +font-size: 30px; +} + +.container .product .size { + font-size: 20px; +} + +.container .product .description{ + text-align: justify; } \ No newline at end of file diff --git a/Aufgaben/Aufgabe_06_2020-06-03/script.js b/Aufgaben/Aufgabe_06_2020-06-03/script.js index a8b2dfd..1a204c3 100644 --- a/Aufgaben/Aufgabe_06_2020-06-03/script.js +++ b/Aufgaben/Aufgabe_06_2020-06-03/script.js @@ -159,18 +159,18 @@ var Aufgabe06; for (let index = 0; index < categories[nummer].products.length; index++) { let product = document.createElement("div"); product.classList.add("product"); - product.innerHTML = ` -

${categories[nummer].products[index].title}

-
- ${categories[nummer].products[index].price.toFixed(2).toLocaleString()} ¥ - - -
- Product -

Size: ${categories[nummer].products[index].size}

-
-

${categories[nummer].products[index].description}

-
+ product.innerHTML = ` +

${categories[nummer].products[index].title}

+
+ ${categories[nummer].products[index].price.toFixed(2).toLocaleString()} ¥ + + +
+ Product +

Size: ${categories[nummer].products[index].size}

+
+

${categories[nummer].products[index].description}

+
`; container.appendChild(product); } diff --git a/Aufgaben/Aufgabe_06_2020-06-03/script.ts b/Aufgaben/Aufgabe_06_2020-06-03/script.ts index b15e806..f424b03 100644 --- a/Aufgaben/Aufgabe_06_2020-06-03/script.ts +++ b/Aufgaben/Aufgabe_06_2020-06-03/script.ts @@ -1,289 +1,289 @@ -// Datensammlung für Produkte - -namespace Aufgabe06 { - - let shoppingPrice: number = 0; - let shoppingCount: number = 0; - - interface Product { - title: string; - price: number; - size: string; - imgName: string; - description: string; - } - - interface Category { - title: string; - id: string; - products: Product[]; - } - - let categories: Category[] = [ - { - title: "Special Offers!", - id: "special", - products: [ - { - title: "Color: Rainbow", - price: 3279.99, - size: "4m²", - imgName: "grass-rainbow-square.png", - description: "If you can't choose one color, go and catch them all!" - }, { - title: "Color: White", - price: 3279.99, - size: "4m²", - imgName: "grass-white.png", - description: "The appearance of many sparkling stars on your garden floor." - }, { - title: "Color: Black", - price: 3279.99, - size: "4m²", - imgName: "grass-black.png", - description: "Dark as the night. Be careful not to form a black hole!" - }, { - title: "Pattern: Murica", - price: 3279.99, - size: "4m²", - imgName: "grass-green-murica.png", - description: "Texas, Trump, Guns & Hamburgers" - }, { - title: "Pattern: Schachbrett", - price: 3279.99, - size: "4m²", - imgName: "grass-green-chess-square.png", - description: "Show your intellect on your own lawn and embarrass your opponents!" - } - ] - }, { - title: "Bunte Gräser", - id: "bunt", - products: [ - { - title: "Color: Green", - price: 2339.99, - size: "4m²", - imgName: "grass-green.png", - description: "The standard model in our range. Ensures a natural look and pleasant freshness in your living room!" - }, { - title: "Color: Desert", - price: 2339.99, - size: "4m²", - imgName: "grass-yellow.png", - description: "Summer, sun and oh my god, I'm hot! Are they pyramids in my garden ?!" - }, { - title: "Color: Beach", - price: 2339.99, - size: "4m²", - imgName: "grass-orange.png", - description: "Summer, sun and hot feelings!" - }, { - title: "Pattern: Hell", - price: 2339.99, - size: "4m²", - imgName: "grass-red.png", - description: "Look into the abyss that could await you after your death and invite guests to it!" - }, { - title: "Pattern: Unicorn", - price: 2339.99, - size: "4m²", - imgName: "grass-pink.png", - description: "PINK FLUFFY UNICORN, DANCING ON RAINBOWS (which you can also buy in here) !!!" - }, { - title: "Pattern: Grape", - price: 2339.99, - size: "4m²", - imgName: "grass-purple.png", - description: "It looks purple. Do you have to say more?" - }, { - title: "Pattern: Atlantic", - price: 2339.99, - size: "4m²", - imgName: "grass-blue.png", - description: "Blue like the ocean. A deep look and mysterious nature." - } - ] - }, { - title: "Green-Tones", - id: "grün", - products: [ - { - title: "Green: 3B", - price: 3499.99, - size: "10m²", - imgName: "grass-green-dark-3.png", - description: "Green in every way. Nothing more to know about it." - }, { - title: "Green: 2B", - price: 3499.99, - size: "10m²", - imgName: "grass-green-dark-2.png", - description: "Green in every way. Nothing more to know about it." - }, { - title: "Green: B", - price: 3499.99, - size: "10m²", - imgName: "grass-green-dark-1.png", - description: "Green in every way. Nothing more to know about it." - }, { - title: "Green: HB", - price: 2339.99, - size: "10m²", - imgName: "grass-green.png", - description: "The standard model in our range. Ensures a natural look and pleasant freshness in your living room!" - }, { - title: "Green: H", - price: 3499.99, - size: "10m²", - imgName: "grass-green-light-1.png", - description: "Green in every way. Nothing more to know about it." - }, { - title: "Green: 2H", - price: 3499.99, - size: "10m²", - imgName: "grass-green-light-2.png", - description: "Green in every way. Nothing more to know about it." - }, { - title: "Green: 3H", - price: 3499.99, - size: "10m²", - imgName: "grass-green-light-3.png", - description: "Green in every way. Nothing more to know about it." - } - ] - } - ]; - - printProducts(100); - - //create Structure; - - function printProducts(_catNumber: number): void { - - clearProducts(); - - let catCheck: boolean = false; - if (_catNumber != 100) - catCheck = true; - else - _catNumber = 0; - - for (let nummer: number = _catNumber; nummer < categories.length; nummer++) { - - let heading: HTMLHeadingElement = document.createElement("h1"); - heading.setAttribute("id", categories[nummer].id); - heading.innerHTML = `${categories[nummer].title}`; - (document.querySelector("#übersicht")).appendChild(heading); - - let container: HTMLDivElement = document.createElement("div"); - container.classList.add("container"); - (document.querySelector("#übersicht")).appendChild(container); - - for (let index: number = 0; index < categories[nummer].products.length; index++) { - let product: HTMLDivElement = document.createElement("div"); - product.classList.add("product"); - product.innerHTML = ` -

${categories[nummer].products[index].title}

-
- ${categories[nummer].products[index].price.toFixed(2).toLocaleString()} ¥ - - -
- Product -

Size: ${categories[nummer].products[index].size}

-
-

${categories[nummer].products[index].description}

-
- `; - container.appendChild(product); - } - if (catCheck) - break; - } - addShoppingFunction(); - } - - function clearProducts(): void { - console.log("Ich wurde geklickt"); - for (let nummer: number = 0; nummer < categories.length; nummer++) { - let alles: HTMLDivElement = (document.querySelector("#übersicht")); - alles.innerHTML = ""; - } - } - - (document.querySelector("#special_a")).addEventListener("click", drawSpecial); - function drawSpecial(): void { - printProducts(0); - } - (document.querySelector("#bunt_a")).addEventListener("click", drawBunt); - function drawBunt(): void { - printProducts(1); - } - (document.querySelector("#grün_a")).addEventListener("click", drawGrün); - function drawGrün(): void { - printProducts(2); - } - (document.querySelector("#all_a")).addEventListener("click", drawAll); - function drawAll(): void { - printProducts(100); - } - - function money(_event: Event): void { - let target: HTMLElement = (_event.target); - let price: number = parseFloat(target.getAttribute("productPrice")!); - console.log("Artikel-Preis: " + price + " ¥"); - shoppingPrice += price; - console.log("Shopping-Cart-Preis: " + shoppingPrice + " ¥"); - shoppingCount++; - (document.querySelector("#shoppingCartNumber")).innerHTML = shoppingCount.toLocaleString(); - } - - function addShoppingFunction(): void { - const buttons: HTMLCollectionOf = document.getElementsByClassName("addProduct"); - for (const button of buttons) { - button.addEventListener("click", money); - } - } -} - -// Folgender auskommentierter Code dient mir als Archiv für Gedankenansätze oder Verläufe. -// Wenn dies nicht gerne gesehen ist, gebt mir kurz Bescheid und ich werde es entfernen - -/* -function zeichnen(tagArray: Tag[]): void { - for (let i: number = 0; i < tagArray.length ; i++){ - let title: HTMLElement = document.createElement(tagArray[i].tag); - title.innerHTML = "I bims title"; - title.classList.add("title"); - if (tagArray[i].image) { - title.setAttribute("src", "value"); - title.setAttribute("alt", "value"); - } - document.body.appendChild(title); - } -} -*/ - -/* -console.log("Hello Console"); -let theName: String = "Justin" + "Dretvic" + 20; -console.log(theName); -*/ - -/* -# Template für ein Produkt in HTML -
tag class -

Color: Rainbow

tag class content -
tag class - 3279,99 ¥ tag class content - tag content - tag content -
- Product tag attribute1 attribute2 -

Size: 4m²

tag class content -
tag class -

If you can't choose one color, go and catch them all!

tag content -
-
+// Datensammlung für Produkte + +namespace Aufgabe06 { + + let shoppingPrice: number = 0; + let shoppingCount: number = 0; + + interface Product { + title: string; + price: number; + size: string; + imgName: string; + description: string; + } + + interface Category { + title: string; + id: string; + products: Product[]; + } + + let categories: Category[] = [ + { + title: "Special Offers!", + id: "special", + products: [ + { + title: "Color: Rainbow", + price: 3279.99, + size: "4m²", + imgName: "grass-rainbow-square.png", + description: "If you can't choose one color, go and catch them all!" + }, { + title: "Color: White", + price: 3279.99, + size: "4m²", + imgName: "grass-white.png", + description: "The appearance of many sparkling stars on your garden floor." + }, { + title: "Color: Black", + price: 3279.99, + size: "4m²", + imgName: "grass-black.png", + description: "Dark as the night. Be careful not to form a black hole!" + }, { + title: "Pattern: Murica", + price: 3279.99, + size: "4m²", + imgName: "grass-green-murica.png", + description: "Texas, Trump, Guns & Hamburgers" + }, { + title: "Pattern: Schachbrett", + price: 3279.99, + size: "4m²", + imgName: "grass-green-chess-square.png", + description: "Show your intellect on your own lawn and embarrass your opponents!" + } + ] + }, { + title: "Bunte Gräser", + id: "bunt", + products: [ + { + title: "Color: Green", + price: 2339.99, + size: "4m²", + imgName: "grass-green.png", + description: "The standard model in our range. Ensures a natural look and pleasant freshness in your living room!" + }, { + title: "Color: Desert", + price: 2339.99, + size: "4m²", + imgName: "grass-yellow.png", + description: "Summer, sun and oh my god, I'm hot! Are they pyramids in my garden ?!" + }, { + title: "Color: Beach", + price: 2339.99, + size: "4m²", + imgName: "grass-orange.png", + description: "Summer, sun and hot feelings!" + }, { + title: "Pattern: Hell", + price: 2339.99, + size: "4m²", + imgName: "grass-red.png", + description: "Look into the abyss that could await you after your death and invite guests to it!" + }, { + title: "Pattern: Unicorn", + price: 2339.99, + size: "4m²", + imgName: "grass-pink.png", + description: "PINK FLUFFY UNICORN, DANCING ON RAINBOWS (which you can also buy in here) !!!" + }, { + title: "Pattern: Grape", + price: 2339.99, + size: "4m²", + imgName: "grass-purple.png", + description: "It looks purple. Do you have to say more?" + }, { + title: "Pattern: Atlantic", + price: 2339.99, + size: "4m²", + imgName: "grass-blue.png", + description: "Blue like the ocean. A deep look and mysterious nature." + } + ] + }, { + title: "Green-Tones", + id: "grün", + products: [ + { + title: "Green: 3B", + price: 3499.99, + size: "10m²", + imgName: "grass-green-dark-3.png", + description: "Green in every way. Nothing more to know about it." + }, { + title: "Green: 2B", + price: 3499.99, + size: "10m²", + imgName: "grass-green-dark-2.png", + description: "Green in every way. Nothing more to know about it." + }, { + title: "Green: B", + price: 3499.99, + size: "10m²", + imgName: "grass-green-dark-1.png", + description: "Green in every way. Nothing more to know about it." + }, { + title: "Green: HB", + price: 2339.99, + size: "10m²", + imgName: "grass-green.png", + description: "The standard model in our range. Ensures a natural look and pleasant freshness in your living room!" + }, { + title: "Green: H", + price: 3499.99, + size: "10m²", + imgName: "grass-green-light-1.png", + description: "Green in every way. Nothing more to know about it." + }, { + title: "Green: 2H", + price: 3499.99, + size: "10m²", + imgName: "grass-green-light-2.png", + description: "Green in every way. Nothing more to know about it." + }, { + title: "Green: 3H", + price: 3499.99, + size: "10m²", + imgName: "grass-green-light-3.png", + description: "Green in every way. Nothing more to know about it." + } + ] + } + ]; + + printProducts(100); + + //create Structure; + + function printProducts(_catNumber: number): void { + + clearProducts(); + + let catCheck: boolean = false; + if (_catNumber != 100) + catCheck = true; + else + _catNumber = 0; + + for (let nummer: number = _catNumber; nummer < categories.length; nummer++) { + + let heading: HTMLHeadingElement = document.createElement("h1"); + heading.setAttribute("id", categories[nummer].id); + heading.innerHTML = `${categories[nummer].title}`; + (document.querySelector("#übersicht")).appendChild(heading); + + let container: HTMLDivElement = document.createElement("div"); + container.classList.add("container"); + (document.querySelector("#übersicht")).appendChild(container); + + for (let index: number = 0; index < categories[nummer].products.length; index++) { + let product: HTMLDivElement = document.createElement("div"); + product.classList.add("product"); + product.innerHTML = ` +

${categories[nummer].products[index].title}

+
+ ${categories[nummer].products[index].price.toFixed(2).toLocaleString()} ¥ + + +
+ Product +

Size: ${categories[nummer].products[index].size}

+
+

${categories[nummer].products[index].description}

+
+ `; + container.appendChild(product); + } + if (catCheck) + break; + } + addShoppingFunction(); + } + + function clearProducts(): void { + console.log("Ich wurde geklickt"); + for (let nummer: number = 0; nummer < categories.length; nummer++) { + let alles: HTMLDivElement = (document.querySelector("#übersicht")); + alles.innerHTML = ""; + } + } + + (document.querySelector("#special_a")).addEventListener("click", drawSpecial); + function drawSpecial(): void { + printProducts(0); + } + (document.querySelector("#bunt_a")).addEventListener("click", drawBunt); + function drawBunt(): void { + printProducts(1); + } + (document.querySelector("#grün_a")).addEventListener("click", drawGrün); + function drawGrün(): void { + printProducts(2); + } + (document.querySelector("#all_a")).addEventListener("click", drawAll); + function drawAll(): void { + printProducts(100); + } + + function money(_event: Event): void { + let target: HTMLElement = (_event.target); + let price: number = parseFloat(target.getAttribute("productPrice")!); + console.log("Artikel-Preis: " + price + " ¥"); + shoppingPrice += price; + console.log("Shopping-Cart-Preis: " + shoppingPrice + " ¥"); + shoppingCount++; + (document.querySelector("#shoppingCartNumber")).innerHTML = shoppingCount.toLocaleString(); + } + + function addShoppingFunction(): void { + const buttons: HTMLCollectionOf = document.getElementsByClassName("addProduct"); + for (const button of buttons) { + button.addEventListener("click", money); + } + } +} + +// Folgender auskommentierter Code dient mir als Archiv für Gedankenansätze oder Verläufe. +// Wenn dies nicht gerne gesehen ist, gebt mir kurz Bescheid und ich werde es entfernen + +/* +function zeichnen(tagArray: Tag[]): void { + for (let i: number = 0; i < tagArray.length ; i++){ + let title: HTMLElement = document.createElement(tagArray[i].tag); + title.innerHTML = "I bims title"; + title.classList.add("title"); + if (tagArray[i].image) { + title.setAttribute("src", "value"); + title.setAttribute("alt", "value"); + } + document.body.appendChild(title); + } +} +*/ + +/* +console.log("Hello Console"); +let theName: String = "Justin" + "Dretvic" + 20; +console.log(theName); +*/ + +/* +# Template für ein Produkt in HTML +
tag class +

Color: Rainbow

tag class content +
tag class + 3279,99 ¥ tag class content + tag content + tag content +
+ Product tag attribute1 attribute2 +

Size: 4m²

tag class content +
tag class +

If you can't choose one color, go and catch them all!

tag content +
+
*/ \ No newline at end of file diff --git a/Aufgaben/Aufgabe_06_2020-06-03/shop.css b/Aufgaben/Aufgabe_06_2020-06-03/shop.css index e54fc54..54adb58 100644 --- a/Aufgaben/Aufgabe_06_2020-06-03/shop.css +++ b/Aufgaben/Aufgabe_06_2020-06-03/shop.css @@ -1,124 +1,124 @@ -body { - margin: 0; - font-family: Chelsea Market; -} - -header { - padding: 10px 0px; - position: relative; - top: 0; - width: 100%; - background-color: #006a4e; - color: #b8d5cd; -} - -header ul { - list-style: none; - padding: 0px; -} - -header li { - display: block; - margin: 10px auto 0px; -} - -header li a { - text-decoration: none; - color: #b8d5cd; -} - -header .dropdown { - text-align: center; - font-size: 20px; - position: relative; - display: block; - background-color: #2e856e; - border-radius: 40px; - margin: 10px 5px 0px 5px; - padding: 10px 0px; - width: 80%; -} - -header .dropdown-content { - display: none; -} - -header .dropdown:hover .dropdown-content { - display: block; - margin-bottom: 0px; -} - -header #shopping_cart { - text-align: center; - position: relative; - display: block; - background-color: #2e856e; - border-radius: 40px; - margin: 10px 5px 0px 5px; - padding: 10px 0px; - width: 100px; - height: 30px; -} - -header #shopping_cart a { - text-decoration: none; - color: #b8d5cd; - font-size:24px -} - -header #shopping_cart a:hover { - color: white; -} - -header .title_bar img { - width: 40px; - height: 40px; - margin: 5px 15px; -} - -header .title_bar span { - font-size: 27px; - line-height: 50px; - margin: auto 0px; -} - -header .title_bar { - display: flex; - flex-direction: row; - justify-content: center; - background-color: #2e856e; - border-radius: 40px; - padding: 5px; - margin: 5px -} - -header #bottom { - display: flex; - flex-direction: row; - justify-content: center; -} - -header #shopping_cart { - margin: 10px auto; - text-align: center; - color: #b8d5cd; - display: block; - background-color: #2e856e; - border-radius: 40px; - margin: 10px 5px 0px 5px; - padding: 10px 0px; -} - -footer { - text-align: center; - padding: 10px 5px; - position: relative; - bottom: 0; - width: calc(100%-10px); - background-color: #272727; - color: white; -} - -footer p { - margin: 0px 0px 10px; +body { + margin: 0; + font-family: Chelsea Market; +} + +header { + padding: 10px 0px; + position: relative; + top: 0; + width: 100%; + background-color: #006a4e; + color: #b8d5cd; +} + +header ul { + list-style: none; + padding: 0px; +} + +header li { + display: block; + margin: 10px auto 0px; +} + +header li a { + text-decoration: none; + color: #b8d5cd; +} + +header .dropdown { + text-align: center; + font-size: 20px; + position: relative; + display: block; + background-color: #2e856e; + border-radius: 40px; + margin: 10px 5px 0px 5px; + padding: 10px 0px; + width: 80%; +} + +header .dropdown-content { + display: none; +} + +header .dropdown:hover .dropdown-content { + display: block; + margin-bottom: 0px; +} + +header #shopping_cart { + text-align: center; + position: relative; + display: block; + background-color: #2e856e; + border-radius: 40px; + margin: 10px 5px 0px 5px; + padding: 10px 0px; + width: 100px; + height: 30px; +} + +header #shopping_cart a { + text-decoration: none; + color: #b8d5cd; + font-size:24px +} + +header #shopping_cart a:hover { + color: white; +} + +header .title_bar img { + width: 40px; + height: 40px; + margin: 5px 15px; +} + +header .title_bar span { + font-size: 27px; + line-height: 50px; + margin: auto 0px; +} + +header .title_bar { + display: flex; + flex-direction: row; + justify-content: center; + background-color: #2e856e; + border-radius: 40px; + padding: 5px; + margin: 5px +} + +header #bottom { + display: flex; + flex-direction: row; + justify-content: center; +} + +header #shopping_cart { + margin: 10px auto; + text-align: center; + color: #b8d5cd; + display: block; + background-color: #2e856e; + border-radius: 40px; + margin: 10px 5px 0px 5px; + padding: 10px 0px; +} + +footer { + text-align: center; + padding: 10px 5px; + position: relative; + bottom: 0; + width: calc(100%-10px); + background-color: #272727; + color: white; +} + +footer p { + margin: 0px 0px 10px; } \ No newline at end of file diff --git a/Aufgaben/Aufgabe_06_2020-06-03/shop.html b/Aufgaben/Aufgabe_06_2020-06-03/shop.html index a9b6ec4..287af94 100644 --- a/Aufgaben/Aufgabe_06_2020-06-03/shop.html +++ b/Aufgaben/Aufgabe_06_2020-06-03/shop.html @@ -1,51 +1,51 @@ - - - - - - - - - - - - - - green grass - - - -
-
- grass - GREEEN GRASS - grass -
- -
- -
- -
- -
-

Disclaimer

-

This website is not used monetarily

-

Not even if things seem to be sold here!

-
- - + + + + + + + + + + + + + + green grass + + + +
+
+ grass + GREEEN GRASS + grass +
+ +
+ +
+ +
+ +
+

Disclaimer

+

This website is not used monetarily

+

Not even if things seem to be sold here!

+
+ + \ No newline at end of file diff --git a/Aufgaben/Aufgabe_07_2020-06-10/myJSON.json b/Aufgaben/Aufgabe_07_2020-06-10/myJSON.json index 6ed2827..1917bea 100644 --- a/Aufgaben/Aufgabe_07_2020-06-10/myJSON.json +++ b/Aufgaben/Aufgabe_07_2020-06-10/myJSON.json @@ -1,153 +1,153 @@ -[ - { - "title": "Special Offers!", - "id": "special", - "products": [ - { - "title": "Color: Rainbow", - "price": 3279.99, - "size": "4m²", - "imgName": "grass-rainbow-square.png", - "description": "If you can't choose one color, go and catch them all!" - }, - { - "title": "Color: White", - "price": 3279.99, - "size": "4m²", - "imgName": "grass-white.png", - "description": "The appearance of many sparkling stars on your garden floor." - }, - { - "title": "Color: Black", - "price": 3279.99, - "size": "4m²", - "imgName": "grass-black.png", - "description": "Dark as the night. Be careful not to form a black hole!" - }, - { - "title": "Pattern: Murica", - "price": 3279.99, - "size": "4m²", - "imgName": "grass-green-murica.png", - "description": "Texas, Trump, Guns & Hamburgers" - }, - { - "title": "Pattern: Schachbrett", - "price": 3279.99, - "size": "4m²", - "imgName": "grass-green-chess-square.png", - "description": "Show your intellect on your own lawn and embarrass your opponents!" - } - ] - }, - { - "title": "Bunte Gräser", - "id": "bunt", - "products": [ - { - "title": "Color: Green", - "price": 2339.99, - "size": "4m²", - "imgName": "grass-green.png", - "description": "The standard model in our range. Ensures a natural look and pleasant freshness in your living room!" - }, - { - "title": "Color: Desert", - "price": 2339.99, - "size": "4m²", - "imgName": "grass-yellow.png", - "description": "Summer, sun and oh my god, I'm hot! Are they pyramids in my garden ?!" - }, - { - "title": "Color: Beach", - "price": 2339.99, - "size": "4m²", - "imgName": "grass-orange.png", - "description": "Summer, sun and hot feelings!" - }, - { - "title": "Pattern: Hell", - "price": 2339.99, - "size": "4m²", - "imgName": "grass-red.png", - "description": "Look into the abyss that could await you after your death and invite guests to it!" - }, - { - "title": "Pattern: Unicorn", - "price": 2339.99, - "size": "4m²", - "imgName": "grass-pink.png", - "description": "PINK FLUFFY UNICORN, DANCING ON RAINBOWS (which you can also buy in here) !!!" - }, - { - "title": "Pattern: Grape", - "price": 2339.99, - "size": "4m²", - "imgName": "grass-purple.png", - "description": "It looks purple. Do you have to say more?" - }, - { - "title": "Pattern: Atlantic", - "price": 2339.99, - "size": "4m²", - "imgName": "grass-blue.png", - "description": "Blue like the ocean. A deep look and mysterious nature." - } - ] - }, - { - "title": "Green-Tones", - "id": "grün", - "products": [ - { - "title": "Green: 3B", - "price": 3499.99, - "size": "10m²", - "imgName": "grass-green-dark-3.png", - "description": "Green in every way. Nothing more to know about it." - }, - { - "title": "Green: 2B", - "price": 3499.99, - "size": "10m²", - "imgName": "grass-green-dark-2.png", - "description": "Green in every way. Nothing more to know about it." - }, - { - "title": "Green: B", - "price": 3499.99, - "size": "10m²", - "imgName": "grass-green-dark-1.png", - "description": "Green in every way. Nothing more to know about it." - }, - { - "title": "Green: HB", - "price": 2339.99, - "size": "10m²", - "imgName": "grass-green.png", - "description": "The standard model in our range. Ensures a natural look and pleasant freshness in your living room!" - }, - { - "title": "Green: H", - "price": 3499.99, - "size": "10m²", - "imgName": "grass-green-light-1.png", - "description": "Green in every way. Nothing more to know about it." - }, - { - "title": "Green: 2H", - "price": 3499.99, - "size": "10m²", - "imgName": "grass-green-light-2.png", - "description": "Green in every way. Nothing more to know about it." - }, - { - "title": "Green: 3H", - "price": 3499.99, - "size": "10m²", - "imgName": "grass-green-light-3.png", - "description": "Green in every way. Nothing more to know about it." - } - ] - } +[ + { + "title": "Special Offers!", + "id": "special", + "products": [ + { + "title": "Color: Rainbow", + "price": 3279.99, + "size": "4m²", + "imgName": "grass-rainbow-square.png", + "description": "If you can't choose one color, go and catch them all!" + }, + { + "title": "Color: White", + "price": 3279.99, + "size": "4m²", + "imgName": "grass-white.png", + "description": "The appearance of many sparkling stars on your garden floor." + }, + { + "title": "Color: Black", + "price": 3279.99, + "size": "4m²", + "imgName": "grass-black.png", + "description": "Dark as the night. Be careful not to form a black hole!" + }, + { + "title": "Pattern: Murica", + "price": 3279.99, + "size": "4m²", + "imgName": "grass-green-murica.png", + "description": "Texas, Trump, Guns & Hamburgers" + }, + { + "title": "Pattern: Schachbrett", + "price": 3279.99, + "size": "4m²", + "imgName": "grass-green-chess-square.png", + "description": "Show your intellect on your own lawn and embarrass your opponents!" + } + ] + }, + { + "title": "Bunte Gräser", + "id": "bunt", + "products": [ + { + "title": "Color: Green", + "price": 2339.99, + "size": "4m²", + "imgName": "grass-green.png", + "description": "The standard model in our range. Ensures a natural look and pleasant freshness in your living room!" + }, + { + "title": "Color: Desert", + "price": 2339.99, + "size": "4m²", + "imgName": "grass-yellow.png", + "description": "Summer, sun and oh my god, I'm hot! Are they pyramids in my garden ?!" + }, + { + "title": "Color: Beach", + "price": 2339.99, + "size": "4m²", + "imgName": "grass-orange.png", + "description": "Summer, sun and hot feelings!" + }, + { + "title": "Pattern: Hell", + "price": 2339.99, + "size": "4m²", + "imgName": "grass-red.png", + "description": "Look into the abyss that could await you after your death and invite guests to it!" + }, + { + "title": "Pattern: Unicorn", + "price": 2339.99, + "size": "4m²", + "imgName": "grass-pink.png", + "description": "PINK FLUFFY UNICORN, DANCING ON RAINBOWS (which you can also buy in here) !!!" + }, + { + "title": "Pattern: Grape", + "price": 2339.99, + "size": "4m²", + "imgName": "grass-purple.png", + "description": "It looks purple. Do you have to say more?" + }, + { + "title": "Pattern: Atlantic", + "price": 2339.99, + "size": "4m²", + "imgName": "grass-blue.png", + "description": "Blue like the ocean. A deep look and mysterious nature." + } + ] + }, + { + "title": "Green-Tones", + "id": "grün", + "products": [ + { + "title": "Green: 3B", + "price": 3499.99, + "size": "10m²", + "imgName": "grass-green-dark-3.png", + "description": "Green in every way. Nothing more to know about it." + }, + { + "title": "Green: 2B", + "price": 3499.99, + "size": "10m²", + "imgName": "grass-green-dark-2.png", + "description": "Green in every way. Nothing more to know about it." + }, + { + "title": "Green: B", + "price": 3499.99, + "size": "10m²", + "imgName": "grass-green-dark-1.png", + "description": "Green in every way. Nothing more to know about it." + }, + { + "title": "Green: HB", + "price": 2339.99, + "size": "10m²", + "imgName": "grass-green.png", + "description": "The standard model in our range. Ensures a natural look and pleasant freshness in your living room!" + }, + { + "title": "Green: H", + "price": 3499.99, + "size": "10m²", + "imgName": "grass-green-light-1.png", + "description": "Green in every way. Nothing more to know about it." + }, + { + "title": "Green: 2H", + "price": 3499.99, + "size": "10m²", + "imgName": "grass-green-light-2.png", + "description": "Green in every way. Nothing more to know about it." + }, + { + "title": "Green: 3H", + "price": 3499.99, + "size": "10m²", + "imgName": "grass-green-light-3.png", + "description": "Green in every way. Nothing more to know about it." + } + ] + } ] \ No newline at end of file diff --git a/Aufgaben/Aufgabe_07_2020-06-10/product-big.css b/Aufgaben/Aufgabe_07_2020-06-10/product-big.css index 75c1953..3a38a67 100644 --- a/Aufgaben/Aufgabe_07_2020-06-10/product-big.css +++ b/Aufgaben/Aufgabe_07_2020-06-10/product-big.css @@ -1,89 +1,89 @@ -#übersicht { - display: flex; - flex-direction: column; - align-items: center; -} - -.container { - display: flex; - flex-direction: row; - justify-content: center; - flex-wrap: wrap; - margin: 10px 0px; - padding: 0px 10px; -} - -.container .product { - width: 300px; - display: flex; - flex-direction: column; - justify-content: center; - padding: 10px; - align-items: center; - border: solid #006a4e; - background-color: #b8d5cd; - border-radius: 40px; -} - -.container .product img { - width: 90%; - height: auto; - max-height: 300px; - border: solid #006a4e; - border-radius: 40px; - overflow: hidden; - object-fit: fill; -} - -.container .product p, h3 { - margin: 5px 0px; -} - -.container .product .title { - font-size: 20px; -} - -.container .product .shopIn { - display: flex; - flex-direction: row; - justify-content: start; - vertical-align: middle; -} - -.container .product .shopIn span,button{ - display: flex; - vertical-align: middle; - margin: 10px 10px; - font-size: 30px; -} - -.container .product .shopIn button>span.buttonModifier { - text-align: center; - margin: 0px; - padding: 3px; -} - -.container .product .shopIn button{ - border-radius: 30px; - border-color: #006a4e; - background-color: #2e856e; - width: 40px; - height: 40px; - text-align: center; - padding: 0px 10px; - color: #b8d5cd; - font-size: 30px; -} - -.container .product .size { - font-size: 20px; -} - -.container .product .description{ - display: flex; - flex-direction: column; - justify-content: center; - text-align: justify; - height: 150px; - font-size: 20px; +#übersicht { + display: flex; + flex-direction: column; + align-items: center; +} + +.container { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + margin: 10px 0px; + padding: 0px 10px; +} + +.container .product { + width: 300px; + display: flex; + flex-direction: column; + justify-content: center; + padding: 10px; + align-items: center; + border: solid #006a4e; + background-color: #b8d5cd; + border-radius: 40px; +} + +.container .product img { + width: 90%; + height: auto; + max-height: 300px; + border: solid #006a4e; + border-radius: 40px; + overflow: hidden; + object-fit: fill; +} + +.container .product p, h3 { + margin: 5px 0px; +} + +.container .product .title { + font-size: 20px; +} + +.container .product .shopIn { + display: flex; + flex-direction: row; + justify-content: start; + vertical-align: middle; +} + +.container .product .shopIn span,button{ + display: flex; + vertical-align: middle; + margin: 10px 10px; + font-size: 30px; +} + +.container .product .shopIn button>span.buttonModifier { + text-align: center; + margin: 0px; + padding: 3px; +} + +.container .product .shopIn button{ + border-radius: 30px; + border-color: #006a4e; + background-color: #2e856e; + width: 40px; + height: 40px; + text-align: center; + padding: 0px 10px; + color: #b8d5cd; + font-size: 30px; +} + +.container .product .size { + font-size: 20px; +} + +.container .product .description{ + display: flex; + flex-direction: column; + justify-content: center; + text-align: justify; + height: 150px; + font-size: 20px; } \ No newline at end of file diff --git a/Aufgaben/Aufgabe_07_2020-06-10/product-medium.css b/Aufgaben/Aufgabe_07_2020-06-10/product-medium.css index a5579e6..e285486 100644 --- a/Aufgaben/Aufgabe_07_2020-06-10/product-medium.css +++ b/Aufgaben/Aufgabe_07_2020-06-10/product-medium.css @@ -1,94 +1,94 @@ -#übersicht { - display: flex; - flex-direction: column; - align-items: center; -} - -.container { - display: flex; - flex-direction: row; - justify-content: center; - flex-wrap: wrap; - margin: 10px 0px; - padding: 0px 10px; -} - -.container .product { - display: flex; - flex-direction: column; - justify-content: center; - padding: 10px; - align-items: center; - border: solid #006a4e; - background-color: #b8d5cd; - border-radius: 40px; - margin: 10px 20px; - width: 40%; -} - -.container .product img { - width: 90%; - height: width; - max-height: 400px; - border: solid #006a4e; - border-radius: 40px; - overflow: hidden; - object-fit: fill; -} - -.container .product p, h3 { - margin: 5px 0px; -} - -.container .product .title { - font-size: 30px; -} - -.container .product .shopIn { - display: flex; - flex-direction: row; - justify-content: start; - vertical-align: middle; -} - -.container .product .shopIn span,button{ - display: flex; - vertical-align: middle; - margin: 10px 10px; - font-size: 30px; -} - -.container .product .shopIn button>span.buttonModifier { - text-align: center; - margin: 0px; - padding: 3px; -} - -.container .product .shopIn button{ - border-radius: 30px; - border-color: #006a4e; - background-color: #2e856e; - width: 40px; - height: 40px; - text-align: center; - padding: 0px 10px; - color: #b8d5cd; - font-size: 30px; -} - -.container .product .size { - font-size: 25px; -} - -.container .product .description{ - display: flex; - flex-direction: column; - justify-content: center; - text-align: justify; - height: 150px; -} - -#bunt,#grün,#special { - font-size: 50px; - color: #006a4e; +#übersicht { + display: flex; + flex-direction: column; + align-items: center; +} + +.container { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + margin: 10px 0px; + padding: 0px 10px; +} + +.container .product { + display: flex; + flex-direction: column; + justify-content: center; + padding: 10px; + align-items: center; + border: solid #006a4e; + background-color: #b8d5cd; + border-radius: 40px; + margin: 10px 20px; + width: 40%; +} + +.container .product img { + width: 90%; + height: width; + max-height: 400px; + border: solid #006a4e; + border-radius: 40px; + overflow: hidden; + object-fit: fill; +} + +.container .product p, h3 { + margin: 5px 0px; +} + +.container .product .title { + font-size: 30px; +} + +.container .product .shopIn { + display: flex; + flex-direction: row; + justify-content: start; + vertical-align: middle; +} + +.container .product .shopIn span,button{ + display: flex; + vertical-align: middle; + margin: 10px 10px; + font-size: 30px; +} + +.container .product .shopIn button>span.buttonModifier { + text-align: center; + margin: 0px; + padding: 3px; +} + +.container .product .shopIn button{ + border-radius: 30px; + border-color: #006a4e; + background-color: #2e856e; + width: 40px; + height: 40px; + text-align: center; + padding: 0px 10px; + color: #b8d5cd; + font-size: 30px; +} + +.container .product .size { + font-size: 25px; +} + +.container .product .description{ + display: flex; + flex-direction: column; + justify-content: center; + text-align: justify; + height: 150px; +} + +#bunt,#grün,#special { + font-size: 50px; + color: #006a4e; } \ No newline at end of file diff --git a/Aufgaben/Aufgabe_07_2020-06-10/product-small.css b/Aufgaben/Aufgabe_07_2020-06-10/product-small.css index 3d0f2e0..9465889 100644 --- a/Aufgaben/Aufgabe_07_2020-06-10/product-small.css +++ b/Aufgaben/Aufgabe_07_2020-06-10/product-small.css @@ -1,87 +1,87 @@ -.container { - display: flex; - flex-direction: column; - justify-content: center; - margin: 10px 0px; - padding: 0px 10px; -} - -.container .product { - display: flex; - flex-direction: column; - justify-content: center; - padding: 10px; - align-items: center; - border: solid #006a4e; - background-color: #b8d5cd; - border-radius: 40px; - margin: 10px 0px; -} - -.container .product img { - width: 90%; - height: auto; - max-height: 300px; - border: solid #006a4e; - border-radius: 40px; - overflow: hidden; - object-fit: fill; -} - -.container .product p, h3 { - margin: 5px 0px; -} - -.container .product .title { - font-size: 20px; -} - -.container .product .shopIn { - display: flex; - flex-direction: row; - justify-content: start; - vertical-align: middle; -} - -.container .product .shopIn span,button{ - display: flex; - vertical-align: middle; - margin: 10px 10px; - font-size: 30px; -} - -.container .product .shopIn button>span.buttonModifier { - text-align: center; - margin: 0px; - padding: 3px; -} - -.container .product .shopIn button{ - border-radius: 30px; - border-color: #006a4e; - background-color: #2e856e; - width: 40px; - height: 40px; - text-align: center; - padding: 0px 10px; - color: #b8d5cd; - font-size: 30px; -} - -.container .product .size { - font-size: 20px; -} - -.container .product .description{ - display: flex; - flex-direction: column; - justify-content: center; - text-align: justify; - height: 100px; -} - -#bunt,#grün,#special { - text-align: center; - font-size: 30px; - color: #006a4e; +.container { + display: flex; + flex-direction: column; + justify-content: center; + margin: 10px 0px; + padding: 0px 10px; +} + +.container .product { + display: flex; + flex-direction: column; + justify-content: center; + padding: 10px; + align-items: center; + border: solid #006a4e; + background-color: #b8d5cd; + border-radius: 40px; + margin: 10px 0px; +} + +.container .product img { + width: 90%; + height: auto; + max-height: 300px; + border: solid #006a4e; + border-radius: 40px; + overflow: hidden; + object-fit: fill; +} + +.container .product p, h3 { + margin: 5px 0px; +} + +.container .product .title { + font-size: 20px; +} + +.container .product .shopIn { + display: flex; + flex-direction: row; + justify-content: start; + vertical-align: middle; +} + +.container .product .shopIn span,button{ + display: flex; + vertical-align: middle; + margin: 10px 10px; + font-size: 30px; +} + +.container .product .shopIn button>span.buttonModifier { + text-align: center; + margin: 0px; + padding: 3px; +} + +.container .product .shopIn button{ + border-radius: 30px; + border-color: #006a4e; + background-color: #2e856e; + width: 40px; + height: 40px; + text-align: center; + padding: 0px 10px; + color: #b8d5cd; + font-size: 30px; +} + +.container .product .size { + font-size: 20px; +} + +.container .product .description{ + display: flex; + flex-direction: column; + justify-content: center; + text-align: justify; + height: 100px; +} + +#bunt,#grün,#special { + text-align: center; + font-size: 30px; + color: #006a4e; } \ No newline at end of file diff --git a/Aufgaben/Aufgabe_07_2020-06-10/product.css b/Aufgaben/Aufgabe_07_2020-06-10/product.css index e84906b..498acee 100644 --- a/Aufgaben/Aufgabe_07_2020-06-10/product.css +++ b/Aufgaben/Aufgabe_07_2020-06-10/product.css @@ -1,76 +1,76 @@ -.container { - display: flex; - flex-direction: column; - justify-content: center; - margin: 10px 0px; - padding: 0px 10px; -} - -.container .product { - display: flex; - flex-direction: column; - justify-content: center; - padding: 10px; - align-items: center; - border: solid #006a4e; - background-color: #b8d5cd; - border-radius: 40px; -} - -.container .product img { - width: 90%; - height: auto; - max-height: 300px; - border: solid #006a4e; - border-radius: 40px; - overflow: hidden; - object-fit: none; -} - -.container .product p, h3 { - margin: 5px 0px; -} - -.container .product .title { - font-size: 20px; -} - -.container .product .shopIn { - display: flex; - flex-direction: row; - justify-content: start; - vertical-align: middle; -} - -.container .product .shopIn span,button{ - display: flex; - vertical-align: middle; - margin: 10px 10px; - font-size: 30px; -} - -.container .product .shopIn button>span.buttonModifier { - text-align: center; - margin: 0px; - padding: 3px; -} - -.container .product .shopIn button{ -border-radius: 30px; -border-color: #006a4e; -background-color: #2e856e; -width: 40px; -height: 40px; -text-align: center; -padding: 0px 10px; -color: #b8d5cd; -font-size: 30px; -} - -.container .product .size { - font-size: 20px; -} - -.container .product .description{ - text-align: justify; +.container { + display: flex; + flex-direction: column; + justify-content: center; + margin: 10px 0px; + padding: 0px 10px; +} + +.container .product { + display: flex; + flex-direction: column; + justify-content: center; + padding: 10px; + align-items: center; + border: solid #006a4e; + background-color: #b8d5cd; + border-radius: 40px; +} + +.container .product img { + width: 90%; + height: auto; + max-height: 300px; + border: solid #006a4e; + border-radius: 40px; + overflow: hidden; + object-fit: none; +} + +.container .product p, h3 { + margin: 5px 0px; +} + +.container .product .title { + font-size: 20px; +} + +.container .product .shopIn { + display: flex; + flex-direction: row; + justify-content: start; + vertical-align: middle; +} + +.container .product .shopIn span,button{ + display: flex; + vertical-align: middle; + margin: 10px 10px; + font-size: 30px; +} + +.container .product .shopIn button>span.buttonModifier { + text-align: center; + margin: 0px; + padding: 3px; +} + +.container .product .shopIn button{ +border-radius: 30px; +border-color: #006a4e; +background-color: #2e856e; +width: 40px; +height: 40px; +text-align: center; +padding: 0px 10px; +color: #b8d5cd; +font-size: 30px; +} + +.container .product .size { + font-size: 20px; +} + +.container .product .description{ + text-align: justify; } \ No newline at end of file diff --git a/Aufgaben/Aufgabe_07_2020-06-10/shop.css b/Aufgaben/Aufgabe_07_2020-06-10/shop.css index e54fc54..54adb58 100644 --- a/Aufgaben/Aufgabe_07_2020-06-10/shop.css +++ b/Aufgaben/Aufgabe_07_2020-06-10/shop.css @@ -1,124 +1,124 @@ -body { - margin: 0; - font-family: Chelsea Market; -} - -header { - padding: 10px 0px; - position: relative; - top: 0; - width: 100%; - background-color: #006a4e; - color: #b8d5cd; -} - -header ul { - list-style: none; - padding: 0px; -} - -header li { - display: block; - margin: 10px auto 0px; -} - -header li a { - text-decoration: none; - color: #b8d5cd; -} - -header .dropdown { - text-align: center; - font-size: 20px; - position: relative; - display: block; - background-color: #2e856e; - border-radius: 40px; - margin: 10px 5px 0px 5px; - padding: 10px 0px; - width: 80%; -} - -header .dropdown-content { - display: none; -} - -header .dropdown:hover .dropdown-content { - display: block; - margin-bottom: 0px; -} - -header #shopping_cart { - text-align: center; - position: relative; - display: block; - background-color: #2e856e; - border-radius: 40px; - margin: 10px 5px 0px 5px; - padding: 10px 0px; - width: 100px; - height: 30px; -} - -header #shopping_cart a { - text-decoration: none; - color: #b8d5cd; - font-size:24px -} - -header #shopping_cart a:hover { - color: white; -} - -header .title_bar img { - width: 40px; - height: 40px; - margin: 5px 15px; -} - -header .title_bar span { - font-size: 27px; - line-height: 50px; - margin: auto 0px; -} - -header .title_bar { - display: flex; - flex-direction: row; - justify-content: center; - background-color: #2e856e; - border-radius: 40px; - padding: 5px; - margin: 5px -} - -header #bottom { - display: flex; - flex-direction: row; - justify-content: center; -} - -header #shopping_cart { - margin: 10px auto; - text-align: center; - color: #b8d5cd; - display: block; - background-color: #2e856e; - border-radius: 40px; - margin: 10px 5px 0px 5px; - padding: 10px 0px; -} - -footer { - text-align: center; - padding: 10px 5px; - position: relative; - bottom: 0; - width: calc(100%-10px); - background-color: #272727; - color: white; -} - -footer p { - margin: 0px 0px 10px; +body { + margin: 0; + font-family: Chelsea Market; +} + +header { + padding: 10px 0px; + position: relative; + top: 0; + width: 100%; + background-color: #006a4e; + color: #b8d5cd; +} + +header ul { + list-style: none; + padding: 0px; +} + +header li { + display: block; + margin: 10px auto 0px; +} + +header li a { + text-decoration: none; + color: #b8d5cd; +} + +header .dropdown { + text-align: center; + font-size: 20px; + position: relative; + display: block; + background-color: #2e856e; + border-radius: 40px; + margin: 10px 5px 0px 5px; + padding: 10px 0px; + width: 80%; +} + +header .dropdown-content { + display: none; +} + +header .dropdown:hover .dropdown-content { + display: block; + margin-bottom: 0px; +} + +header #shopping_cart { + text-align: center; + position: relative; + display: block; + background-color: #2e856e; + border-radius: 40px; + margin: 10px 5px 0px 5px; + padding: 10px 0px; + width: 100px; + height: 30px; +} + +header #shopping_cart a { + text-decoration: none; + color: #b8d5cd; + font-size:24px +} + +header #shopping_cart a:hover { + color: white; +} + +header .title_bar img { + width: 40px; + height: 40px; + margin: 5px 15px; +} + +header .title_bar span { + font-size: 27px; + line-height: 50px; + margin: auto 0px; +} + +header .title_bar { + display: flex; + flex-direction: row; + justify-content: center; + background-color: #2e856e; + border-radius: 40px; + padding: 5px; + margin: 5px +} + +header #bottom { + display: flex; + flex-direction: row; + justify-content: center; +} + +header #shopping_cart { + margin: 10px auto; + text-align: center; + color: #b8d5cd; + display: block; + background-color: #2e856e; + border-radius: 40px; + margin: 10px 5px 0px 5px; + padding: 10px 0px; +} + +footer { + text-align: center; + padding: 10px 5px; + position: relative; + bottom: 0; + width: calc(100%-10px); + background-color: #272727; + color: white; +} + +footer p { + margin: 0px 0px 10px; } \ No newline at end of file diff --git a/Aufgaben/Aufgabe_07_2020-06-10/shop.html b/Aufgaben/Aufgabe_07_2020-06-10/shop.html index 2ac4823..9b78688 100644 --- a/Aufgaben/Aufgabe_07_2020-06-10/shop.html +++ b/Aufgaben/Aufgabe_07_2020-06-10/shop.html @@ -1,51 +1,51 @@ - - - - - - - - - - - - - - green grass - - - -
-
- grass - GREEEN GRASS - grass -
- -
- -
- -
- -
-

Disclaimer

-

This website is not used monetarily

-

Not even if things seem to be sold here!

-
- - + + + + + + + + + + + + + + green grass + + + +
+
+ grass + GREEEN GRASS + grass +
+ +
+ +
+ +
+ +
+

Disclaimer

+

This website is not used monetarily

+

Not even if things seem to be sold here!

+
+ + \ No newline at end of file diff --git a/Aufgaben/Aufgabe_07_2020-06-10/shop.js b/Aufgaben/Aufgabe_07_2020-06-10/shop.js index 915b07b..b773bbf 100644 --- a/Aufgaben/Aufgabe_07_2020-06-10/shop.js +++ b/Aufgaben/Aufgabe_07_2020-06-10/shop.js @@ -60,18 +60,18 @@ var Aufgabe07; for (let index = 0; index < jsonObj[nummer].products.length; index++) { let product = document.createElement("div"); product.classList.add("product"); - product.innerHTML = ` -

${jsonObj[nummer].products[index].title}

-
- ${jsonObj[nummer].products[index].price.toFixed(2).toLocaleString()} ¥ - - -
- Product -

Size: ${jsonObj[nummer].products[index].size}

-
-

${jsonObj[nummer].products[index].description}

-
+ product.innerHTML = ` +

${jsonObj[nummer].products[index].title}

+
+ ${jsonObj[nummer].products[index].price.toFixed(2).toLocaleString()} ¥ + + +
+ Product +

Size: ${jsonObj[nummer].products[index].size}

+
+

${jsonObj[nummer].products[index].description}

+
`; container.appendChild(product); } diff --git a/Aufgaben/Aufgabe_07_2020-06-10/shop.ts b/Aufgaben/Aufgabe_07_2020-06-10/shop.ts index b80a7c8..04aa6cc 100644 --- a/Aufgaben/Aufgabe_07_2020-06-10/shop.ts +++ b/Aufgaben/Aufgabe_07_2020-06-10/shop.ts @@ -1,197 +1,197 @@ -// Datensammlung für Produkte - -namespace Aufgabe07 { - - let shoppingPrice: number = 0; - let shoppingCount: number = localStorage.length; - if ( localStorage.length > 1) - shoppingCount --; - - (document.querySelector("#shoppingCartNumber")).innerHTML = shoppingCount.toLocaleString(); - - let jsonObj: Category[]; - - export interface Product { - title: string; - price: number; - size: string; - imgName: string; - description: string; - } - - export interface Category { - title: string; - id: string; - products: Product[]; - } - - communicate("https://yamidesu.github.io/GIS-SoSe-2020/Aufgaben/Aufgabe_07_2020-06-10/myJSON.json"); - - export async function communicate(_url: RequestInfo): Promise { - let response: Response = await fetch(_url); - jsonObj = await response.json(); - console.log("Response", response); - printProducts(100); - - /*console.log(jsonObj); - console.log(jsonObj[0].products[2].price); - console.log(jsonObj[1].products[3].title);*/ - - (document.querySelector("#special_a")).addEventListener("click", drawSpecial); - function drawSpecial(): void { - printProducts(0); - } - (document.querySelector("#bunt_a")).addEventListener("click", drawBunt); - function drawBunt(): void { - printProducts(1); - } - (document.querySelector("#grün_a")).addEventListener("click", drawGrün); - function drawGrün(): void { - printProducts(2); - } - (document.querySelector("#all_a")).addEventListener("click", drawAll); - function drawAll(): void { - printProducts(100); - } - } - - updateShoppingCount(); - - function updateShoppingCount(): void { - shoppingCount = localStorage.length - 1; - } - - //printProducts(100); - //console.log(jsonObj[1].products[3].title); - - //create Structure; - - function printProducts(_catNumber: number): void { - - clearProducts(); - - let catCheck: boolean = false; - if (_catNumber != 100) - catCheck = true; - else - _catNumber = 0; - - for (let nummer: number = _catNumber; nummer < jsonObj.length; nummer++) { - - let heading: HTMLHeadingElement = document.createElement("h1"); - heading.setAttribute("id", jsonObj[nummer].id); - heading.innerHTML = `${jsonObj[nummer].title}`; - (document.querySelector("#übersicht")).appendChild(heading); - - let container: HTMLDivElement = document.createElement("div"); - container.classList.add("container"); - (document.querySelector("#übersicht")).appendChild(container); - - for (let index: number = 0; index < jsonObj[nummer].products.length; index++) { - let product: HTMLDivElement = document.createElement("div"); - product.classList.add("product"); - product.innerHTML = ` -

${jsonObj[nummer].products[index].title}

-
- ${jsonObj[nummer].products[index].price.toFixed(2).toLocaleString()} ¥ - - -
- Product -

Size: ${jsonObj[nummer].products[index].size}

-
-

${jsonObj[nummer].products[index].description}

-
- `; - container.appendChild(product); - } - if (catCheck) - break; - } - addShoppingFunction(); - } - - function clearProducts(): void { - for (let nummer: number = 0; nummer < jsonObj.length; nummer++) { - let alles: HTMLDivElement = (document.querySelector("#übersicht")); - alles.innerHTML = ""; - } - } - - function money(_event: Event): void { - let target: HTMLElement = (_event.target); - //let price: number = parseFloat(target.getAttribute("productPrice")!); - let price: number = jsonObj[parseInt(target.getAttribute("categoryNumber")!)].products[parseInt(target.getAttribute("productIndex")!)].price; - console.log("Artikel-Preis: " + price + " ¥"); - shoppingPrice += price; - console.log("Shopping-Cart-Preis: " + shoppingPrice + " ¥"); - shoppingCount++; - (document.querySelector("#shoppingCartNumber")).innerHTML = shoppingCount.toLocaleString(); - } - - function addLocal(_event: Event): void { - if (localStorage.shoppingCount) { - localStorage.shoppingCount = Number(localStorage.shoppingCount) + 1; - } else { - localStorage.shoppingCount = 1; - } - let target: HTMLElement = (_event.target); - let shoppingProduct: Product = jsonObj[parseInt(target.getAttribute("categoryNumber")!)].products[parseInt(target.getAttribute("productIndex")!)]; - localStorage.setItem(`${shoppingProduct.title}`, JSON.stringify(shoppingProduct) ); - } - - function addShoppingFunction(): void { - const buttons: HTMLCollectionOf = document.getElementsByClassName("addProduct"); - for (const button of buttons) { - button.addEventListener("click", money); - button.addEventListener("click", addLocal); - } - } -} - -// Folgender auskommentierter Code dient mir als Archiv für Gedankenansätze oder Verläufe. -// Wenn dies nicht gerne gesehen ist, gebt mir kurz Bescheid und ich werde es entfernen - -/* -function zeichnen(tagArray: Tag[]): void { - for (let i: number = 0; i < tagArray.length ; i++){ - let title: HTMLElement = document.createElement(tagArray[i].tag); - title.innerHTML = "I bims title"; - title.classList.add("title"); - if (tagArray[i].image) { - title.setAttribute("src", "value"); - title.setAttribute("alt", "value"); - } - document.body.appendChild(title); - } -} -*/ - -/* -console.log("Hello Console"); -let theName: String = "Justin" + "Dretvic" + 20; -console.log(theName); -*/ - -/* -# Template für ein Produkt in HTML -
tag class -

Color: Rainbow

tag class content -
tag class - 3279,99 ¥ tag class content - tag content - tag content -
- Product tag attribute1 attribute2 -

Size: 4m²

tag class content -
tag class -

If you can't choose one color, go and catch them all!

tag content -
-
-*/ - -/* -let myJSON: string = JSON.stringify(categories); -JSON.stringify(categories); -console.log(myJSON); +// Datensammlung für Produkte + +namespace Aufgabe07 { + + let shoppingPrice: number = 0; + let shoppingCount: number = localStorage.length; + if ( localStorage.length > 1) + shoppingCount --; + + (document.querySelector("#shoppingCartNumber")).innerHTML = shoppingCount.toLocaleString(); + + let jsonObj: Category[]; + + export interface Product { + title: string; + price: number; + size: string; + imgName: string; + description: string; + } + + export interface Category { + title: string; + id: string; + products: Product[]; + } + + communicate("https://yamidesu.github.io/GIS-SoSe-2020/Aufgaben/Aufgabe_07_2020-06-10/myJSON.json"); + + export async function communicate(_url: RequestInfo): Promise { + let response: Response = await fetch(_url); + jsonObj = await response.json(); + console.log("Response", response); + printProducts(100); + + /*console.log(jsonObj); + console.log(jsonObj[0].products[2].price); + console.log(jsonObj[1].products[3].title);*/ + + (document.querySelector("#special_a")).addEventListener("click", drawSpecial); + function drawSpecial(): void { + printProducts(0); + } + (document.querySelector("#bunt_a")).addEventListener("click", drawBunt); + function drawBunt(): void { + printProducts(1); + } + (document.querySelector("#grün_a")).addEventListener("click", drawGrün); + function drawGrün(): void { + printProducts(2); + } + (document.querySelector("#all_a")).addEventListener("click", drawAll); + function drawAll(): void { + printProducts(100); + } + } + + updateShoppingCount(); + + function updateShoppingCount(): void { + shoppingCount = localStorage.length - 1; + } + + //printProducts(100); + //console.log(jsonObj[1].products[3].title); + + //create Structure; + + function printProducts(_catNumber: number): void { + + clearProducts(); + + let catCheck: boolean = false; + if (_catNumber != 100) + catCheck = true; + else + _catNumber = 0; + + for (let nummer: number = _catNumber; nummer < jsonObj.length; nummer++) { + + let heading: HTMLHeadingElement = document.createElement("h1"); + heading.setAttribute("id", jsonObj[nummer].id); + heading.innerHTML = `${jsonObj[nummer].title}`; + (document.querySelector("#übersicht")).appendChild(heading); + + let container: HTMLDivElement = document.createElement("div"); + container.classList.add("container"); + (document.querySelector("#übersicht")).appendChild(container); + + for (let index: number = 0; index < jsonObj[nummer].products.length; index++) { + let product: HTMLDivElement = document.createElement("div"); + product.classList.add("product"); + product.innerHTML = ` +

${jsonObj[nummer].products[index].title}

+
+ ${jsonObj[nummer].products[index].price.toFixed(2).toLocaleString()} ¥ + + +
+ Product +

Size: ${jsonObj[nummer].products[index].size}

+
+

${jsonObj[nummer].products[index].description}

+
+ `; + container.appendChild(product); + } + if (catCheck) + break; + } + addShoppingFunction(); + } + + function clearProducts(): void { + for (let nummer: number = 0; nummer < jsonObj.length; nummer++) { + let alles: HTMLDivElement = (document.querySelector("#übersicht")); + alles.innerHTML = ""; + } + } + + function money(_event: Event): void { + let target: HTMLElement = (_event.target); + //let price: number = parseFloat(target.getAttribute("productPrice")!); + let price: number = jsonObj[parseInt(target.getAttribute("categoryNumber")!)].products[parseInt(target.getAttribute("productIndex")!)].price; + console.log("Artikel-Preis: " + price + " ¥"); + shoppingPrice += price; + console.log("Shopping-Cart-Preis: " + shoppingPrice + " ¥"); + shoppingCount++; + (document.querySelector("#shoppingCartNumber")).innerHTML = shoppingCount.toLocaleString(); + } + + function addLocal(_event: Event): void { + if (localStorage.shoppingCount) { + localStorage.shoppingCount = Number(localStorage.shoppingCount) + 1; + } else { + localStorage.shoppingCount = 1; + } + let target: HTMLElement = (_event.target); + let shoppingProduct: Product = jsonObj[parseInt(target.getAttribute("categoryNumber")!)].products[parseInt(target.getAttribute("productIndex")!)]; + localStorage.setItem(`${shoppingProduct.title}`, JSON.stringify(shoppingProduct) ); + } + + function addShoppingFunction(): void { + const buttons: HTMLCollectionOf = document.getElementsByClassName("addProduct"); + for (const button of buttons) { + button.addEventListener("click", money); + button.addEventListener("click", addLocal); + } + } +} + +// Folgender auskommentierter Code dient mir als Archiv für Gedankenansätze oder Verläufe. +// Wenn dies nicht gerne gesehen ist, gebt mir kurz Bescheid und ich werde es entfernen + +/* +function zeichnen(tagArray: Tag[]): void { + for (let i: number = 0; i < tagArray.length ; i++){ + let title: HTMLElement = document.createElement(tagArray[i].tag); + title.innerHTML = "I bims title"; + title.classList.add("title"); + if (tagArray[i].image) { + title.setAttribute("src", "value"); + title.setAttribute("alt", "value"); + } + document.body.appendChild(title); + } +} +*/ + +/* +console.log("Hello Console"); +let theName: String = "Justin" + "Dretvic" + 20; +console.log(theName); +*/ + +/* +# Template für ein Produkt in HTML +
tag class +

Color: Rainbow

tag class content +
tag class + 3279,99 ¥ tag class content + tag content + tag content +
+ Product tag attribute1 attribute2 +

Size: 4m²

tag class content +
tag class +

If you can't choose one color, go and catch them all!

tag content +
+
+*/ + +/* +let myJSON: string = JSON.stringify(categories); +JSON.stringify(categories); +console.log(myJSON); */ \ No newline at end of file diff --git a/Aufgaben/Aufgabe_07_2020-06-10/shoppingCart.html b/Aufgaben/Aufgabe_07_2020-06-10/shoppingCart.html index 3c8c2e8..5871a98 100644 --- a/Aufgaben/Aufgabe_07_2020-06-10/shoppingCart.html +++ b/Aufgaben/Aufgabe_07_2020-06-10/shoppingCart.html @@ -1,44 +1,44 @@ - - - - - - - - - - - - - - green grass - - - -
-
- grass - GREEN GRASS - grass -
- -
- -
- -
- -
- Current Price: - Hello -
- - -
-

Disclaimer

-

This website is not used monetarily

-

Not even if things seem to be sold here!

-
- - + + + + + + + + + + + + + + green grass + + + +
+
+ grass + GREEN GRASS + grass +
+ +
+ +
+ +
+ +
+ Current Price: + Hello +
+ + +
+

Disclaimer

+

This website is not used monetarily

+

Not even if things seem to be sold here!

+
+ + \ No newline at end of file diff --git a/Aufgaben/Aufgabe_07_2020-06-10/shoppingCart.js b/Aufgaben/Aufgabe_07_2020-06-10/shoppingCart.js index 4486e3c..8123970 100644 --- a/Aufgaben/Aufgabe_07_2020-06-10/shoppingCart.js +++ b/Aufgaben/Aufgabe_07_2020-06-10/shoppingCart.js @@ -20,17 +20,17 @@ var Aufgabe07; let zeug = JSON.parse(localStorage.getItem(localStorage.key(iterator))); let product = document.createElement("div"); product.classList.add("product"); - product.innerHTML = ` -

${zeug.title}

-
- ${zeug.price} ¥ - -
- Product -

Size: ${zeug.size}

-
-

${zeug.description}

-
+ product.innerHTML = ` +

${zeug.title}

+
+ ${zeug.price} ¥ + +
+ Product +

Size: ${zeug.size}

+
+

${zeug.description}

+
`; container.appendChild(product); /*let shoppingPrice: HTMLSpanElement = (document.querySelector("#showPrice")); diff --git a/Aufgaben/Aufgabe_07_2020-06-10/shoppingCart.ts b/Aufgaben/Aufgabe_07_2020-06-10/shoppingCart.ts index d5b6ce9..d28ffc2 100644 --- a/Aufgaben/Aufgabe_07_2020-06-10/shoppingCart.ts +++ b/Aufgaben/Aufgabe_07_2020-06-10/shoppingCart.ts @@ -1,130 +1,130 @@ - -namespace Aufgabe07 { - - let shoppingPrice: number = 0; - //let shoppingCount: number = 0; - - export interface Product { - title: string; - price: number; - size: string; - imgName: string; - description: string; - } - - export interface Category { - title: string; - id: string; - products: Product[]; - } - - if (localStorage.length > 0) - printProducts(); - //showPrice(); - - //printProducts(100); - //console.log(jsonObj[1].products[3].title); - - //create Structure; - - function printProducts(): void { - - //clearProducts(); - shoppingPrice = 0; - - let container: HTMLDivElement = document.createElement("div"); - container.classList.add("container"); - (document.querySelector("#übersicht")).appendChild(container); - - for (let iterator: number = 0; iterator < localStorage.length; iterator++) { - if (localStorage.key(iterator)! == "shoppingCount") - continue; - let zeug: Product = JSON.parse(localStorage.getItem(localStorage.key(iterator)!)!); - let product: HTMLDivElement = document.createElement("div"); - product.classList.add("product"); - product.innerHTML = ` -

${zeug.title}

-
- ${zeug.price} ¥ - -
- Product -

Size: ${zeug.size}

-
-

${zeug.description}

-
- `; - container.appendChild(product); - - /*let shoppingPrice: HTMLSpanElement = (document.querySelector("#showPrice")); - myPrice += zeug.price; - shoppingPrice.innerHTML = myPrice.toLocaleString() + " ¥"; - //alles.innerHTML = "";*/ - fixPrice(zeug.price); - } - (document.querySelector("#removeAllItems")).addEventListener("click", clearLocalStorage); - addRemoveFunction(); - } // zeug.price.toFixed(2).toLocaleString() - //addShoppingFunction(); - - function clearLocalStorage(): void { - localStorage.clear(); - (document.querySelector("#übersicht")).innerHTML = ""; - } - - function removeItem(_event: Event): void { - let target: HTMLElement = (_event.target); - //let price: number = parseFloat(target.getAttribute("productPrice")!); - //let price: number = jsonObj[parseInt(target.getAttribute("categoryNumber")!)].products[parseInt(target.getAttribute("productIndex")!)].price; - localStorage.removeItem(`${localStorage.key(parseInt(target.getAttribute("itemIndex")!)!)}`); - (document.querySelector("#übersicht")).innerHTML = ""; - printProducts(); - } - - function addRemoveFunction(): void { - const buttons: HTMLCollectionOf = document.getElementsByClassName("removeProduct"); - for (const button of buttons) { - button.addEventListener("click", removeItem); - } - } - - function fixPrice(_price: number): void { - shoppingPrice += _price; - let shoppingPriceEle: HTMLSpanElement = (document.querySelector("#showPrice")); - shoppingPriceEle.innerHTML = shoppingPrice.toLocaleString() + " ¥"; - } - - - - - - /*function money(_event: Event): void { - let target: HTMLElement = (_event.target); - //let price: number = parseFloat(target.getAttribute("productPrice")!); - let price: number = jsonObj[parseInt(target.getAttribute("categoryNumber")!)].products[parseInt(target.getAttribute("productIndex")!)].price; - console.log("Artikel-Preis: " + price + " ¥"); - shoppingPrice += price; - console.log("Shopping-Cart-Preis: " + shoppingPrice + " ¥"); - shoppingCount++; - (document.querySelector("#shoppingCartNumber")).innerHTML = shoppingCount.toLocaleString(); - } - - function removeLocal(_event: Event): void { - if (localStorage.shoppingCount) { - localStorage.shoppingCount = Number(localStorage.shoppingCount) + 1; - } else { - localStorage.shoppingCount = 1; - } - let target: HTMLElement = (_event.target); - let shoppingProduct: Product = jsonObj[parseInt(target.getAttribute("categoryNumber")!)].products[parseInt(target.getAttribute("productIndex")!)]; - localStorage.setItem(`${shoppingProduct.title}`, JSON.stringify(shoppingProduct)); - } - - function addShoppingFunction(): void { - const buttons: HTMLCollectionOf = document.getElementsByClassName("addProduct"); - for (const button of buttons) { - button.addEventListener("click", money); - button.addEventListener("click", removeLocal); - } - }*/ + +namespace Aufgabe07 { + + let shoppingPrice: number = 0; + //let shoppingCount: number = 0; + + export interface Product { + title: string; + price: number; + size: string; + imgName: string; + description: string; + } + + export interface Category { + title: string; + id: string; + products: Product[]; + } + + if (localStorage.length > 0) + printProducts(); + //showPrice(); + + //printProducts(100); + //console.log(jsonObj[1].products[3].title); + + //create Structure; + + function printProducts(): void { + + //clearProducts(); + shoppingPrice = 0; + + let container: HTMLDivElement = document.createElement("div"); + container.classList.add("container"); + (document.querySelector("#übersicht")).appendChild(container); + + for (let iterator: number = 0; iterator < localStorage.length; iterator++) { + if (localStorage.key(iterator)! == "shoppingCount") + continue; + let zeug: Product = JSON.parse(localStorage.getItem(localStorage.key(iterator)!)!); + let product: HTMLDivElement = document.createElement("div"); + product.classList.add("product"); + product.innerHTML = ` +

${zeug.title}

+
+ ${zeug.price} ¥ + +
+ Product +

Size: ${zeug.size}

+
+

${zeug.description}

+
+ `; + container.appendChild(product); + + /*let shoppingPrice: HTMLSpanElement = (document.querySelector("#showPrice")); + myPrice += zeug.price; + shoppingPrice.innerHTML = myPrice.toLocaleString() + " ¥"; + //alles.innerHTML = "";*/ + fixPrice(zeug.price); + } + (document.querySelector("#removeAllItems")).addEventListener("click", clearLocalStorage); + addRemoveFunction(); + } // zeug.price.toFixed(2).toLocaleString() + //addShoppingFunction(); + + function clearLocalStorage(): void { + localStorage.clear(); + (document.querySelector("#übersicht")).innerHTML = ""; + } + + function removeItem(_event: Event): void { + let target: HTMLElement = (_event.target); + //let price: number = parseFloat(target.getAttribute("productPrice")!); + //let price: number = jsonObj[parseInt(target.getAttribute("categoryNumber")!)].products[parseInt(target.getAttribute("productIndex")!)].price; + localStorage.removeItem(`${localStorage.key(parseInt(target.getAttribute("itemIndex")!)!)}`); + (document.querySelector("#übersicht")).innerHTML = ""; + printProducts(); + } + + function addRemoveFunction(): void { + const buttons: HTMLCollectionOf = document.getElementsByClassName("removeProduct"); + for (const button of buttons) { + button.addEventListener("click", removeItem); + } + } + + function fixPrice(_price: number): void { + shoppingPrice += _price; + let shoppingPriceEle: HTMLSpanElement = (document.querySelector("#showPrice")); + shoppingPriceEle.innerHTML = shoppingPrice.toLocaleString() + " ¥"; + } + + + + + + /*function money(_event: Event): void { + let target: HTMLElement = (_event.target); + //let price: number = parseFloat(target.getAttribute("productPrice")!); + let price: number = jsonObj[parseInt(target.getAttribute("categoryNumber")!)].products[parseInt(target.getAttribute("productIndex")!)].price; + console.log("Artikel-Preis: " + price + " ¥"); + shoppingPrice += price; + console.log("Shopping-Cart-Preis: " + shoppingPrice + " ¥"); + shoppingCount++; + (document.querySelector("#shoppingCartNumber")).innerHTML = shoppingCount.toLocaleString(); + } + + function removeLocal(_event: Event): void { + if (localStorage.shoppingCount) { + localStorage.shoppingCount = Number(localStorage.shoppingCount) + 1; + } else { + localStorage.shoppingCount = 1; + } + let target: HTMLElement = (_event.target); + let shoppingProduct: Product = jsonObj[parseInt(target.getAttribute("categoryNumber")!)].products[parseInt(target.getAttribute("productIndex")!)]; + localStorage.setItem(`${shoppingProduct.title}`, JSON.stringify(shoppingProduct)); + } + + function addShoppingFunction(): void { + const buttons: HTMLCollectionOf = document.getElementsByClassName("addProduct"); + for (const button of buttons) { + button.addEventListener("click", money); + button.addEventListener("click", removeLocal); + } + }*/ } \ No newline at end of file diff --git a/Aufgaben/Aufgabe_08_2020-06-17/server.ts b/Aufgaben/Aufgabe_08_2020-06-17/server.ts index af1ad2c..e98f4f6 100644 --- a/Aufgaben/Aufgabe_08_2020-06-17/server.ts +++ b/Aufgaben/Aufgabe_08_2020-06-17/server.ts @@ -1,31 +1,31 @@ -import * as Http from "http"; - -export namespace A008Server { - console.log("Starting server"); // Ausgabe in der Server-Console - let port: number = Number(process.env.PORT); // Deklaration der number "port" mit einem Port aus der Umgebungsvariable, - // der als numerisches Objekt abgespeichert werden soll - if (!port) // "Wenn kein Port vergeben wurde... - port = 8100; // ...verwende den Port 8100" - - let server: Http.Server = Http.createServer(); // Der Server wird aufgesetzt - server.addListener("request", handleRequest); // Listener für wenn Serveranfragen reinkommen - server.addListener("listening", handleListen); // Listener für wenn der Server startet - server.listen(port); // Achtet auf Anfragen, die durch den Port durchkommen - - function handleListen(): void { // wird ausgeführt, wenn der Server gestartet wird und eine Abfrage erwartet - console.log("Listening"); // Ausgabe in der Server-Console - } - - function handleRequest(_request: Http.IncomingMessage, _response: Http.ServerResponse): void { // wird ausgeführt, wenn eine Serveranfrage eintrifft - console.log("https://theoneandgis.herokuapp.com" + `${_request.url}`); // Ausgabe in der Server-Console - // console.log("-------------"); - // console.log("I hear voices!"); - - _response.setHeader("content-type", "text/html; charset=utf-8"); // Der Datentyp der Antwort wird festgelegt - _response.setHeader("Access-Control-Allow-Origin", "*"); // erlaubt beliebigen Anfragen aus dem Netz, die Antwort zu lesen - - _response.write(_request.url); // Die Antwort wird mit einem string (in diesem Fall die URL) beschrieben - - _response.end(); // deaktiviert den Server bis zur nächsten Anfrage - } +import * as Http from "http"; + +export namespace A008Server { + console.log("Starting server"); // Ausgabe in der Server-Console + let port: number = Number(process.env.PORT); // Deklaration der number "port" mit einem Port aus der Umgebungsvariable, + // der als numerisches Objekt abgespeichert werden soll + if (!port) // "Wenn kein Port vergeben wurde... + port = 8100; // ...verwende den Port 8100" + + let server: Http.Server = Http.createServer(); // Der Server wird aufgesetzt + server.addListener("request", handleRequest); // Listener für wenn Serveranfragen reinkommen + server.addListener("listening", handleListen); // Listener für wenn der Server startet + server.listen(port); // Achtet auf Anfragen, die durch den Port durchkommen + + function handleListen(): void { // wird ausgeführt, wenn der Server gestartet wird und eine Abfrage erwartet + console.log("Listening"); // Ausgabe in der Server-Console + } + + function handleRequest(_request: Http.IncomingMessage, _response: Http.ServerResponse): void { // wird ausgeführt, wenn eine Serveranfrage eintrifft + console.log("https://theoneandgis.herokuapp.com" + `${_request.url}`); // Ausgabe in der Server-Console + // console.log("-------------"); + // console.log("I hear voices!"); + + _response.setHeader("content-type", "text/html; charset=utf-8"); // Der Datentyp der Antwort wird festgelegt + _response.setHeader("Access-Control-Allow-Origin", "*"); // erlaubt beliebigen Anfragen aus dem Netz, die Antwort zu lesen + + _response.write(_request.url); // Die Antwort wird mit einem string (in diesem Fall die URL) beschrieben + + _response.end(); // deaktiviert den Server bis zur nächsten Anfrage + } } \ No newline at end of file diff --git a/Aufgaben/Aufgabe_08_2020-06-17/test.ts b/Aufgaben/Aufgabe_08_2020-06-17/test.ts index 1db5310..24efc77 100644 --- a/Aufgaben/Aufgabe_08_2020-06-17/test.ts +++ b/Aufgaben/Aufgabe_08_2020-06-17/test.ts @@ -1,28 +1,28 @@ -import * as Http from "http"; - -export namespace A08Server { - console.log("Starting server"); - let port: number = Number(process.env.PORT); - if (!port) - port = 8100; - - let server: Http.Server = Http.createServer(); - server.addListener("request", handleRequest); - server.addListener("listening", handleListen); - server.listen(port); - - function handleListen(): void { - console.log("Listening"); - } - - function handleRequest(_request: Http.IncomingMessage, _response: Http.ServerResponse): void { - console.log("I hear voices!"); - - _response.setHeader("content-type", "text/html; charset=utf-8"); - _response.setHeader("Access-Control-Allow-Origin", "*"); - - _response.write(_request.url); - - _response.end(); - } +import * as Http from "http"; + +export namespace A08Server { + console.log("Starting server"); + let port: number = Number(process.env.PORT); + if (!port) + port = 8100; + + let server: Http.Server = Http.createServer(); + server.addListener("request", handleRequest); + server.addListener("listening", handleListen); + server.listen(port); + + function handleListen(): void { + console.log("Listening"); + } + + function handleRequest(_request: Http.IncomingMessage, _response: Http.ServerResponse): void { + console.log("I hear voices!"); + + _response.setHeader("content-type", "text/html; charset=utf-8"); + _response.setHeader("Access-Control-Allow-Origin", "*"); + + _response.write(_request.url); + + _response.end(); + } } \ No newline at end of file diff --git a/Aufgaben/Aufgabe_08_2020-06-17/tutorial.html b/Aufgaben/Aufgabe_08_2020-06-17/tutorial.html index 81b64f7..f96d6b4 100644 --- a/Aufgaben/Aufgabe_08_2020-06-17/tutorial.html +++ b/Aufgaben/Aufgabe_08_2020-06-17/tutorial.html @@ -1,49 +1,49 @@ - - - - - - - Tutorial Kapitel 08 - - - -
-
-
-
-
- - - -
- -
- - - - - - - - \ No newline at end of file diff --git a/Aufgaben/Aufgabe_08_2020-06-17/tutorial.ts b/Aufgaben/Aufgabe_08_2020-06-17/tutorial.ts index e2e21e4..aea248c 100644 --- a/Aufgaben/Aufgabe_08_2020-06-17/tutorial.ts +++ b/Aufgaben/Aufgabe_08_2020-06-17/tutorial.ts @@ -1,41 +1,41 @@ - -namespace tutorial08 { - - /*console.log(formData.get("vorname")); - - for (let entry of formData) { - console.log(entry); - console.log("name: " + entry[0]); - console.log("value: " + entry[1]); - }*/ - - // Trennlinie - - (document.querySelector("#theButton")).addEventListener("click", communicate); - - //communicate("https://theoneandgis.herokuapp.com/"); - - async function communicate(): Promise { - - // let response: Response = await fetch(_url); - // let jsonObj = await response.json(); - - let formData: FormData = new FormData(document.forms[0]); - let url: string = "https://theoneandgis.herokuapp.com/"; - let query: URLSearchParams = new URLSearchParams(formData); - - url += "?" + query.toString(); - - let response: Response = await fetch(url); - let theAnswer: string = await response.url; - - - // await fetch(url); - console.log(theAnswer); - } - - console.log("hello"); - - - -} + +namespace tutorial08 { + + /*console.log(formData.get("vorname")); + + for (let entry of formData) { + console.log(entry); + console.log("name: " + entry[0]); + console.log("value: " + entry[1]); + }*/ + + // Trennlinie + + (document.querySelector("#theButton")).addEventListener("click", communicate); + + //communicate("https://theoneandgis.herokuapp.com/"); + + async function communicate(): Promise { + + // let response: Response = await fetch(_url); + // let jsonObj = await response.json(); + + let formData: FormData = new FormData(document.forms[0]); + let url: string = "https://theoneandgis.herokuapp.com/"; + let query: URLSearchParams = new URLSearchParams(formData); + + url += "?" + query.toString(); + + let response: Response = await fetch(url); + let theAnswer: string = await response.url; + + + // await fetch(url); + console.log(theAnswer); + } + + console.log("hello"); + + + +} diff --git a/Aufgaben/Aufgabe_09_2020-06-24/client.ts b/Aufgaben/Aufgabe_09_2020-06-24/client.ts index 330399e..ba9febe 100644 --- a/Aufgaben/Aufgabe_09_2020-06-24/client.ts +++ b/Aufgaben/Aufgabe_09_2020-06-24/client.ts @@ -1,119 +1,119 @@ - -namespace clientSide { - - (document.querySelector("#getJson")).addEventListener("click", communicateJson); - (document.querySelector("#getHtml")).addEventListener("click", communicateHtml); - - //communicate("https://theoneandgis.herokuapp.com/"); - - async function communicate(_path: string): Promise { - - let formData: FormData = new FormData(document.forms[0]); - let url: string = "https://theoneandgis.herokuapp.com" + _path; - //let url: string = "http://localhost:8100" + _path; - let query: URLSearchParams = new URLSearchParams(formData); - - url += "?" + query.toString(); - - let response: Response = await fetch(url); - let responseUrl: string; - - if (_path == "/json") { - responseUrl = await response.json(); - console.log(responseUrl); - (document.getElementById("htmlResponse")).innerHTML = JSON.stringify(responseUrl); - } - - if (_path == "/html") { - let responseUrl: string = await response.text(); - console.log("html-log: " + responseUrl); - (document.getElementById("htmlResponse")).innerHTML = responseUrl; - } - } - - function communicateJson(): void { - communicate("/json"); - } - function communicateHtml(): void { - communicate("/html"); - } - -} - - - - - - - - - - - - - -/*namespace tutorial09 { - - /*console.log(formData.get("vorname")); - - for (let entry of formData) { - console.log(entry); - console.log("name: " + entry[0]); - console.log("value: " + entry[1]); - } - - // Trennlinie - - (document.querySelector("#getHtml")).addEventListener("click", startCommunication); - - function startCommunication(): void { - communicate("http://localhost:8100"); - } - - async function communicate(_url: RequestInfo): Promise { - - // let response: Response = await fetch(_url); - // let jsonObj = await response.json(); - - let formData: FormData = new FormData(document.forms[0]); - let formquery: URLSearchParams = new URLSearchParams(formData); - _url += "?" + formquery.toString(); - console.log("_url: " + _url); - //let url: string = "https://theoneandgis.herokuapp.com/"; - //let query: URLSearchParams = new URLSearchParams(formData); - - //url += "?" + query.toString(); - - //debugger; - - //let response: Response = await fetch(_url); - let response: Response = await fetch("Data.json"); - console.log("response: " + response); - console.log(response); - let theAnswer: string = await response.text; - //let text: string = theAnswer - - - console.log("theAnswer: " + theAnswer); - //let query: URLSearchParams = new URLSearchParams(theAnswer); - //console.log(query.toString()); - //console.log( new URLSearchParams(theAnswer).values() ); - //console.log(query.keys() ); - //let queryvorname: string = query.get("/?vorname")!; - //let querynachname: string = query.get("nachname")!; - - //console.log(queryvorname); - //console.log(querynachname); - - (document.querySelector("#htmlResponse")).innerHTML = `${theAnswer}`; - - - // await fetch(url); - console.log(theAnswer); - } - - console.log("hello"); - -}*/ - - + +namespace clientSide { + + (document.querySelector("#getJson")).addEventListener("click", communicateJson); + (document.querySelector("#getHtml")).addEventListener("click", communicateHtml); + + //communicate("https://theoneandgis.herokuapp.com/"); + + async function communicate(_path: string): Promise { + + let formData: FormData = new FormData(document.forms[0]); + let url: string = "https://theoneandgis.herokuapp.com" + _path; + //let url: string = "http://localhost:8100" + _path; + let query: URLSearchParams = new URLSearchParams(formData); + + url += "?" + query.toString(); + + let response: Response = await fetch(url); + let responseUrl: string; + + if (_path == "/json") { + responseUrl = await response.json(); + console.log(responseUrl); + (document.getElementById("htmlResponse")).innerHTML = JSON.stringify(responseUrl); + } + + if (_path == "/html") { + let responseUrl: string = await response.text(); + console.log("html-log: " + responseUrl); + (document.getElementById("htmlResponse")).innerHTML = responseUrl; + } + } + + function communicateJson(): void { + communicate("/json"); + } + function communicateHtml(): void { + communicate("/html"); + } + +} + + + + + + + + + + + + + +/*namespace tutorial09 { + + /*console.log(formData.get("vorname")); + + for (let entry of formData) { + console.log(entry); + console.log("name: " + entry[0]); + console.log("value: " + entry[1]); + } + + // Trennlinie + + (document.querySelector("#getHtml")).addEventListener("click", startCommunication); + + function startCommunication(): void { + communicate("http://localhost:8100"); + } + + async function communicate(_url: RequestInfo): Promise { + + // let response: Response = await fetch(_url); + // let jsonObj = await response.json(); + + let formData: FormData = new FormData(document.forms[0]); + let formquery: URLSearchParams = new URLSearchParams(formData); + _url += "?" + formquery.toString(); + console.log("_url: " + _url); + //let url: string = "https://theoneandgis.herokuapp.com/"; + //let query: URLSearchParams = new URLSearchParams(formData); + + //url += "?" + query.toString(); + + //debugger; + + //let response: Response = await fetch(_url); + let response: Response = await fetch("Data.json"); + console.log("response: " + response); + console.log(response); + let theAnswer: string = await response.text; + //let text: string = theAnswer + + + console.log("theAnswer: " + theAnswer); + //let query: URLSearchParams = new URLSearchParams(theAnswer); + //console.log(query.toString()); + //console.log( new URLSearchParams(theAnswer).values() ); + //console.log(query.keys() ); + //let queryvorname: string = query.get("/?vorname")!; + //let querynachname: string = query.get("nachname")!; + + //console.log(queryvorname); + //console.log(querynachname); + + (document.querySelector("#htmlResponse")).innerHTML = `${theAnswer}`; + + + // await fetch(url); + console.log(theAnswer); + } + + console.log("hello"); + +}*/ + + diff --git a/Aufgaben/Aufgabe_09_2020-06-24/form.html b/Aufgaben/Aufgabe_09_2020-06-24/form.html index 219dfce..b542a63 100644 --- a/Aufgaben/Aufgabe_09_2020-06-24/form.html +++ b/Aufgaben/Aufgabe_09_2020-06-24/form.html @@ -1,32 +1,32 @@ - - - - - - - Formulare Kapitel 09 - - - -
-
-
-
-
- - - -
- -
- -
- - - - - \ No newline at end of file diff --git a/Aufgaben/Aufgabe_09_2020-06-24/server.ts b/Aufgaben/Aufgabe_09_2020-06-24/server.ts index e77f48f..c720386 100644 --- a/Aufgaben/Aufgabe_09_2020-06-24/server.ts +++ b/Aufgaben/Aufgabe_09_2020-06-24/server.ts @@ -1,46 +1,46 @@ -import * as Http from "http"; -import * as url from "url"; -import { ParsedUrlQuery } from "querystring"; - -export namespace ServerSide { - console.log("Starting server"); - let port: number = Number(process.env.PORT); - // der als numerisches Objekt abgespeichert werden soll - if (!port) - port = 8100; - - let server: Http.Server = Http.createServer(); - server.addListener("request", handleRequest); - server.addListener("listening", handleListen); - server.listen(port); - - function handleListen(): void { - console.log("Listening"); - } - - function handleRequest(_request: Http.IncomingMessage, _response: Http.ServerResponse): void { - console.log("https://theoneandgis.herokuapp.com" + `${_request.url}`); - - let myData: url.UrlWithParsedQuery = url.parse(`${_request.url}`, true); - let myQuery: ParsedUrlQuery = myData.query; - let splitThis: string = (_request.url).slice(0 , 5); - let myJsonString: string = JSON.stringify(myQuery); - - // Damit ich im Hinterkopf behalte, dass das so funktioniert - // console.log("myQuery.vorname: " + myQuery.vorname ); - // console.log("myQuery.nachname: " + myQuery.nachname); - - if (splitThis == "/html") { - _response.setHeader("content-type", "application/json"); - _response.setHeader("Access-Control-Allow-Origin", "*"); - } - else if (splitThis == "/json") { - _response.setHeader("content-type", "text/html"); - _response.setHeader("Access-Control-Allow-Origin", "*"); - } - - console.log(myJsonString); - _response.write(myJsonString); - _response.end(); - } -} +import * as Http from "http"; +import * as url from "url"; +import { ParsedUrlQuery } from "querystring"; + +export namespace ServerSide { + console.log("Starting server"); + let port: number = Number(process.env.PORT); + // der als numerisches Objekt abgespeichert werden soll + if (!port) + port = 8100; + + let server: Http.Server = Http.createServer(); + server.addListener("request", handleRequest); + server.addListener("listening", handleListen); + server.listen(port); + + function handleListen(): void { + console.log("Listening"); + } + + function handleRequest(_request: Http.IncomingMessage, _response: Http.ServerResponse): void { + console.log("https://theoneandgis.herokuapp.com" + `${_request.url}`); + + let myData: url.UrlWithParsedQuery = url.parse(`${_request.url}`, true); + let myQuery: ParsedUrlQuery = myData.query; + let splitThis: string = (_request.url).slice(0 , 5); + let myJsonString: string = JSON.stringify(myQuery); + + // Damit ich im Hinterkopf behalte, dass das so funktioniert + // console.log("myQuery.vorname: " + myQuery.vorname ); + // console.log("myQuery.nachname: " + myQuery.nachname); + + if (splitThis == "/html") { + _response.setHeader("content-type", "application/json"); + _response.setHeader("Access-Control-Allow-Origin", "*"); + } + else if (splitThis == "/json") { + _response.setHeader("content-type", "text/html"); + _response.setHeader("Access-Control-Allow-Origin", "*"); + } + + console.log(myJsonString); + _response.write(myJsonString); + _response.end(); + } +} diff --git a/Aufgaben/Aufgabe_11_2020-07-08/client.ts b/Aufgaben/Aufgabe_11_2020-07-08/client.ts index 4949516..adc993e 100644 --- a/Aufgaben/Aufgabe_11_2020-07-08/client.ts +++ b/Aufgaben/Aufgabe_11_2020-07-08/client.ts @@ -1,85 +1,85 @@ -//mongodb + srv://AdminForUse:XV8MXEdBYuwXtQnc@ichstudieremitgis-jfrz9.mongodb.net/IchStudiereMitGiS?retryWrites=true&w=majority -//http://localhost:8100 -//https://theoneandgis.herokuapp.com - -namespace clientSide { - - interface Personalien { - [type: string]: string | string[] | number | undefined; - } - - (document.querySelector("#abschicken")).addEventListener("click", sendData); - function sendData(): void { - communicate("http://localhost:8100", "mongo", "send", ""); - } - - (document.querySelector("#abfragen")).addEventListener("click", retrieveData); - function retrieveData(): void { - communicate("http://localhost:8100", "mongo", "retrieve", ""); - } - - function removeData(_event: Event): void { - let target: HTMLElement = (_event.target); - /*console.log(target.getAttribute("thisEntry")! ); - let entry: string = target.getAttribute("thisEntry")!; - console.log("entry: ", entry);*/ - let id: string = target.getAttribute("thisEntry")!; - communicate("https://theoneandgis.herokuapp.com", "mongo", "remove", id); - } - - interface Personalien { - vorname: string; - nachname: string; - geburtsjahr: number; - } - - async function communicate(_baseUrl: string, _aim: string , _task: string, _id: string): Promise { - let formData: FormData = new FormData(document.forms[0]); - let url: string = ""; - if (_id == "") { - //tslint:disable-next-line: no-any - let query: URLSearchParams = new URLSearchParams(formData); - url = _baseUrl + "/" + _aim + "/" + _task + "?" + query.toString(); - } else { - url = _baseUrl + "/" + _aim + "/" + _task + "?" + "_id=" + `${_id}`; - } - let response: Response = await fetch(url); - let jsonResponse: Personalien[] = await response.json(); - - if (_task == "send") { - let jsonString: string = JSON.stringify(jsonResponse); - (document.querySelector("#divResponse")).innerHTML = jsonString; - //console.log(jsonResponse[0].vorname + " " + jsonResponse[0].nachname + " " + jsonResponse[0].geburtsjahr); - } - if (_task == "retrieve") { - let jsonString: string = formatCollection(jsonResponse); - (document.querySelector("#divDatabase")).innerHTML = jsonString; - addRemoveFunction(); - } - - (document.getElementById("myForm")).reset(); - } - - function formatCollection(_jsonResponse: Personalien[]): string { - let jsonString: string = ""; - for (let index: number = 0; index <= _jsonResponse.length; index++) { - if (_jsonResponse[index]) { - jsonString += `
`; - let current: Personalien = _jsonResponse[index]; - for (let key in current) { - jsonString += key + ": " + JSON.stringify(current[key]) + "
"; - } - jsonString += "
"; - } - } - return jsonString; - } - - function addRemoveFunction(): void { - let removeButtons: NodeListOf = document.querySelectorAll(".removeButton"); - for (const iterator of removeButtons) - iterator.addEventListener("click", removeData); - } - -} - +//mongodb + srv://AdminForUse:XV8MXEdBYuwXtQnc@ichstudieremitgis-jfrz9.mongodb.net/IchStudiereMitGiS?retryWrites=true&w=majority +//http://localhost:8100 +//https://theoneandgis.herokuapp.com + +namespace clientSide { + + interface Personalien { + [type: string]: string | string[] | number | undefined; + } + + (document.querySelector("#abschicken")).addEventListener("click", sendData); + function sendData(): void { + communicate("http://localhost:8100", "mongo", "send", ""); + } + + (document.querySelector("#abfragen")).addEventListener("click", retrieveData); + function retrieveData(): void { + communicate("http://localhost:8100", "mongo", "retrieve", ""); + } + + function removeData(_event: Event): void { + let target: HTMLElement = (_event.target); + /*console.log(target.getAttribute("thisEntry")! ); + let entry: string = target.getAttribute("thisEntry")!; + console.log("entry: ", entry);*/ + let id: string = target.getAttribute("thisEntry")!; + communicate("https://theoneandgis.herokuapp.com", "mongo", "remove", id); + } + + interface Personalien { + vorname: string; + nachname: string; + geburtsjahr: number; + } + + async function communicate(_baseUrl: string, _aim: string , _task: string, _id: string): Promise { + let formData: FormData = new FormData(document.forms[0]); + let url: string = ""; + if (_id == "") { + //tslint:disable-next-line: no-any + let query: URLSearchParams = new URLSearchParams(formData); + url = _baseUrl + "/" + _aim + "/" + _task + "?" + query.toString(); + } else { + url = _baseUrl + "/" + _aim + "/" + _task + "?" + "_id=" + `${_id}`; + } + let response: Response = await fetch(url); + let jsonResponse: Personalien[] = await response.json(); + + if (_task == "send") { + let jsonString: string = JSON.stringify(jsonResponse); + (document.querySelector("#divResponse")).innerHTML = jsonString; + //console.log(jsonResponse[0].vorname + " " + jsonResponse[0].nachname + " " + jsonResponse[0].geburtsjahr); + } + if (_task == "retrieve") { + let jsonString: string = formatCollection(jsonResponse); + (document.querySelector("#divDatabase")).innerHTML = jsonString; + addRemoveFunction(); + } + + (document.getElementById("myForm")).reset(); + } + + function formatCollection(_jsonResponse: Personalien[]): string { + let jsonString: string = ""; + for (let index: number = 0; index <= _jsonResponse.length; index++) { + if (_jsonResponse[index]) { + jsonString += `
`; + let current: Personalien = _jsonResponse[index]; + for (let key in current) { + jsonString += key + ": " + JSON.stringify(current[key]) + "
"; + } + jsonString += "
"; + } + } + return jsonString; + } + + function addRemoveFunction(): void { + let removeButtons: NodeListOf = document.querySelectorAll(".removeButton"); + for (const iterator of removeButtons) + iterator.addEventListener("click", removeData); + } + +} + diff --git a/Aufgaben/Aufgabe_11_2020-07-08/form.html b/Aufgaben/Aufgabe_11_2020-07-08/form.html index 7aa3e4f..71508cc 100644 --- a/Aufgaben/Aufgabe_11_2020-07-08/form.html +++ b/Aufgaben/Aufgabe_11_2020-07-08/form.html @@ -1,64 +1,64 @@ - - - - - - - - Kapitel 11 - - - - - - - - - -
- -
- - -
-
- -
-
- -
-
- - - - -
- -
-
-
-
- - - - - - - - \ No newline at end of file diff --git a/Aufgaben/Aufgabe_11_2020-07-08/mongo.ts b/Aufgaben/Aufgabe_11_2020-07-08/mongo.ts index 0f4661c..5356731 100644 --- a/Aufgaben/Aufgabe_11_2020-07-08/mongo.ts +++ b/Aufgaben/Aufgabe_11_2020-07-08/mongo.ts @@ -1,65 +1,65 @@ -import * as Mongo from "mongodb"; - -export namespace handleMongo { - - export interface Personalien { - [type: string]: string | string[] | number | undefined; - } - - let content: Mongo.Collection; - let dbUrl: string = ""; - - function chooseUrl(_whichDB: string): void { - if (_whichDB == "local") - dbUrl = "mongodb://127.0.0.1:27017/"; - if (_whichDB == "remote") - dbUrl = "mongodb+srv://AdminForUse:XV8MXEdBYuwXtQnc@ichstudieremitgis-jfrz9.mongodb.net/IchStudiereMitGiS?retryWrites=true&w=majority"; - } - - export async function connectDB(_whichDB: string): Promise { // _url: string - chooseUrl(_whichDB); - let options: Mongo.MongoClientOptions = { useNewUrlParser: true, useUnifiedTopology: true }; - let mongoClient: Mongo.MongoClient = new Mongo.MongoClient(dbUrl, options); - await mongoClient.connect(); - //content = mongoClient.db("db").collection("Students"); - content = mongoClient.db("MeineHochschule").collection("Students"); - console.log("Database connection: ", content != undefined); - } - - export function insertData(_order: Personalien): void { - content.insertOne(_order); - } - - export async function removeData(_entry: Personalien): Promise { - //console.log("_entry: ", _entry); - //console.log(_entry._id); - let id: string = _entry._id; - let objID: Mongo.ObjectID = new Mongo.ObjectID(id); - await content.deleteOne({"_id": objID}); - } - - export async function findCollection(): Promise { - let foundCollection: Personalien[] = await content.find().toArray(); - return foundCollection; - } - - /* - async function findManyData(_order: Personalien): Promise { - let test: Mongo.Cursor = content.find(_order); - let testArray: Personalien[] = await test.toArray(); - console.log( testArray ); - return testArray.toString(); - } - - async function findOneData(_order: Personalien): Promise { - let test2: any = await content.findOne(_order); - console.log("findOneData: ", test2); - //console.log(test2.name); - } - - function removeData(_order: Personalien): void { - content.remove(_order); - } - */ - +import * as Mongo from "mongodb"; + +export namespace handleMongo { + + export interface Personalien { + [type: string]: string | string[] | number | undefined; + } + + let content: Mongo.Collection; + let dbUrl: string = ""; + + function chooseUrl(_whichDB: string): void { + if (_whichDB == "local") + dbUrl = "mongodb://127.0.0.1:27017/"; + if (_whichDB == "remote") + dbUrl = "mongodb+srv://AdminForUse:XV8MXEdBYuwXtQnc@ichstudieremitgis-jfrz9.mongodb.net/IchStudiereMitGiS?retryWrites=true&w=majority"; + } + + export async function connectDB(_whichDB: string): Promise { // _url: string + chooseUrl(_whichDB); + let options: Mongo.MongoClientOptions = { useNewUrlParser: true, useUnifiedTopology: true }; + let mongoClient: Mongo.MongoClient = new Mongo.MongoClient(dbUrl, options); + await mongoClient.connect(); + //content = mongoClient.db("db").collection("Students"); + content = mongoClient.db("MeineHochschule").collection("Students"); + console.log("Database connection: ", content != undefined); + } + + export function insertData(_order: Personalien): void { + content.insertOne(_order); + } + + export async function removeData(_entry: Personalien): Promise { + //console.log("_entry: ", _entry); + //console.log(_entry._id); + let id: string = _entry._id; + let objID: Mongo.ObjectID = new Mongo.ObjectID(id); + await content.deleteOne({"_id": objID}); + } + + export async function findCollection(): Promise { + let foundCollection: Personalien[] = await content.find().toArray(); + return foundCollection; + } + + /* + async function findManyData(_order: Personalien): Promise { + let test: Mongo.Cursor = content.find(_order); + let testArray: Personalien[] = await test.toArray(); + console.log( testArray ); + return testArray.toString(); + } + + async function findOneData(_order: Personalien): Promise { + let test2: any = await content.findOne(_order); + console.log("findOneData: ", test2); + //console.log(test2.name); + } + + function removeData(_order: Personalien): void { + content.remove(_order); + } + */ + } \ No newline at end of file diff --git a/Aufgaben/Aufgabe_11_2020-07-08/server.ts b/Aufgaben/Aufgabe_11_2020-07-08/server.ts index cdfa759..bb25b02 100644 --- a/Aufgaben/Aufgabe_11_2020-07-08/server.ts +++ b/Aufgaben/Aufgabe_11_2020-07-08/server.ts @@ -1,69 +1,69 @@ -import * as Http from "http"; -import * as url from "url"; -import { ParsedUrlQuery } from "querystring"; -import { handleMongo } from "./mongo"; - -//import {testThis } from "mongo.js"; - -export namespace ServerSide { - - console.log("Starting server"); - let port: number = Number(process.env.PORT); - if (!port) - port = 8100; - - let server: Http.Server = Http.createServer(); - server.addListener("request", handleRequest); - server.addListener("listening", handleListen); - server.listen(port); - - let myArgs: string[] = process.argv.slice(2); - let whichDB: string = myArgs[0]; - handleMongo.connectDB(whichDB); - - - function handleListen(): void { - console.log("Listening"); - } - - async function handleRequest(_request: Http.IncomingMessage, _response: Http.ServerResponse): Promise { - console.log("https://theoneandgis.herokuapp.com" + `${_request.url}`); - - let myData: url.UrlWithParsedQuery = url.parse(`${_request.url}`, true); - let myQuery: ParsedUrlQuery = myData.query; - let myQueryString: string = JSON.stringify(myQuery); - //let splitString: string = (_request.url).slice(0, 9); - - _response.setHeader("content-type", "application/json"); - _response.setHeader("Access-Control-Allow-Origin", "*"); - - if ( (_request.url).includes("/mongo") ) { - console.log(" myQueryString: ", myQueryString); - console.log(" _request.url: ", _request.url); - await mongoAction( _response, myQueryString , (_request.url) ); - } - - _response.end(); - } - - async function mongoAction(_response: Http.ServerResponse, _query: string, _command: string): Promise { - if (_command.includes("/send")) { - let myJsonObj: handleMongo.Personalien = JSON.parse(_query); - handleMongo.insertData(myJsonObj); - _response.write(_query); - } - - if ( _command.includes("/retrieve") ) { - let value: handleMongo.Personalien[] = await handleMongo.findCollection(); - let handlThis: string = JSON.stringify(value); - _response.write(handlThis); - } - - if ( _command.includes("/remove") ) { - let myJsonObj: handleMongo.Personalien = JSON.parse(_query); - await handleMongo.removeData(myJsonObj); - _response.write(`{"":""}`); - } - } - -} +import * as Http from "http"; +import * as url from "url"; +import { ParsedUrlQuery } from "querystring"; +import { handleMongo } from "./mongo"; + +//import {testThis } from "mongo.js"; + +export namespace ServerSide { + + console.log("Starting server"); + let port: number = Number(process.env.PORT); + if (!port) + port = 8100; + + let server: Http.Server = Http.createServer(); + server.addListener("request", handleRequest); + server.addListener("listening", handleListen); + server.listen(port); + + let myArgs: string[] = process.argv.slice(2); + let whichDB: string = myArgs[0]; + handleMongo.connectDB(whichDB); + + + function handleListen(): void { + console.log("Listening"); + } + + async function handleRequest(_request: Http.IncomingMessage, _response: Http.ServerResponse): Promise { + console.log("https://theoneandgis.herokuapp.com" + `${_request.url}`); + + let myData: url.UrlWithParsedQuery = url.parse(`${_request.url}`, true); + let myQuery: ParsedUrlQuery = myData.query; + let myQueryString: string = JSON.stringify(myQuery); + //let splitString: string = (_request.url).slice(0, 9); + + _response.setHeader("content-type", "application/json"); + _response.setHeader("Access-Control-Allow-Origin", "*"); + + if ( (_request.url).includes("/mongo") ) { + console.log(" myQueryString: ", myQueryString); + console.log(" _request.url: ", _request.url); + await mongoAction( _response, myQueryString , (_request.url) ); + } + + _response.end(); + } + + async function mongoAction(_response: Http.ServerResponse, _query: string, _command: string): Promise { + if (_command.includes("/send")) { + let myJsonObj: handleMongo.Personalien = JSON.parse(_query); + handleMongo.insertData(myJsonObj); + _response.write(_query); + } + + if ( _command.includes("/retrieve") ) { + let value: handleMongo.Personalien[] = await handleMongo.findCollection(); + let handlThis: string = JSON.stringify(value); + _response.write(handlThis); + } + + if ( _command.includes("/remove") ) { + let myJsonObj: handleMongo.Personalien = JSON.parse(_query); + await handleMongo.removeData(myJsonObj); + _response.write(`{"":""}`); + } + } + +} diff --git a/Dretvic_Justin_263368.zip b/Dretvic_Justin_263368.zip new file mode 100644 index 0000000..b46c4ed Binary files /dev/null and b/Dretvic_Justin_263368.zip differ diff --git a/Endabgabe/#dokumente/Anleitung zur Prüfungsabgabe.docx b/Endabgabe/#dokumente/Anleitung zur Prüfungsabgabe.docx deleted file mode 100644 index c61e4d9..0000000 Binary files a/Endabgabe/#dokumente/Anleitung zur Prüfungsabgabe.docx and /dev/null differ diff --git a/Endabgabe/#dokumente/Eidesstattliche-Erklärung.pdf b/Endabgabe/#dokumente/Eidesstattliche-Erklärung.pdf new file mode 100644 index 0000000..9cb2b4e Binary files /dev/null and b/Endabgabe/#dokumente/Eidesstattliche-Erklärung.pdf differ diff --git a/Endabgabe/#konzepte/bilder-quellen.txt b/Endabgabe/#konzepte/bilder-quellen.txt index 5ab1f9d..30d8bfd 100644 --- a/Endabgabe/#konzepte/bilder-quellen.txt +++ b/Endabgabe/#konzepte/bilder-quellen.txt @@ -1,9 +1,9 @@ -02.07.2020 | 21:31 | https://pixabay.com/de/illustrations/ice-cream-dessert-sweet-süßwaren-3490976/ -02.07.2020 | 21:32 | https://pixabay.com/de/photos/sonnenaufgang-boot-ruderboot-1014712/ -02.07.2020 | 21:35 | https://pixabay.com/de/photos/softeis-softeistüte-eis-schokoeis-50845/ -02.07.2020 | 21:40 | https://pixabay.com/de/photos/trinken-glas-gießen-bar-pub-eis-1870139/ -02.07.2020 | 21:52 | https://freiburg.stadtbesten.de/wp-content/uploads/sites/4/2017/06/ice-cream-cone-1274894_1920.jpg -17.07.2020 | 21:51 | https://5.imimg.com/data5/GG/MY/MY-52641035/paper-bowl-with-paper-lid-500x500.jpg -17.07.2020 | 23:55 | https://pixabay.com/de/photos/bunte-streusel-s%C3%BC%C3%9Fwaren-lose-50723/ -18.07.2020 | 00:13 | https://pixabay.com/get/53e0dd40424fad00f5d8997cc2293f7d1139d9f85254784c752d78d3904d_1920.jpg +02.07.2020 | 21:31 | https://pixabay.com/de/illustrations/ice-cream-dessert-sweet-süßwaren-3490976/ +02.07.2020 | 21:32 | https://pixabay.com/de/photos/sonnenaufgang-boot-ruderboot-1014712/ +02.07.2020 | 21:35 | https://pixabay.com/de/photos/softeis-softeistüte-eis-schokoeis-50845/ +02.07.2020 | 21:40 | https://pixabay.com/de/photos/trinken-glas-gießen-bar-pub-eis-1870139/ +02.07.2020 | 21:52 | https://freiburg.stadtbesten.de/wp-content/uploads/sites/4/2017/06/ice-cream-cone-1274894_1920.jpg +17.07.2020 | 21:51 | https://5.imimg.com/data5/GG/MY/MY-52641035/paper-bowl-with-paper-lid-500x500.jpg +17.07.2020 | 23:55 | https://pixabay.com/de/photos/bunte-streusel-s%C3%BC%C3%9Fwaren-lose-50723/ +18.07.2020 | 00:13 | https://pixabay.com/get/53e0dd40424fad00f5d8997cc2293f7d1139d9f85254784c752d78d3904d_1920.jpg 18.07.2020 | 00:29 | https://pixabay.com/get/52e7d4464c53ab14f6d1867dda29327f1d3cdae3544c704c7c2a7bd69344cd51_1920.jpg \ No newline at end of file diff --git a/Endabgabe/html-admin/admin.css b/Endabgabe/html-admin/admin.css index 05e778f..3dcc182 100644 --- a/Endabgabe/html-admin/admin.css +++ b/Endabgabe/html-admin/admin.css @@ -1,113 +1,113 @@ -@media screen and (min-width: 0px) { - - body { - background-image: url(../html-shop/images/background.png); - } - - #tableDiv { - display: flex; - flex-direction: column; - align-items: center; - width: 100%; - font-size: 20px; - } - - #tableDiv button { - background-color: transparent; - border: solid black 2px; - font-weight: bold; - } - - table { - margin: 10px 0px; - width: 90%; - text-align: left; - border: solid black 2px; - padding: 0px 5%; - background-color: rgb(0, 102, 255); - color: white; - } - - th, td { - width: 40%; - } - - .removeButton { - margin: 10px 0px; - width: 90%; - } - - .buttonDiv { - margin: 10px 0px; - width: 90%; - display: flex; - flex-direction: row; - justify-content: space-evenly; - } - .buttonDiv button { - width: 45%; - } - - div#formDiv { - width: 90%; - padding: 10px 5%; - border: solid black 2px; - } - form#myForm { - display: flex; - flex-direction: column; - justify-content: center; - padding: 0px 5px; - } - form#myForm input, form#myForm label, form#myForm button { - margin: 2px 5%; - } - form#myForm button { - min-height: 30px; - } - -} -@media screen and (min-width: 601px) { - .removeButton { - width: 70%; - height: 40px; - } - table { - width: 70%; - } - .buttonDiv { - margin: 10px 0px; - width: 70%; - } - .buttonDiv button { - height: 40px; - width: 45%; - } -} -@media screen and (min-width: 1025px) { - .removeButton { - width: 40%; - } - table { - width: 40%; - } - .buttonDiv { - width: 40%; - } - .buttonDiv button { - width: 45%; - } - #tableDiv .removeOne:hover, #tableDiv .removeButton:hover { - background-color: red; - } - #tableDiv .editOne:hover { - background-color: yellow; - } - div#formDiv { - width: 60%; - } - form#myForm button:hover { - background-color: green; - } -} - +@media screen and (min-width: 0px) { + + body { + background-image: url(../html-shop/images/background.png); + } + + #tableDiv { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + font-size: 20px; + } + + #tableDiv button { + background-color: transparent; + border: solid black 2px; + font-weight: bold; + } + + table { + margin: 10px 0px; + width: 90%; + text-align: left; + border: solid black 2px; + padding: 0px 5%; + background-color: rgb(0, 102, 255); + color: white; + } + + th, td { + width: 40%; + } + + .removeButton { + margin: 10px 0px; + width: 90%; + } + + .buttonDiv { + margin: 10px 0px; + width: 90%; + display: flex; + flex-direction: row; + justify-content: space-evenly; + } + .buttonDiv button { + width: 45%; + } + + div#formDiv { + width: 90%; + padding: 10px 5%; + border: solid black 2px; + } + form#myForm { + display: flex; + flex-direction: column; + justify-content: center; + padding: 0px 5px; + } + form#myForm input, form#myForm label, form#myForm button { + margin: 2px 5%; + } + form#myForm button { + min-height: 30px; + } + +} +@media screen and (min-width: 601px) { + .removeButton { + width: 70%; + height: 40px; + } + table { + width: 70%; + } + .buttonDiv { + margin: 10px 0px; + width: 70%; + } + .buttonDiv button { + height: 40px; + width: 45%; + } +} +@media screen and (min-width: 1025px) { + .removeButton { + width: 40%; + } + table { + width: 40%; + } + .buttonDiv { + width: 40%; + } + .buttonDiv button { + width: 45%; + } + #tableDiv .removeOne:hover, #tableDiv .removeButton:hover { + background-color: red; + } + #tableDiv .editOne:hover { + background-color: yellow; + } + div#formDiv { + width: 60%; + } + form#myForm button:hover { + background-color: green; + } +} + diff --git a/Endabgabe/html-admin/admin.html b/Endabgabe/html-admin/admin.html index 2da64f7..b787294 100644 --- a/Endabgabe/html-admin/admin.html +++ b/Endabgabe/html-admin/admin.html @@ -1,45 +1,45 @@ - - - - - Administrator - - - - - - - - - -
-
- -
-  0 -
-
-
- -
-
-
-
-
-
- ( - Disclaimer - ) - Ich verdiene mit dieser Website kein Geld -
-
- - + + + + + Administrator + + + + + + + + + +
+
+ +
+  0 +
+
+
+ +
+
+
+
+
+
+ ( - Disclaimer - ) + Ich verdiene mit dieser Website kein Geld +
+
+ + \ No newline at end of file diff --git a/Endabgabe/html-landing-page/landing-page-01-phone.css b/Endabgabe/html-landing-page/landing-page-01-phone.css index 984a67d..0c5d8f8 100644 --- a/Endabgabe/html-landing-page/landing-page-01-phone.css +++ b/Endabgabe/html-landing-page/landing-page-01-phone.css @@ -1,35 +1,35 @@ -body { - background-image: url(images/sunrise-1014712_1920.jpg); - background-position-x: 50%; - background-repeat: no-repeat; - background-size: auto 100vh; -} - -.bestellbox { - font-size: 30px; - position: relative; - top: 200px; - background-color: rgba(58, 58, 58, 0.8); - color: white; - display: flex; - flex-direction: column; - justify-content: space-evenly; - align-items: center; - margin: 0px 10px; - border-radius: 10px; -} -.bestellbox span { - margin: 5px 0px; -} -.bestellbox a { - text-decoration: none; - color: white; -} -.bestellbox #box-togo, #box-tostay { - background-color: rgba(128, 128, 128, 0.8); - box-shadow: 3px 3px 3px white; - text-align: center; - width: 95%; - margin: 10px 0px; - border-radius: 10px; -} +body { + background-image: url(images/sunrise-1014712_1920.jpg); + background-position-x: 50%; + background-repeat: no-repeat; + background-size: auto 100vh; +} + +.bestellbox { + font-size: 30px; + position: relative; + top: 200px; + background-color: rgba(58, 58, 58, 0.8); + color: white; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + margin: 0px 10px; + border-radius: 10px; +} +.bestellbox span { + margin: 5px 0px; +} +.bestellbox a { + text-decoration: none; + color: white; +} +.bestellbox #box-togo, #box-tostay { + background-color: rgba(128, 128, 128, 0.8); + box-shadow: 3px 3px 3px white; + text-align: center; + width: 95%; + margin: 10px 0px; + border-radius: 10px; +} diff --git a/Endabgabe/html-landing-page/landing-page-02-tablet.css b/Endabgabe/html-landing-page/landing-page-02-tablet.css index 92f548e..0433e7d 100644 --- a/Endabgabe/html-landing-page/landing-page-02-tablet.css +++ b/Endabgabe/html-landing-page/landing-page-02-tablet.css @@ -1,17 +1,17 @@ -body { - font-size: 40px; -} - -.bestellbox { - font-size: 50px; - margin: 0px 20px; - border-radius: 20px; -} -.bestellbox span { - margin: 10px 0px; -} -.bestellbox #box-togo, #box-tostay { - width: 90%; - margin: 20px 0px; - border-radius: 20px; +body { + font-size: 40px; +} + +.bestellbox { + font-size: 50px; + margin: 0px 20px; + border-radius: 20px; +} +.bestellbox span { + margin: 10px 0px; +} +.bestellbox #box-togo, #box-tostay { + width: 90%; + margin: 20px 0px; + border-radius: 20px; } \ No newline at end of file diff --git a/Endabgabe/html-landing-page/landing-page-03-desktop.css b/Endabgabe/html-landing-page/landing-page-03-desktop.css index 06e6366..05cfa30 100644 --- a/Endabgabe/html-landing-page/landing-page-03-desktop.css +++ b/Endabgabe/html-landing-page/landing-page-03-desktop.css @@ -1,11 +1,11 @@ -body { - font-size: 40px; - background-size: 100vw 100vh; -} - -.bestellbox { - top: 150px; -} -.bestellbox #box-togo:hover, #box-tostay:hover { - background-color: rgb(0, 102, 255); +body { + font-size: 40px; + background-size: 100vw 100vh; +} + +.bestellbox { + top: 150px; +} +.bestellbox #box-togo:hover, #box-tostay:hover { + background-color: rgb(0, 102, 255); } \ No newline at end of file diff --git a/Endabgabe/html-memes/memes.css b/Endabgabe/html-memes/memes.css index b64288e..e66f9ae 100644 --- a/Endabgabe/html-memes/memes.css +++ b/Endabgabe/html-memes/memes.css @@ -1,64 +1,64 @@ -@media screen and (min-width: 0px) { - .top-nav { - color: white; - background-color: black; - display: flex; - flex-direction: column; - align-content: center; - justify-content: space-around; - text-align: center; - height: 10vh; - padding: 5px 0px; - } - .top-nav a { - font-size: 0px; - } - - #imageBox { - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-around; - width: 100%; - margin-top: 10px; - } - #imageBox div { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-around; - margin-top: 10px; - width: 100%; - } - #imageBox img { - width: 100%; - border: solid black 3px; - border-radius: 20px; - } - #buttonRight, #buttonLeft { - height: 5vh; - width: 100%; - text-align: center; - background-color: rgba(0,0,0,75%); - font-weight: bold; - font-size: 1em; - color: white; - border: solid black 3px; - border-radius: 50px; - } -} -@media screen and (min-width: 601px) { - -} -@media screen and (min-width: 1025px) { - #imageBox div { - width: 50%; - } - #imageBox img { - width: 40%; - max-height: 650px; - } - #buttonRight, #buttonLeft { - font-size: 20px; - } +@media screen and (min-width: 0px) { + .top-nav { + color: white; + background-color: black; + display: flex; + flex-direction: column; + align-content: center; + justify-content: space-around; + text-align: center; + height: 10vh; + padding: 5px 0px; + } + .top-nav a { + font-size: 0px; + } + + #imageBox { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + width: 100%; + margin-top: 10px; + } + #imageBox div { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + margin-top: 10px; + width: 100%; + } + #imageBox img { + width: 100%; + border: solid black 3px; + border-radius: 20px; + } + #buttonRight, #buttonLeft { + height: 5vh; + width: 100%; + text-align: center; + background-color: rgba(0,0,0,75%); + font-weight: bold; + font-size: 1em; + color: white; + border: solid black 3px; + border-radius: 50px; + } +} +@media screen and (min-width: 601px) { + +} +@media screen and (min-width: 1025px) { + #imageBox div { + width: 50%; + } + #imageBox img { + width: 40%; + max-height: 650px; + } + #buttonRight, #buttonLeft { + font-size: 20px; + } } \ No newline at end of file diff --git a/Endabgabe/html-memes/memes.html b/Endabgabe/html-memes/memes.html index 08d35e3..02e856d 100644 --- a/Endabgabe/html-memes/memes.html +++ b/Endabgabe/html-memes/memes.html @@ -1,44 +1,44 @@ - - - - - - - - - - - - - - MEMS! - - - -
-
- -
-
- -
-
- Some weird Memes -
- - -
-
-
- - + + + + + + + + + + + + + + MEMS! + + + +
+
+ +
+
+ +
+
+ Some weird Memes +
+ + +
+
+
+ + \ No newline at end of file diff --git a/Endabgabe/html-shop/shop.css b/Endabgabe/html-shop/shop.css index cadcf77..560e9fe 100644 --- a/Endabgabe/html-shop/shop.css +++ b/Endabgabe/html-shop/shop.css @@ -1,169 +1,169 @@ -@media screen and (min-width: 0px) { - body { - background-image: url(images/background.png); - text-align: center; - } - - #topContainer { - display: flex; - flex-direction: column; - justify-content: space-evenly; - padding: 0px 10px 0px 10px; - margin: 20px 0px; - } - #topContainer > span { - border-bottom: solid 3px; - margin-bottom: 10px; - } - #topContainer button { - color: white; - background-color: rgb(0, 102, 255); - } - - #productContainer > span { - width: 90%; - border-bottom: solid 3px; - margin-bottom: 10px; - } - - #topTable { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-evenly; - align-items: stretch; - padding: 0px; - } - - #topTable button { - width: 23%; - margin: 4px 0px; - } - - #topTake button { - width: 100%; - } - - #topContainer{ - padding: 10px; - } - - #topContainer, #productContainer{ - border: solid black; - margin: 20px 0px; - } - - #extraSpan { - font-size: 25px; - color: red; - } - - #buttonContainer{ - display: flex; - flex-direction: column; - align-items: center; - border: solid black; - padding: 20px; - margin-bottom: 20px; - } - - #containerDiv, #flavourDiv, #toppingDiv{ - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-evenly; - margin: 20px 0px; - } - - #containerDiv div, #flavourDiv div, #toppingDiv div{ - margin: 10px 0px; - } - - #container, #flavour, #topping{ - margin: 20px 0px; - } - - .container, .flavour, .topping{ - width: 40%; - } - - .container img { - border: solid black 3px; - border-radius: 50%; - } - .container img, .flavour img, .topping img { - width: 80%; - } - .container button, .flavour button, .topping button { - background-color: transparent; - border-radius: 5%; - } - - #buttonContainer button { - width: 100%; - margin: 5px 0px; - color: white; - background-color: rgb(0, 102, 255); - border-radius: 20px; - } - - #buttonContainer a { - width: 100%; - color: white; - text-decoration: none; - margin: 5px 0px; - } - - #displayContainer { - display: flex; - flex-direction: row; - justify-content: center; - border: solid black 3px; - margin: 20px 0px; - min-height: 100px; - flex-wrap: wrap; - } - #displayContainer img { - width: 100px; - margin: 0px 5px; - } -} -@media screen and (min-width: 601px) { - #topTable button, #topTake button { - font-size: 30px; - } - - #buttonContainer button { - font-size: 30px; - padding: 5px 0px; - } - - #containerDiv div, #flavourDiv div, #toppingDiv div{ - font-size: 30px; - align-items: center; - text-align: center; - } - .container, .flavour, .topping{ - width: 30%; - } - #containerDiv button, #flavourDiv button, #toppingDiv button{ - font-size: 25px; - } -} -@media screen and (min-width: 1025px) { - .container, .flavour, .topping{ - width: 12%; - } - #topTable button { - width: 10%; - margin: 4px 0px; - } - #topTable button:hover, #topTake button:hover, #buttonContainer button:hover{ - background-color: black; - color: rgb(0, 102, 255); - } - .container button:hover, .flavour button:hover, .topping button:hover { - background-color: white; - } - +@media screen and (min-width: 0px) { + body { + background-image: url(images/background.png); + text-align: center; + } + + #topContainer { + display: flex; + flex-direction: column; + justify-content: space-evenly; + padding: 0px 10px 0px 10px; + margin: 20px 0px; + } + #topContainer > span { + border-bottom: solid 3px; + margin-bottom: 10px; + } + #topContainer button { + color: white; + background-color: rgb(0, 102, 255); + } + + #productContainer > span { + width: 90%; + border-bottom: solid 3px; + margin-bottom: 10px; + } + + #topTable { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: stretch; + padding: 0px; + } + + #topTable button { + width: 23%; + margin: 4px 0px; + } + + #topTake button { + width: 100%; + } + + #topContainer{ + padding: 10px; + } + + #topContainer, #productContainer{ + border: solid black; + margin: 20px 0px; + } + + #extraSpan { + font-size: 25px; + color: red; + } + + #buttonContainer{ + display: flex; + flex-direction: column; + align-items: center; + border: solid black; + padding: 20px; + margin-bottom: 20px; + } + + #containerDiv, #flavourDiv, #toppingDiv{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + margin: 20px 0px; + } + + #containerDiv div, #flavourDiv div, #toppingDiv div{ + margin: 10px 0px; + } + + #container, #flavour, #topping{ + margin: 20px 0px; + } + + .container, .flavour, .topping{ + width: 40%; + } + + .container img { + border: solid black 3px; + border-radius: 50%; + } + .container img, .flavour img, .topping img { + width: 80%; + } + .container button, .flavour button, .topping button { + background-color: transparent; + border-radius: 5%; + } + + #buttonContainer button { + width: 100%; + margin: 5px 0px; + color: white; + background-color: rgb(0, 102, 255); + border-radius: 20px; + } + + #buttonContainer a { + width: 100%; + color: white; + text-decoration: none; + margin: 5px 0px; + } + + #displayContainer { + display: flex; + flex-direction: row; + justify-content: center; + border: solid black 3px; + margin: 20px 0px; + min-height: 100px; + flex-wrap: wrap; + } + #displayContainer img { + width: 100px; + margin: 0px 5px; + } +} +@media screen and (min-width: 601px) { + #topTable button, #topTake button { + font-size: 30px; + } + + #buttonContainer button { + font-size: 30px; + padding: 5px 0px; + } + + #containerDiv div, #flavourDiv div, #toppingDiv div{ + font-size: 30px; + align-items: center; + text-align: center; + } + .container, .flavour, .topping{ + width: 30%; + } + #containerDiv button, #flavourDiv button, #toppingDiv button{ + font-size: 25px; + } +} +@media screen and (min-width: 1025px) { + .container, .flavour, .topping{ + width: 12%; + } + #topTable button { + width: 10%; + margin: 4px 0px; + } + #topTable button:hover, #topTake button:hover, #buttonContainer button:hover{ + background-color: black; + color: rgb(0, 102, 255); + } + .container button:hover, .flavour button:hover, .topping button:hover { + background-color: white; + } + } \ No newline at end of file diff --git a/Endabgabe/html-shop/shop.html b/Endabgabe/html-shop/shop.html index ba1546d..6e1263d 100644 --- a/Endabgabe/html-shop/shop.html +++ b/Endabgabe/html-shop/shop.html @@ -1,77 +1,77 @@ - - - - - - - - - - Shop - - -
-
- -
-  0 -
-
-
- -
-
- Wohin wollen Sie das Eis? -
(Muss nur einmal pro Bestellvorgang ausgewählt werden)
-
- Zum Tisch? -
-
-
- Zum Mitnehmen? -
-
-
-
-

Behälter (max 1)

-
-

Eis Sorten (max 6)

-
-

Toppings (max 3)

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - -
-
-
-
- ( - Disclaimer - ) - Ich verdiene mit dieser Website kein Geld -
-
- + + + + + + + + + + Shop + + +
+
+ +
+  0 +
+
+
+ +
+
+ Wohin wollen Sie das Eis? +
(Muss nur einmal pro Bestellvorgang ausgewählt werden)
+
+ Zum Tisch? +
+
+
+ Zum Mitnehmen? +
+
+
+
+

Behälter (max 1)

+
+

Eis Sorten (max 6)

+
+

Toppings (max 3)

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+ ( - Disclaimer - ) + Ich verdiene mit dieser Website kein Geld +
+
+ \ No newline at end of file diff --git a/Endabgabe/html-warenkorb/warenkorb.css b/Endabgabe/html-warenkorb/warenkorb.css index 9b29a9c..6b4f532 100644 --- a/Endabgabe/html-warenkorb/warenkorb.css +++ b/Endabgabe/html-warenkorb/warenkorb.css @@ -1,97 +1,97 @@ -@media screen and (min-width: 0px) { - - body { - background-image: url(../html-shop/images/background.png); - font-size: 20px; - } - - #mainContainer { - display: flex; - flex-direction: column; - align-items: center; - /*align-items: stretch;*/ - } - - div.product, form { - font-family: sans-serif; - display: flex; - flex-direction: column; - align-items: stretch; - border: dotted rgb(0, 25, 136) 3px; - border-radius: 50px; - background-color: rgba(0, 102, 255, 70%); - color: white; - padding: 10px; - align-items: center; - margin: 20px 0px; - } - div.product button { - background-color: rgba(0,0,0,50%); - border: solid rgb(0, 25, 136) 2px; - border-radius: 20px; - color: white; - } - div.product span { - display: block; - } - - form { - padding: 20px 75px; - display: flex; - flex-direction: column; - align-items: center; - } - form input { - margin: 0px 0px 10px 0px; - } - - button#sendOrder { - margin-bottom: 30px; - width: 90%; - color: white; - background-color: red; - border: solid black 3px; - border-radius: 50px; - font-size: 20px; - } - -} -@media screen and (min-width: 601px) { - body { - font-size: 40px; - } - - div.product button { - font-size: 25px; - } - - button#sendOrder{ - height: 50px; - font-size: 40px; - width: 75%; - } - - form input { - font-size: 20px; - } - -} -@media screen and (min-width: 1025px) { - body { - font-size: 20px; - } - - div.product button:hover { - background-color: red; - } - - button#sendOrder{ - height: 50px; - font-size: 40px; - width: 50%; - } - button#sendOrder:hover{ - background-color: black; - color: red; - } +@media screen and (min-width: 0px) { + + body { + background-image: url(../html-shop/images/background.png); + font-size: 20px; + } + + #mainContainer { + display: flex; + flex-direction: column; + align-items: center; + /*align-items: stretch;*/ + } + + div.product, form { + font-family: sans-serif; + display: flex; + flex-direction: column; + align-items: stretch; + border: dotted rgb(0, 25, 136) 3px; + border-radius: 50px; + background-color: rgba(0, 102, 255, 70%); + color: white; + padding: 10px; + align-items: center; + margin: 20px 0px; + } + div.product button { + background-color: rgba(0,0,0,50%); + border: solid rgb(0, 25, 136) 2px; + border-radius: 20px; + color: white; + } + div.product span { + display: block; + } + + form { + padding: 20px 75px; + display: flex; + flex-direction: column; + align-items: center; + } + form input { + margin: 0px 0px 10px 0px; + } + + button#sendOrder { + margin-bottom: 30px; + width: 90%; + color: white; + background-color: red; + border: solid black 3px; + border-radius: 50px; + font-size: 20px; + } + +} +@media screen and (min-width: 601px) { + body { + font-size: 40px; + } + + div.product button { + font-size: 25px; + } + + button#sendOrder{ + height: 50px; + font-size: 40px; + width: 75%; + } + + form input { + font-size: 20px; + } + +} +@media screen and (min-width: 1025px) { + body { + font-size: 20px; + } + + div.product button:hover { + background-color: red; + } + + button#sendOrder{ + height: 50px; + font-size: 40px; + width: 50%; + } + button#sendOrder:hover{ + background-color: black; + color: red; + } } \ No newline at end of file diff --git a/Endabgabe/html-warenkorb/warenkorb.html b/Endabgabe/html-warenkorb/warenkorb.html index a448f09..ea3c8c4 100644 --- a/Endabgabe/html-warenkorb/warenkorb.html +++ b/Endabgabe/html-warenkorb/warenkorb.html @@ -1,65 +1,65 @@ - - - - - Warenkorb - - - - - - - - - -
-
- -
-  0 -
-
-
- -
-
-
-
- - - - - - - - - - - - - -
- - - -
-
-
-
- ( - Disclaimer - ) - Ich verdiene mit dieser Website kein Geld -
-
- - + + + + + Warenkorb + + + + + + + + + +
+
+ +
+  0 +
+
+
+ +
+
+
+
+ + + + + + + + + + + + + +
+ + + +
+
+
+
+ ( - Disclaimer - ) + Ich verdiene mit dieser Website kein Geld +
+
+ + \ No newline at end of file diff --git a/Endabgabe/index.css b/Endabgabe/index.css index 5ef2511..6daec66 100644 --- a/Endabgabe/index.css +++ b/Endabgabe/index.css @@ -1,145 +1,145 @@ -@media screen and (min-width: 0px) { - - /* Die Seite ist auf Mindestbreite von 333px ausgelegt */ - - body { - font-size: 10px; - margin: 0px; - height: 100%; - width: 100%; - /*background-image: url(images/sunrise-1014712_1920.jpg); - background-position: 50% 10%; - background-repeat: no-repeat; - background-size: cover;*/ - } - - main { - padding: 0px 10px; - } - - .top-nav { - color: white; - background-color: black; - display: grid; - grid-template-columns: 70% 25%; - grid-column-gap: 5%; - text-align: center; - height: 10vh; - } - .top-nav a { - font-size: 40px; - text-decoration: none; - color: white; - } - .top-nav #warenkorb { - font-size: 30px; - position: relative; - right: 10px; - } - .top-nav #logo, #warenkorb { - display: flex; - flex-direction: row; - align-items: center; - align-content: center; - justify-content: center; - } - .top-nav img { - height: 60px; - width: 220px; - } - - .bottom-nav { - background-color: hsla(0, 0%, 0%, 0%); - text-align: center; - } - .bottom-nav ul { - list-style: none; - margin: 0px; - padding: 5px; - } - .bottom-nav ul li { - background-color: rgb(0, 102, 255); - margin: 10px 0px; - border: solid rgb(0, 25, 136) 2px; - - border-radius: 10px; - } - .bottom-nav ul a { - text-decoration: none; - color: white; - } - - footer div { - margin-top: 200px; - background-color: rgb(43, 43, 43); - color: white; - text-align: center; - font-size: 1em; - height: 200px; - width: 100%; - position: relative; - bottom: 0px; - display: flex; - flex-direction: column; - justify-content: space-evenly; - align-items: center; - } - -} -@media screen and (min-width: 601px) { - body { - font-size: 40px; - } - - div.top-nav { - height: 120px; - } - - .top-nav #warenkorb { - font-size: 70px; - } - .top-nav img { - height: 100px; - width: 380px; - } - -} -@media screen and (min-width: 1025px) { - body { - font-size: 40px; - } - - .top-nav #warenkorb a:hover { - color:rgb(0, 102, 255); - } - div.top-nav { - height: 150px; - } - .top-nav img { - height: 120px; - width: 460px; - } - - .bottom-nav { - background-color: rgb(0, 102, 255); - } - .bottom-nav ul { - font-size: 30px; - list-style: none; - display: flex; - flex-direction: row; - justify-content: space-evenly; - margin: 0px; - padding: 0px; - } - .bottom-nav ul li { - border: none; - } - .bottom-nav ul a { - text-decoration: none; - color: white; - } - .bottom-nav ul a:hover { - color: black; - } +@media screen and (min-width: 0px) { + + /* Die Seite ist auf Mindestbreite von 333px ausgelegt */ + + body { + font-size: 10px; + margin: 0px; + height: 100%; + width: 100%; + /*background-image: url(images/sunrise-1014712_1920.jpg); + background-position: 50% 10%; + background-repeat: no-repeat; + background-size: cover;*/ + } + + main { + padding: 0px 10px; + } + + .top-nav { + color: white; + background-color: black; + display: grid; + grid-template-columns: 70% 25%; + grid-column-gap: 5%; + text-align: center; + height: 10vh; + } + .top-nav a { + font-size: 40px; + text-decoration: none; + color: white; + } + .top-nav #warenkorb { + font-size: 30px; + position: relative; + right: 10px; + } + .top-nav #logo, #warenkorb { + display: flex; + flex-direction: row; + align-items: center; + align-content: center; + justify-content: center; + } + .top-nav img { + height: 60px; + width: 220px; + } + + .bottom-nav { + background-color: hsla(0, 0%, 0%, 0%); + text-align: center; + } + .bottom-nav ul { + list-style: none; + margin: 0px; + padding: 5px; + } + .bottom-nav ul li { + background-color: rgb(0, 102, 255); + margin: 10px 0px; + border: solid rgb(0, 25, 136) 2px; + + border-radius: 10px; + } + .bottom-nav ul a { + text-decoration: none; + color: white; + } + + footer div { + margin-top: 200px; + background-color: rgb(43, 43, 43); + color: white; + text-align: center; + font-size: 1em; + height: 200px; + width: 100%; + position: relative; + bottom: 0px; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + } + +} +@media screen and (min-width: 601px) { + body { + font-size: 40px; + } + + div.top-nav { + height: 120px; + } + + .top-nav #warenkorb { + font-size: 70px; + } + .top-nav img { + height: 100px; + width: 380px; + } + +} +@media screen and (min-width: 1025px) { + body { + font-size: 40px; + } + + .top-nav #warenkorb a:hover { + color:rgb(0, 102, 255); + } + div.top-nav { + height: 150px; + } + .top-nav img { + height: 120px; + width: 460px; + } + + .bottom-nav { + background-color: rgb(0, 102, 255); + } + .bottom-nav ul { + font-size: 30px; + list-style: none; + display: flex; + flex-direction: row; + justify-content: space-evenly; + margin: 0px; + padding: 0px; + } + .bottom-nav ul li { + border: none; + } + .bottom-nav ul a { + text-decoration: none; + color: white; + } + .bottom-nav ul a:hover { + color: black; + } } \ No newline at end of file diff --git a/Endabgabe/index.html b/Endabgabe/index.html index 65d3be3..cb01bf1 100644 --- a/Endabgabe/index.html +++ b/Endabgabe/index.html @@ -1,42 +1,42 @@ - - - - - - - - - - - - - Nice Ice - - -
-
- -
-  0 -
-
-
- -
-
- Eis gefällig? - Na klar! - -
-
- + + + + + + + + + + + + + Nice Ice + + +
+
+ +
+  0 +
+
+
+ +
+
+ Eis gefällig? + Na klar! + +
+
+ \ No newline at end of file diff --git a/Endabgabe/script-backend/mongo commands.txt b/Endabgabe/script-backend/mongo commands.txt index c929594..23c9c67 100644 --- a/Endabgabe/script-backend/mongo commands.txt +++ b/Endabgabe/script-backend/mongo commands.txt @@ -1,13 +1,13 @@ -=> usage - -/mongo || call Database - => /mongo/nameOfCollection - -/nameOfCollection || choose, which Collection you're calling - => /nameOfCollection/furtherCommand - -/findCollection || return a whole collection -/findEntry || return a single entry - -/insertEntry || insert a single entry -/removeEntry || remove a single entry +=> usage + +/mongo || call Database + => /mongo/nameOfCollection + +/nameOfCollection || choose, which Collection you're calling + => /nameOfCollection/furtherCommand + +/findCollection || return a whole collection +/findEntry || return a single entry + +/insertEntry || insert a single entry +/removeEntry || remove a single entry diff --git a/Endabgabe/script-backend/useMongo.js b/Endabgabe/script-backend/useMongo.js index cb68e12..15f4624 100644 --- a/Endabgabe/script-backend/useMongo.js +++ b/Endabgabe/script-backend/useMongo.js @@ -49,7 +49,7 @@ var handleMongo; handleMongo.insertObject = insertObject; async function removeEntry(_collection, _entry) { connectCollection(_collection); - if (!(_entry.id == undefined)) { + if (_entry._id != undefined) { let id = _entry._id; let objID = new Mongo.ObjectID(id); await currentCollection.deleteOne({ "_id": objID }); diff --git a/Endabgabe/script-backend/useMongo.js.map b/Endabgabe/script-backend/useMongo.js.map index e4ed90c..b659e7b 100644 --- a/Endabgabe/script-backend/useMongo.js.map +++ b/Endabgabe/script-backend/useMongo.js.map @@ -1 +1 @@ -{"version":3,"file":"useMongo.js","sourceRoot":"","sources":["useMongo.ts"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"useMongo.js","sourceRoot":"","sources":["useMongo.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/Endabgabe/script-backend/useMongo.ts b/Endabgabe/script-backend/useMongo.ts index bc66b41..2902700 100644 --- a/Endabgabe/script-backend/useMongo.ts +++ b/Endabgabe/script-backend/useMongo.ts @@ -1,98 +1,98 @@ -import * as Mongo from "mongodb"; - -export namespace handleMongo { - - export interface ProduktObj { - [type: string]: string | string[] | number | undefined; - } - - let productsCollection: Mongo.Collection; - let ordersCollection: Mongo.Collection; - let currentCollection: Mongo.Collection; - let dbUrl: string = ""; - - function chooseUrl(_whichDB: string): void { - if (_whichDB == "local") - dbUrl = "mongodb://127.0.0.1:27017/"; - if (_whichDB == "remote") - dbUrl = "mongodb+srv://AdminForUse:XV8MXEdBYuwXtQnc@ichstudieremitgis-jfrz9.mongodb.net/IchStudiereMitGiS?retryWrites=true&w=majority"; - } - - export async function connectDB(_whichDB: string): Promise { // _url: string - chooseUrl(_whichDB); - let options: Mongo.MongoClientOptions = { useNewUrlParser: true, useUnifiedTopology: true }; - let mongoClient: Mongo.MongoClient = new Mongo.MongoClient(dbUrl, options); - await mongoClient.connect(); - productsCollection = mongoClient.db("NiceIce").collection("Products"); - ordersCollection = mongoClient.db("NiceIce").collection("Orders"); - console.log("Database connection: ", productsCollection != undefined); - } - - export async function connectCollection(_collection: string): Promise { - if (_collection == "products") - currentCollection = productsCollection; - else if (_collection == "orders") - currentCollection = ordersCollection; - } - - export function insertEntry(_collection: string, _order: ProduktObj): void { - connectCollection(_collection); - console.log("_order", _order); - currentCollection.insertOne(_order); - } - - export async function insertObject(_collection: string, _order: ProduktObj[]): Promise { - debugger; - connectCollection(_collection); - console.log("this _collection: ", _order); - //let replacement: ProduktObj[] = JSON.parse(JSON.stringify(_order).split("_id").join("old_id")); - await currentCollection.insert(_order[0]); - await currentCollection.insert(_order[1]); - console.log("_collection: ", _order); - } - - export async function removeEntry(_collection: string, _entry: ProduktObj): Promise { - connectCollection(_collection); - if (!(_entry.id == undefined)) { - let id: string = _entry._id; - let objID: Mongo.ObjectID = new Mongo.ObjectID(id); - await currentCollection.deleteOne({ "_id": objID }); - } - else { - await currentCollection.deleteMany({ "Nr": _entry.Nr}); - } - } - - export async function countEntries(_collection: string): Promise { - connectCollection(_collection); - let entryCount: number = await currentCollection.count({}); - return entryCount; - } - - export async function findCollection(_collection: string): Promise { - connectCollection(_collection); - let foundCollection: ProduktObj[] = await currentCollection.find().sort({ category: 1 }).toArray(); - return foundCollection; - } - - export async function findEntry(_collection: string, _entry: ProduktObj): Promise { - connectCollection(_collection); - let id: string = _entry._id; - let objID: Mongo.ObjectID = new Mongo.ObjectID(id); - let foundEntry: ProduktObj = await currentCollection.findOne({_id: objID})!; - return foundEntry; - } - - export async function updateEntry(_collection: string, _entry: ProduktObj): Promise { - connectCollection(_collection); - let id: string = _entry._id; - let objID: Mongo.ObjectID = new Mongo.ObjectID(id); - delete _entry._id; - console.log("entry", _entry); - if (_entry.orderCount != undefined) - currentCollection.updateOne({_id: objID}, {$set: {orderCount: (_entry.orderCount)}}); - else - currentCollection.updateOne({_id: objID}, {$set: _entry}); - } - +import * as Mongo from "mongodb"; + +export namespace handleMongo { + + export interface ProduktObj { + [type: string]: string | string[] | number | undefined; + } + + let productsCollection: Mongo.Collection; + let ordersCollection: Mongo.Collection; + let currentCollection: Mongo.Collection; + let dbUrl: string = ""; + + function chooseUrl(_whichDB: string): void { + if (_whichDB == "local") + dbUrl = "mongodb://127.0.0.1:27017/"; + if (_whichDB == "remote") + dbUrl = "mongodb+srv://AdminForUse:XV8MXEdBYuwXtQnc@ichstudieremitgis-jfrz9.mongodb.net/IchStudiereMitGiS?retryWrites=true&w=majority"; + } + + export async function connectDB(_whichDB: string): Promise { // _url: string + chooseUrl(_whichDB); + let options: Mongo.MongoClientOptions = { useNewUrlParser: true, useUnifiedTopology: true }; + let mongoClient: Mongo.MongoClient = new Mongo.MongoClient(dbUrl, options); + await mongoClient.connect(); + productsCollection = mongoClient.db("NiceIce").collection("Products"); + ordersCollection = mongoClient.db("NiceIce").collection("Orders"); + console.log("Database connection: ", productsCollection != undefined); + } + + export async function connectCollection(_collection: string): Promise { + if (_collection == "products") + currentCollection = productsCollection; + else if (_collection == "orders") + currentCollection = ordersCollection; + } + + export function insertEntry(_collection: string, _order: ProduktObj): void { + connectCollection(_collection); + console.log("_order", _order); + currentCollection.insertOne(_order); + } + + export async function insertObject(_collection: string, _order: ProduktObj[]): Promise { + debugger; + connectCollection(_collection); + console.log("this _collection: ", _order); + //let replacement: ProduktObj[] = JSON.parse(JSON.stringify(_order).split("_id").join("old_id")); + await currentCollection.insert(_order[0]); + await currentCollection.insert(_order[1]); + console.log("_collection: ", _order); + } + + export async function removeEntry(_collection: string, _entry: ProduktObj): Promise { + connectCollection(_collection); + if (_entry._id != undefined) { + let id: string = _entry._id; + let objID: Mongo.ObjectID = new Mongo.ObjectID(id); + await currentCollection.deleteOne({ "_id": objID }); + } + else { + await currentCollection.deleteMany({ "Nr": _entry.Nr}); + } + } + + export async function countEntries(_collection: string): Promise { + connectCollection(_collection); + let entryCount: number = await currentCollection.count({}); + return entryCount; + } + + export async function findCollection(_collection: string): Promise { + connectCollection(_collection); + let foundCollection: ProduktObj[] = await currentCollection.find().sort({ category: 1 }).toArray(); + return foundCollection; + } + + export async function findEntry(_collection: string, _entry: ProduktObj): Promise { + connectCollection(_collection); + let id: string = _entry._id; + let objID: Mongo.ObjectID = new Mongo.ObjectID(id); + let foundEntry: ProduktObj = await currentCollection.findOne({_id: objID})!; + return foundEntry; + } + + export async function updateEntry(_collection: string, _entry: ProduktObj): Promise { + connectCollection(_collection); + let id: string = _entry._id; + let objID: Mongo.ObjectID = new Mongo.ObjectID(id); + delete _entry._id; + console.log("entry", _entry); + if (_entry.orderCount != undefined) + currentCollection.updateOne({_id: objID}, {$set: {orderCount: (_entry.orderCount)}}); + else + currentCollection.updateOne({_id: objID}, {$set: _entry}); + } + } \ No newline at end of file diff --git a/Endabgabe/script-backend/useServer.ts b/Endabgabe/script-backend/useServer.ts index d071059..da47c01 100644 --- a/Endabgabe/script-backend/useServer.ts +++ b/Endabgabe/script-backend/useServer.ts @@ -1,118 +1,118 @@ -import * as Http from "http"; -import * as url from "url"; -import { ParsedUrlQuery } from "querystring"; -import { handleMongo as useMongo } from "./useMongo"; - -//mongodb + srv://AdminForUse:XV8MXEdBYuwXtQnc@ichstudieremitgis-jfrz9.mongodb.net/IchStudiereMitGiS?retryWrites=true&w=majority -//http://localhost:8100 -//https://theoneandgis.herokuapp.com - -export namespace ServerSide { - - console.log("Starting server"); - let port: number = Number(process.env.PORT); - if (!port) - port = 8100; - - let server: Http.Server = Http.createServer(); - server.addListener("request", handleRequest); - server.addListener("listening", handleListen); - server.listen(port); - - let myArgs: string[] = process.argv.slice(2); - let whichDB: string = myArgs[0]; - useMongo.connectDB(whichDB); - - function handleListen(): void { - console.log("Your server Listening"); - } - - async function handleRequest(_request: Http.IncomingMessage, _response: Http.ServerResponse): Promise { - console.log("http://web-url" + `${_request.url}`); // Hier müsste ggf. auch zu Heruko gewechselt werden, wenn es von Bedeutung ist - - let myData: url.UrlWithParsedQuery = url.parse(`${_request.url}`, true); - let myQuery: ParsedUrlQuery = myData.query; - console.log("myQuery", myQuery); - let myQueryObject: useMongo.ProduktObj = myQuery; - let myQueryString: string = JSON.stringify(myQuery); - let responseUrlString: string = _request.url; - //let splitString: string = (_request.url).slice(0, 9); - let post: useMongo.ProduktObj = {}; - - _response.setHeader("content-type", "application/json"); - _response.setHeader("Access-Control-Allow-Origin", "*"); - console.log("_request.method", _request.method); - if (_request.method == "POST") { - let body: string = ""; - _request.on("data", data => { - body += data; - }); - _request.on("end", async () => { - post = JSON.parse(body); - console.log("post: ", post); - post = await JSON.parse(body); - responseUrlString = "/mongo/orders/insertEntry"; - handleAction(_request, _response, myQueryString, responseUrlString, post); - }); - } - else { - await handleAction(_request, _response, myQueryString, responseUrlString, myQueryObject); - _response.end(); - } - } - - async function handleAction(_request: Http.IncomingMessage, _response: Http.ServerResponse, _myQueryString: string, _responseUrlString: string, _orderObj: useMongo.ProduktObj): Promise { - console.log("handleAction", _orderObj); - let whichCollection: string = ""; - if ( _responseUrlString.includes("/products") ) { - whichCollection = "products"; - } - if (_responseUrlString.includes("/orders")) { - whichCollection = "orders"; - } - - if ( _responseUrlString.includes("/mongo") ) { - await mongoAction(_response, _myQueryString, whichCollection, _responseUrlString, _orderObj); - } - console.log("end"); - _response.end(); - } - - async function mongoAction(_response: Http.ServerResponse, _query: string, _whichCollection: string, _command: string, _orderObj: useMongo.ProduktObj): Promise { - let myJsonObj: useMongo.ProduktObj = JSON.parse(_query); - console.log("mongoAction", _orderObj); - - if (_command.includes("/findCollection")) { - let value: useMongo.ProduktObj[] = await useMongo.findCollection(_whichCollection); - let handleThis: string = JSON.stringify(value); - console.log("handleThis", handleThis); - _response.write(handleThis); - } - if (_command.includes("/findEntry")) { - let foundEntry: useMongo.ProduktObj = await useMongo.findEntry(_whichCollection, _orderObj); - console.log("foundEntry", foundEntry); - _response.write(JSON.stringify(foundEntry)); - } - if (_command.includes("/updateEntry")) { - useMongo.updateEntry(_whichCollection, _orderObj); - _response.write(_query); // technically no response - } - /*if (_command.includes("/insertObject")) { - await useMongo.insertObject(_whichCollection, _orderObj); - //_response.write(_query); // technically no response - }*/ - if (_command.includes("/insertEntry")) { - useMongo.insertEntry(_whichCollection, _orderObj); //myJsonObj - _response.write(_query); // technically no response - } - if (_command.includes("/removeEntry")) { - await useMongo.removeEntry(_whichCollection, myJsonObj); - _response.write(`{"":""}`); // technically no response - } - if (_command.includes("/countEntries")) { - let countNumber: number = await useMongo.countEntries(_whichCollection); - _response.write(`{"orderID":"${countNumber}"}`); - } - } - -} +import * as Http from "http"; +import * as url from "url"; +import { ParsedUrlQuery } from "querystring"; +import { handleMongo as useMongo } from "./useMongo"; + +//mongodb + srv://AdminForUse:XV8MXEdBYuwXtQnc@ichstudieremitgis-jfrz9.mongodb.net/IchStudiereMitGiS?retryWrites=true&w=majority +//http://localhost:8100 +//https://theoneandgis.herokuapp.com + +export namespace ServerSide { + + console.log("Starting server"); + let port: number = Number(process.env.PORT); + if (!port) + port = 8100; + + let server: Http.Server = Http.createServer(); + server.addListener("request", handleRequest); + server.addListener("listening", handleListen); + server.listen(port); + + let myArgs: string[] = process.argv.slice(2); + let whichDB: string = myArgs[0]; + useMongo.connectDB(whichDB); + + function handleListen(): void { + console.log("Your server Listening"); + } + + async function handleRequest(_request: Http.IncomingMessage, _response: Http.ServerResponse): Promise { + console.log("http://web-url" + `${_request.url}`); // Hier müsste ggf. auch zu Heruko gewechselt werden, wenn es von Bedeutung ist + + let myData: url.UrlWithParsedQuery = url.parse(`${_request.url}`, true); + let myQuery: ParsedUrlQuery = myData.query; + console.log("myQuery", myQuery); + let myQueryObject: useMongo.ProduktObj = myQuery; + let myQueryString: string = JSON.stringify(myQuery); + let responseUrlString: string = _request.url; + //let splitString: string = (_request.url).slice(0, 9); + let post: useMongo.ProduktObj = {}; + + _response.setHeader("content-type", "application/json"); + _response.setHeader("Access-Control-Allow-Origin", "*"); + console.log("_request.method", _request.method); + if (_request.method == "POST") { + let body: string = ""; + _request.on("data", data => { + body += data; + }); + _request.on("end", async () => { + post = JSON.parse(body); + console.log("post: ", post); + post = await JSON.parse(body); + responseUrlString = "/mongo/orders/insertEntry"; + handleAction(_request, _response, myQueryString, responseUrlString, post); + }); + } + else { + await handleAction(_request, _response, myQueryString, responseUrlString, myQueryObject); + _response.end(); + } + } + + async function handleAction(_request: Http.IncomingMessage, _response: Http.ServerResponse, _myQueryString: string, _responseUrlString: string, _orderObj: useMongo.ProduktObj): Promise { + console.log("handleAction", _orderObj); + let whichCollection: string = ""; + if ( _responseUrlString.includes("/products") ) { + whichCollection = "products"; + } + if (_responseUrlString.includes("/orders")) { + whichCollection = "orders"; + } + + if ( _responseUrlString.includes("/mongo") ) { + await mongoAction(_response, _myQueryString, whichCollection, _responseUrlString, _orderObj); + } + console.log("end"); + _response.end(); + } + + async function mongoAction(_response: Http.ServerResponse, _query: string, _whichCollection: string, _command: string, _orderObj: useMongo.ProduktObj): Promise { + let myJsonObj: useMongo.ProduktObj = JSON.parse(_query); + console.log("mongoAction", _orderObj); + + if (_command.includes("/findCollection")) { + let value: useMongo.ProduktObj[] = await useMongo.findCollection(_whichCollection); + let handleThis: string = JSON.stringify(value); + console.log("handleThis", handleThis); + _response.write(handleThis); + } + if (_command.includes("/findEntry")) { + let foundEntry: useMongo.ProduktObj = await useMongo.findEntry(_whichCollection, _orderObj); + console.log("foundEntry", foundEntry); + _response.write(JSON.stringify(foundEntry)); + } + if (_command.includes("/updateEntry")) { + useMongo.updateEntry(_whichCollection, _orderObj); + _response.write(_query); // technically no response + } + /*if (_command.includes("/insertObject")) { + await useMongo.insertObject(_whichCollection, _orderObj); + //_response.write(_query); // technically no response + }*/ + if (_command.includes("/insertEntry")) { + useMongo.insertEntry(_whichCollection, _orderObj); //myJsonObj + _response.write(_query); // technically no response + } + if (_command.includes("/removeEntry")) { + await useMongo.removeEntry(_whichCollection, myJsonObj); + _response.write(`{"":""}`); // technically no response + } + if (_command.includes("/countEntries")) { + let countNumber: number = await useMongo.countEntries(_whichCollection); + _response.write(`{"orderID":"${countNumber}"}`); + } + } + +} diff --git a/Endabgabe/script-frontend/admin.js b/Endabgabe/script-frontend/admin.js index ea8a32a..ef6ddab 100644 --- a/Endabgabe/script-frontend/admin.js +++ b/Endabgabe/script-frontend/admin.js @@ -1,7 +1,7 @@ "use strict"; var frontShop; (function (frontShop) { - let serverUrl = "https://theoneandgis.herokuapp.com"; + let serverUrl = "http://localhost:8100"; init(); async function init() { await getOrderList(); @@ -27,37 +27,37 @@ var frontShop; previousNr = iterator.Nr; } if (!(iterator.vorname == undefined)) { - table.innerHTML = ` - - Bestellung - Nr. ${iterator.Nr} - - - Preis - ${iterator.orderPrice} € - - Name - ${iterator.vorname} ${iterator.nachname} - - - Straße - ${iterator.straße} - - - Wohnort - ${iterator.postleitzahl} - + table.innerHTML = ` + + Bestellung + Nr. ${iterator.Nr} + + + Preis + ${iterator.orderPrice} € + + Name + ${iterator.vorname} ${iterator.nachname} + + + Straße + ${iterator.straße} + + + Wohnort + ${iterator.postleitzahl} + `; } else { - table.innerHTML += ` - - Bestellung - Nr. ${iterator.Nr} - - - Preis - ${iterator.productPrice}€ + table.innerHTML += ` + + Bestellung + Nr. ${iterator.Nr} + + + Preis + ${iterator.productPrice}€ `; for (const key in iterator) { switch (key) { @@ -97,8 +97,8 @@ var frontShop; document.querySelector("#tableDiv").append(table); let div = document.createElement("div"); div.classList.add("buttonDiv"); - div.innerHTML = ` - + div.innerHTML = ` + `; document.querySelector("#tableDiv").append(div); } diff --git a/Endabgabe/script-frontend/admin.js.map b/Endabgabe/script-frontend/admin.js.map index 7d0b8da..f318cd0 100644 --- a/Endabgabe/script-frontend/admin.js.map +++ b/Endabgabe/script-frontend/admin.js.map @@ -1 +1 @@ -{"version":3,"file":"admin.js","sourceRoot":"","sources":["admin.ts"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"admin.js","sourceRoot":"","sources":["admin.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/Endabgabe/script-frontend/admin.ts b/Endabgabe/script-frontend/admin.ts index 284e606..9d23de9 100644 --- a/Endabgabe/script-frontend/admin.ts +++ b/Endabgabe/script-frontend/admin.ts @@ -1,201 +1,201 @@ - -namespace frontShop { - - interface Products { - [type: string]: string | number; - } - - let serverUrl: string = "https://theoneandgis.herokuapp.com"; - - init(); - - async function init(): Promise { - await getOrderList(); - addListening(); - fixCartCount(); - } - async function getOrderList(): Promise { - let url: string = serverUrl + "/mongo/orders/findCollection" + "?"; - let response: Response = await fetch(url); - let jsonResponse: Products[] = await response.json(); - let previousNr: number = -1; - //(document.querySelector("#tableDiv")).innerHTML = JSON.stringify(jsonResponse); - - for (const iterator of jsonResponse) { - if (iterator.orderCount != undefined) - continue; - let table: HTMLTableElement = document.createElement("table"); - - if (previousNr != iterator.Nr) { - let button: HTMLButtonElement = document.createElement("button"); - button.setAttribute("content", `${iterator.Nr}`); - button.classList.add("removeButton"); - button.innerHTML = `Bestellung Nr. ${iterator.Nr} entfernen`; - (document.querySelector("#tableDiv")).append(button); - previousNr = iterator.Nr; - } - - - if (!(iterator.vorname == undefined)) { - table.innerHTML = ` - - Bestellung - Nr. ${iterator.Nr} - - - Preis - ${iterator.orderPrice} € - - Name - ${iterator.vorname} ${iterator.nachname} - - - Straße - ${iterator.straße} - - - Wohnort - ${iterator.postleitzahl} - - `; - } - else { - table.innerHTML += ` - - Bestellung - Nr. ${iterator.Nr} - - - Preis - ${iterator.productPrice}€ - `; - for (const key in iterator) { - switch (key) { - case ("container"): table.innerHTML += `${key}${iterator.container}`; - break; - case ("flavour1"): table.innerHTML += `${key}${iterator.flavour1}`; - break; - case ("flavour2"): table.innerHTML += `${key}${iterator.flavour2}`; - break; - case ("flavour3"): table.innerHTML += `${key}${iterator.flavour3}`; - break; - case ("flavour4"): table.innerHTML += `${key}${iterator.flavour4}`; - break; - case ("flavour5"): table.innerHTML += `${key}${iterator.flavour5}`; - break; - case ("flavour6"): table.innerHTML += `${key}${iterator.flavour6}`; - break; - case ("topping1"): table.innerHTML += `${key}${iterator.topping1}`; - break; - case ("topping2"): table.innerHTML += `${key}${iterator.topping2}`; - break; - case ("topping3"): table.innerHTML += `${key}${iterator.topping3}`; - break; - } - } - - } - (document.querySelector("#tableDiv")).append(table); - let div: HTMLDivElement = document.createElement("div"); - div.classList.add("buttonDiv"); - div.innerHTML = ` - - `; - (document.querySelector("#tableDiv")).append(div); - } - } - - function addListening(): void { - let elementList: NodeListOf = document.querySelectorAll(".removeOne"); - for (const iterator of elementList) - iterator.addEventListener("click", removeDataID); - let elementList2: NodeListOf = document.querySelectorAll(".removeButton"); - for (const iterator of elementList2) - iterator.addEventListener("click", removeDataNR); - let elementList3: NodeListOf = document.querySelectorAll(".editOne"); - for (const iterator of elementList3) - iterator.addEventListener("click", editData); - } - - async function removeDataID(_event: Event): Promise { - await removeData(_event, "id"); - } - - async function removeDataNR(_event: Event): Promise { - await removeData(_event, "order"); - } - - async function removeData(_event: Event, _parameter: string): Promise { - let target: HTMLElement = (_event.target); - let query: string = ""; - if (_parameter == "id") - query = `_id=${target.getAttribute("content")!}`; - else if (_parameter == "order") - query = `Nr=${target.getAttribute("content")!}`; - console.log(query); - let url: string = serverUrl + "/mongo/orders/removeEntry/?" + query; - await fetch(url); - location.reload(); - } - - function editData(_event: Event): void { - - let target: HTMLElement = (_event.target); - let obj: Products = JSON.parse(target.getAttribute("content")!); - let div: HTMLDivElement = document.createElement("div"); - div.setAttribute("id", "formDiv"); - div.innerHTML = `
`; - if ((document.querySelector("#myForm")) != null) - (document.querySelector("#tableDiv")).removeChild(div); - (document.querySelector("#tableDiv")).append(div); - for (const iterator in obj) { - let label: HTMLLabelElement = document.createElement("label"); - label.setAttribute("for", iterator); - label.innerHTML = `${iterator}`; - let input: HTMLInputElement = document.createElement("input"); - input.setAttribute("type", "text"); - input.setAttribute("name", `${iterator}`); - input.setAttribute("id", `${iterator}`); - input.setAttribute("value", obj[iterator]); - - if (iterator == "_id") { - input.setAttribute("readonly", ""); - } - else { - input.setAttribute("onfocus", `if(this.value == "${obj[iterator]}") this.value=""`); - input.setAttribute("onblur", `if(this.value == "") this.value="${obj[iterator]}"`); - } - - (document.querySelector("#myForm")).append(label); - (document.querySelector("#myForm")).append(input); - } - let button: HTMLButtonElement = document.createElement("button"); - button.setAttribute("id", "setAttribute"); - button.innerHTML = "Bestätigung"; - button.addEventListener("click", confirmForm); - (document.querySelector("#myForm")).append(button); - } - - async function confirmForm(): Promise { - let formData: FormData = new FormData(document.forms[0]); - let url: string = ""; - //tslint:disable-next-line: no-any - let query: URLSearchParams = new URLSearchParams(formData); - url = serverUrl + "/" + "mongo" + "/" + "orders" + "/" + "updateEntry" + "/" + "?" + query.toString(); - await fetch(url); - } - - function fixCartCount(): void { - if (localStorage["CartCount"] != undefined) - localStorage.removeItem("CartCount"); - let count: number = 0; - for (const key in localStorage) { - if (key.includes("Combination")) { - count++; - } - } - localStorage.setItem("CartCount", `${count}`); - (document.querySelector("#warenkorb span")).innerHTML = `${localStorage.CartCount}`; - } - + +namespace frontShop { + + interface Products { + [type: string]: string | number; + } + + let serverUrl: string = "http://localhost:8100"; + + init(); + + async function init(): Promise { + await getOrderList(); + addListening(); + fixCartCount(); + } + async function getOrderList(): Promise { + let url: string = serverUrl + "/mongo/orders/findCollection" + "?"; + let response: Response = await fetch(url); + let jsonResponse: Products[] = await response.json(); + let previousNr: number = -1; + //(document.querySelector("#tableDiv")).innerHTML = JSON.stringify(jsonResponse); + + for (const iterator of jsonResponse) { + if (iterator.orderCount != undefined) + continue; + let table: HTMLTableElement = document.createElement("table"); + + if (previousNr != iterator.Nr) { + let button: HTMLButtonElement = document.createElement("button"); + button.setAttribute("content", `${iterator.Nr}`); + button.classList.add("removeButton"); + button.innerHTML = `Bestellung Nr. ${iterator.Nr} entfernen`; + (document.querySelector("#tableDiv")).append(button); + previousNr = iterator.Nr; + } + + + if (!(iterator.vorname == undefined)) { + table.innerHTML = ` + + Bestellung + Nr. ${iterator.Nr} + + + Preis + ${iterator.orderPrice} € + + Name + ${iterator.vorname} ${iterator.nachname} + + + Straße + ${iterator.straße} + + + Wohnort + ${iterator.postleitzahl} + + `; + } + else { + table.innerHTML += ` + + Bestellung + Nr. ${iterator.Nr} + + + Preis + ${iterator.productPrice}€ + `; + for (const key in iterator) { + switch (key) { + case ("container"): table.innerHTML += `${key}${iterator.container}`; + break; + case ("flavour1"): table.innerHTML += `${key}${iterator.flavour1}`; + break; + case ("flavour2"): table.innerHTML += `${key}${iterator.flavour2}`; + break; + case ("flavour3"): table.innerHTML += `${key}${iterator.flavour3}`; + break; + case ("flavour4"): table.innerHTML += `${key}${iterator.flavour4}`; + break; + case ("flavour5"): table.innerHTML += `${key}${iterator.flavour5}`; + break; + case ("flavour6"): table.innerHTML += `${key}${iterator.flavour6}`; + break; + case ("topping1"): table.innerHTML += `${key}${iterator.topping1}`; + break; + case ("topping2"): table.innerHTML += `${key}${iterator.topping2}`; + break; + case ("topping3"): table.innerHTML += `${key}${iterator.topping3}`; + break; + } + } + + } + (document.querySelector("#tableDiv")).append(table); + let div: HTMLDivElement = document.createElement("div"); + div.classList.add("buttonDiv"); + div.innerHTML = ` + + `; + (document.querySelector("#tableDiv")).append(div); + } + } + + function addListening(): void { + let elementList: NodeListOf = document.querySelectorAll(".removeOne"); + for (const iterator of elementList) + iterator.addEventListener("click", removeDataID); + let elementList2: NodeListOf = document.querySelectorAll(".removeButton"); + for (const iterator of elementList2) + iterator.addEventListener("click", removeDataNR); + let elementList3: NodeListOf = document.querySelectorAll(".editOne"); + for (const iterator of elementList3) + iterator.addEventListener("click", editData); + } + + async function removeDataID(_event: Event): Promise { + await removeData(_event, "id"); + } + + async function removeDataNR(_event: Event): Promise { + await removeData(_event, "order"); + } + + async function removeData(_event: Event, _parameter: string): Promise { + let target: HTMLElement = (_event.target); + let query: string = ""; + if (_parameter == "id") + query = `_id=${target.getAttribute("content")!}`; + else if (_parameter == "order") + query = `Nr=${target.getAttribute("content")!}`; + console.log(query); + let url: string = serverUrl + "/mongo/orders/removeEntry/?" + query; + await fetch(url); + location.reload(); + } + + function editData(_event: Event): void { + + let target: HTMLElement = (_event.target); + let obj: Products = JSON.parse(target.getAttribute("content")!); + let div: HTMLDivElement = document.createElement("div"); + div.setAttribute("id", "formDiv"); + div.innerHTML = `
`; + if ((document.querySelector("#myForm")) != null) + (document.querySelector("#tableDiv")).removeChild(div); + (document.querySelector("#tableDiv")).append(div); + for (const iterator in obj) { + let label: HTMLLabelElement = document.createElement("label"); + label.setAttribute("for", iterator); + label.innerHTML = `${iterator}`; + let input: HTMLInputElement = document.createElement("input"); + input.setAttribute("type", "text"); + input.setAttribute("name", `${iterator}`); + input.setAttribute("id", `${iterator}`); + input.setAttribute("value", obj[iterator]); + + if (iterator == "_id") { + input.setAttribute("readonly", ""); + } + else { + input.setAttribute("onfocus", `if(this.value == "${obj[iterator]}") this.value=""`); + input.setAttribute("onblur", `if(this.value == "") this.value="${obj[iterator]}"`); + } + + (document.querySelector("#myForm")).append(label); + (document.querySelector("#myForm")).append(input); + } + let button: HTMLButtonElement = document.createElement("button"); + button.setAttribute("id", "setAttribute"); + button.innerHTML = "Bestätigung"; + button.addEventListener("click", confirmForm); + (document.querySelector("#myForm")).append(button); + } + + async function confirmForm(): Promise { + let formData: FormData = new FormData(document.forms[0]); + let url: string = ""; + //tslint:disable-next-line: no-any + let query: URLSearchParams = new URLSearchParams(formData); + url = serverUrl + "/" + "mongo" + "/" + "orders" + "/" + "updateEntry" + "/" + "?" + query.toString(); + await fetch(url); + } + + function fixCartCount(): void { + if (localStorage["CartCount"] != undefined) + localStorage.removeItem("CartCount"); + let count: number = 0; + for (const key in localStorage) { + if (key.includes("Combination")) { + count++; + } + } + localStorage.setItem("CartCount", `${count}`); + (document.querySelector("#warenkorb span")).innerHTML = `${localStorage.CartCount}`; + } + } \ No newline at end of file diff --git a/Endabgabe/script-frontend/index.ts b/Endabgabe/script-frontend/index.ts index e8e69d7..60d68d0 100644 --- a/Endabgabe/script-frontend/index.ts +++ b/Endabgabe/script-frontend/index.ts @@ -1,19 +1,19 @@ - -namespace frontShop { - - fixCartCount(); - - function fixCartCount(): void { - if (localStorage["CartCount"] != undefined) - localStorage.removeItem("CartCount"); - let count: number = 0; - for (const key in localStorage) { - if (key.includes("Combination")) { - count++; - } - } - localStorage.setItem("CartCount", `${count}`); - (document.querySelector("#warenkorb span")).innerHTML = `${localStorage.CartCount}`; - } - + +namespace frontShop { + + fixCartCount(); + + function fixCartCount(): void { + if (localStorage["CartCount"] != undefined) + localStorage.removeItem("CartCount"); + let count: number = 0; + for (const key in localStorage) { + if (key.includes("Combination")) { + count++; + } + } + localStorage.setItem("CartCount", `${count}`); + (document.querySelector("#warenkorb span")).innerHTML = `${localStorage.CartCount}`; + } + } \ No newline at end of file diff --git a/Endabgabe/script-frontend/memes.ts b/Endabgabe/script-frontend/memes.ts index 18fbb57..79f453f 100644 --- a/Endabgabe/script-frontend/memes.ts +++ b/Endabgabe/script-frontend/memes.ts @@ -1,29 +1,29 @@ -// Konzept-Idee: https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp - -let pictureNames: string[] = ["GiSBeLike.png", "ItWasAllAMystery.png", "JsTs.png", "LearningTsBeLike.png"]; - -document.querySelector("#buttonLeft")!.addEventListener("click", previousImage); -document.querySelector("#buttonRight")!.addEventListener("click", nextImage); - -function nextImage(): void { - changeImage(1); -} -function previousImage(): void { - changeImage(-1); -} - -function changeImage(_vorzeichen: number): void { - for (const iterator of pictureNames) { - let currentImage: string = (document.querySelector("#imageBox img")!.getAttribute("src")); - if (("images/" + iterator) == currentImage) { - if (pictureNames.indexOf(iterator) == pictureNames.length - 1 && _vorzeichen == +1) - document.querySelector("#imageBox img")!.setAttribute("src", `images/${pictureNames[0]}`); - else if (pictureNames.indexOf(iterator) == 0 && _vorzeichen == -1) - document.querySelector("#imageBox img")!.setAttribute("src", `images/${pictureNames[pictureNames.length - 1]}`); - else - document.querySelector("#imageBox img")!.setAttribute("src", `images/${pictureNames[pictureNames.indexOf(iterator) + _vorzeichen]}`); - break; - } - } -} - +// Konzept-Idee: https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp + +let pictureNames: string[] = ["GiSBeLike.png", "ItWasAllAMystery.png", "JsTs.png", "LearningTsBeLike.png"]; + +document.querySelector("#buttonLeft")!.addEventListener("click", previousImage); +document.querySelector("#buttonRight")!.addEventListener("click", nextImage); + +function nextImage(): void { + changeImage(1); +} +function previousImage(): void { + changeImage(-1); +} + +function changeImage(_vorzeichen: number): void { + for (const iterator of pictureNames) { + let currentImage: string = (document.querySelector("#imageBox img")!.getAttribute("src")); + if (("images/" + iterator) == currentImage) { + if (pictureNames.indexOf(iterator) == pictureNames.length - 1 && _vorzeichen == +1) + document.querySelector("#imageBox img")!.setAttribute("src", `images/${pictureNames[0]}`); + else if (pictureNames.indexOf(iterator) == 0 && _vorzeichen == -1) + document.querySelector("#imageBox img")!.setAttribute("src", `images/${pictureNames[pictureNames.length - 1]}`); + else + document.querySelector("#imageBox img")!.setAttribute("src", `images/${pictureNames[pictureNames.indexOf(iterator) + _vorzeichen]}`); + break; + } + } +} + diff --git a/Endabgabe/script-frontend/shop.js b/Endabgabe/script-frontend/shop.js index 1c77474..88f4bf4 100644 --- a/Endabgabe/script-frontend/shop.js +++ b/Endabgabe/script-frontend/shop.js @@ -1,7 +1,7 @@ "use strict"; var frontShop; (function (frontShop) { - let serverUrl = "https://theoneandgis.herokuapp.com"; + let serverUrl = "http://localhost:8100"; let combinationArray = []; let combinationCount = 0; let tisch = ""; @@ -37,12 +37,12 @@ var frontShop; function printProducts(_jsonResponse) { for (const iterator of _jsonResponse) { delete iterator._id; - document.querySelector(`#${iterator.category}Div`).innerHTML += ` -
- Product
-
${iterator.name.replace("-", " ")}
- -
+ document.querySelector(`#${iterator.category}Div`).innerHTML += ` +
+ Product
+
${iterator.name.replace("-", " ")}
+ +
`; } } @@ -52,7 +52,7 @@ var frontShop; iterator.addEventListener("click", addProduct); document.querySelector("#id_table_0").addEventListener("click", addProduct); document.querySelector("#nextButton").addEventListener("click", addCurrent); - document.querySelector("#sendButton").addEventListener("click", addToLocal); + document.querySelector("#sendButton").addEventListener("click", addOrderToLocal); document.querySelector("#resetButton").addEventListener("click", clearCombination); } function addProduct(_event) { @@ -128,10 +128,13 @@ var frontShop; localStorage.setItem("CartCount", `${count}`); document.querySelector("#warenkorb span").innerHTML = `${localStorage.CartCount}`; } + function addOrderToLocal() { + addToLocal(); + window.location.href = "../html-warenkorb/warenkorb.html"; + } function addToLocal() { combinationArray.push(tisch); localStorage.setItem(`Combination${combinationCount}`, "[" + combinationArray.toLocaleString() + "]"); - window.location.href = "../html-warenkorb/warenkorb.html"; } function displayOrder() { document.querySelector("#displayContainer").innerHTML = ""; diff --git a/Endabgabe/script-frontend/shop.js.map b/Endabgabe/script-frontend/shop.js.map index 7716b25..e876f42 100644 --- a/Endabgabe/script-frontend/shop.js.map +++ b/Endabgabe/script-frontend/shop.js.map @@ -1 +1 @@ -{"version":3,"file":"shop.js","sourceRoot":"","sources":["shop.ts"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"shop.js","sourceRoot":"","sources":["shop.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/Endabgabe/script-frontend/shop.ts b/Endabgabe/script-frontend/shop.ts index f8a728b..b5da56a 100644 --- a/Endabgabe/script-frontend/shop.ts +++ b/Endabgabe/script-frontend/shop.ts @@ -1,166 +1,175 @@ - -namespace frontShop { - - let serverUrl: string = "https://theoneandgis.herokuapp.com"; - let combinationArray: string[] = []; - let combinationCount: number = 0; - let tisch: string = ""; - - interface Products { - [type: string]: string | number; - } - - // create page - - init(); - - async function init(): Promise { - printTopButtons(); - await getProductList(); - addButtonFunctions(); - fixCartCount(); - } - - function printTopButtons(): void { - for (let i: number = 1; i <= 20; i++) { - let button: HTMLButtonElement = document.createElement("button"); - button.setAttribute("id", "id_table_" + `${i}`); - button.setAttribute("content", `{"tisch":"${i}"}`); - button.classList.add("product_button"); - button.innerHTML = `Tisch: ${i}`; - (document.querySelector("#topTable")).append(button); - } - let button: HTMLButtonElement = document.createElement("button"); - button.setAttribute("id", "id_table_0"); - button.setAttribute("content", `{"tisch":"0"}`); - button.innerHTML = "Zum Mitnehmen!"; - (document.querySelector("#topTake")).append(button); - } - - async function getProductList(): Promise { - let url: string = serverUrl + "/mongo/products/findCollection" + "?"; - let response: Response = await fetch(url); - let jsonResponse: Products[] = await response.json(); - printProducts(jsonResponse); - } - - function printProducts(_jsonResponse: Products[]): void { - for (const iterator of _jsonResponse) { - delete iterator._id; - (document.querySelector(`#${iterator.category}Div`)).innerHTML += ` -
- Product
-
${(iterator.name).replace("-", " ")}
- -
- `; - } - } - - function addButtonFunctions(): void { - let buttonList: NodeListOf = document.querySelectorAll(".product_button"); - for (const iterator of buttonList) - iterator.addEventListener("click", addProduct); - - (document.querySelector("#id_table_0")).addEventListener("click", addProduct); - (document.querySelector("#nextButton")).addEventListener("click", addCurrent); - (document.querySelector("#sendButton")).addEventListener("click", addToLocal); - (document.querySelector("#resetButton")).addEventListener("click", clearCombination); - } - - function addProduct(_event: Event): void { - let target: HTMLElement = (_event.target); - let product: Products = JSON.parse(target.getAttribute("content")!); - if (product.tisch != undefined) { - tisch = JSON.stringify(product); - console.log(tisch); - } - - switch (product.category) { - case "container": { - if (checkMaximum(1, product)) { - let index: number = combinationArray.indexOf(combinationArray.find(_element => _element = product.category)!); - combinationArray[index] = JSON.stringify(product); - displayOrder(); - } - else { - combinationArray.push(JSON.stringify(product)); - displayOrder(); - } - break; - } - case "flavour": { - if (!checkMaximum(6, product)) { - combinationArray.push(JSON.stringify(product)); - displayOrder(); - } - break; - } - case "topping": { - if (!checkMaximum(3, product)) { - combinationArray.push(JSON.stringify(product)); - displayOrder(); - } - break; - } - } - console.log("combinationArray", combinationArray); - } - - function checkMaximum(_maximum: number, _targetString: Products): boolean { - let countOccurence: number = 0; - for (let i: number = 0; i < combinationArray.length; i++) { - let checkString: string = combinationArray[i]; - if (checkString.includes(_targetString.category)) - countOccurence++; - if (countOccurence == _maximum) { - alert("Die maximale Anzahl von " + _maximum + " wurde bereits erreicht"); - return true; - } - } - return false; - } - - function addCurrent(): void { - addToLocal(); - clearCombination(); - fixCartCount(); - combinationCount++; - } - - function clearCombination(): void { - combinationArray = []; - displayOrder(); - (document.querySelector("#topContainer")).scrollIntoView(true); - } - - function fixCartCount(): void { - if (localStorage["CartCount"] != undefined) - localStorage.removeItem("CartCount"); - let count: number = 0; - for (const key in localStorage) { - if (key.includes("Combination")) { - count++; - } - } - localStorage.setItem("CartCount", `${count}`); - (document.querySelector("#warenkorb span")).innerHTML = `${localStorage.CartCount}`; - } - - function addToLocal(): void { - combinationArray.push(tisch); - localStorage.setItem(`Combination${combinationCount}`, "[" + combinationArray.toLocaleString() + "]"); - window.location.href = "../html-warenkorb/warenkorb.html"; - } - - function displayOrder(): void { - (document.querySelector("#displayContainer")).innerHTML = ""; - for (let i: number = combinationArray.length - 1; i > -1; i--) { - console.log(combinationArray[i]); - let obj: Products = JSON.parse(combinationArray[i]); - (document.querySelector("#displayContainer")).innerHTML += ``; - } - } - -} - + +namespace frontShop { + + let serverUrl: string = "http://localhost:8100"; + let combinationArray: string[] = []; + let combinationCount: number = 0; + let tisch: string = ""; + + interface Products { + [type: string]: string | number; + } + + // create page + + init(); + + async function init(): Promise { + printTopButtons(); + await getProductList(); + addButtonFunctions(); + fixCartCount(); + } + + function printTopButtons(): void { + for (let i: number = 1; i <= 20; i++) { + let button: HTMLButtonElement = document.createElement("button"); + button.setAttribute("id", "id_table_" + `${i}`); + button.setAttribute("content", `{"tisch":"${i}"}`); + button.classList.add("product_button"); + button.innerHTML = `Tisch: ${i}`; + + (document.querySelector("#topTable")).append(button); + } + + let button: HTMLButtonElement = document.createElement("button"); + button.setAttribute("id", "id_table_0"); + button.setAttribute("content", `{"tisch":"0"}`); + button.innerHTML = "Zum Mitnehmen!"; + + (document.querySelector("#topTake")).append(button); + } + + async function getProductList(): Promise { + let url: string = serverUrl + "/mongo/products/findCollection" + "?"; + let response: Response = await fetch(url); + let jsonResponse: Products[] = await response.json(); + printProducts(jsonResponse); + } + + function printProducts(_jsonResponse: Products[]): void { + for (const iterator of _jsonResponse) { + delete iterator._id; + (document.querySelector(`#${iterator.category}Div`)).innerHTML += ` +
+ Product
+
${(iterator.name).replace("-", " ")}
+ +
+ `; + } + } + + function addButtonFunctions(): void { + let buttonList: NodeListOf = document.querySelectorAll(".product_button"); + for (const iterator of buttonList) + iterator.addEventListener("click", addProduct); + + (document.querySelector("#id_table_0")).addEventListener("click", addProduct); + (document.querySelector("#nextButton")).addEventListener("click", addCurrent); + (document.querySelector("#sendButton")).addEventListener("click", addOrderToLocal); + (document.querySelector("#resetButton")).addEventListener("click", clearCombination); + } + + function addProduct(_event: Event): void { + let target: HTMLElement = (_event.target); + let product: Products = JSON.parse(target.getAttribute("content")!); + if (product.tisch != undefined) { + tisch = JSON.stringify(product); + console.log(tisch); + } + + switch (product.category) { + case "container": { + if (checkMaximum(1, product)) { + let index: number = combinationArray.indexOf(combinationArray.find(_element => _element = product.category)!); + combinationArray[index] = JSON.stringify(product); + displayOrder(); + } + else { + combinationArray.push(JSON.stringify(product)); + displayOrder(); + } + break; + } + case "flavour": { + if (!checkMaximum(6, product)) { + combinationArray.push(JSON.stringify(product)); + displayOrder(); + } + break; + } + case "topping": { + if (!checkMaximum(3, product)) { + combinationArray.push(JSON.stringify(product)); + displayOrder(); + } + break; + } + } + console.log("combinationArray", combinationArray); + } + + function checkMaximum(_maximum: number, _targetString: Products): boolean { + let countOccurence: number = 0; + for (let i: number = 0; i < combinationArray.length; i++) { + let checkString: string = combinationArray[i]; + + if (checkString.includes(_targetString.category)) + countOccurence++; + + if (countOccurence == _maximum) { + alert("Die maximale Anzahl von " + _maximum + " wurde bereits erreicht"); + return true; + } + } + return false; + } + + function addCurrent(): void { + addToLocal(); + clearCombination(); + fixCartCount(); + combinationCount++; + } + + function clearCombination(): void { + combinationArray = []; + displayOrder(); + (document.querySelector("#topContainer")).scrollIntoView(true); + } + + function fixCartCount(): void { + if (localStorage["CartCount"] != undefined) + localStorage.removeItem("CartCount"); + let count: number = 0; + for (const key in localStorage) { + if (key.includes("Combination")) { + count++; + } + } + localStorage.setItem("CartCount", `${count}`); + (document.querySelector("#warenkorb span")).innerHTML = `${localStorage.CartCount}`; + } + + function addOrderToLocal(): void { + addToLocal(); + window.location.href = "../html-warenkorb/warenkorb.html"; + } + + function addToLocal(): void { + combinationArray.push(tisch); + localStorage.setItem(`Combination${combinationCount}`, "[" + combinationArray.toLocaleString() + "]"); + } + + function displayOrder(): void { + (document.querySelector("#displayContainer")).innerHTML = ""; + for (let i: number = combinationArray.length - 1; i > -1; i--) { + console.log(combinationArray[i]); + let obj: Products = JSON.parse(combinationArray[i]); + (document.querySelector("#displayContainer")).innerHTML += ``; + } + } + +} + diff --git a/Endabgabe/script-frontend/warenkorb.js b/Endabgabe/script-frontend/warenkorb.js index db37ada..9ce877e 100644 --- a/Endabgabe/script-frontend/warenkorb.js +++ b/Endabgabe/script-frontend/warenkorb.js @@ -1,7 +1,7 @@ "use strict"; var frontShop; (function (frontShop) { - let serverUrl = "https://theoneandgis.herokuapp.com"; + let serverUrl = "http://localhost:8100"; let orderArray = []; let orderPrice = 0; let orderNumber = 0; @@ -80,22 +80,23 @@ var frontShop; url = serverUrl + "/" + "mongo" + "/" + "orders" + "/" + "insertEntry" + "/" + "?" + query.toString() + `&Nr=${orderNumber}` + `&orderPrice=${orderPrice.toFixed(2)}`; await fetch(url); for (const iterator of orderArray) { + console.log("{" + `"area":"mongo","collection":"orders","action":"insertEntry",` + iterator.slice(1, iterator.length - 1)); await fetch(serverUrl, { method: "POST", headers: { "Content-Type": "text/plain" }, - body: iterator + body: "{" + `"area":"mongo","collection":"orders","action":"insertEntry",` + iterator.slice(1, iterator.length - 1) + "}" }); } orderNumber++; - await fetch(serverUrl + "/mongo/orders/updateEntry" + "?_id=5f1a48d7a8f957baaa07cfeb&orderCount=" + orderNumber.toString()); + await fetch(serverUrl + "/mongo/orders/updateEntry" + "?_id=5f34646911221b807b8df54c&orderCount=" + orderNumber.toString()); localStorage.clear(); location.reload(); alert("Ihre Bestellung wurde eingereicht. Bitte melden Sie sich am Tresen, sobald Ihre Nummer aufgerufen wird! ♥"); } async function getNumber() { - let response = await fetch(serverUrl + "/mongo/orders/findEntry?_id=5f1a48d7a8f957baaa07cfeb"); + let response = await fetch(serverUrl + "/mongo/orders/findEntry?_id=5f34646911221b807b8df54c"); let orderObj = await response.json(); let orderObjNumber = parseFloat(orderObj.orderCount); return orderObjNumber; diff --git a/Endabgabe/script-frontend/warenkorb.js.map b/Endabgabe/script-frontend/warenkorb.js.map index c02fcca..8cbac2b 100644 --- a/Endabgabe/script-frontend/warenkorb.js.map +++ b/Endabgabe/script-frontend/warenkorb.js.map @@ -1 +1 @@ -{"version":3,"file":"warenkorb.js","sourceRoot":"","sources":["warenkorb.ts"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"warenkorb.js","sourceRoot":"","sources":["warenkorb.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/Endabgabe/script-frontend/warenkorb.ts b/Endabgabe/script-frontend/warenkorb.ts index 5b72b8d..0fcc4d0 100644 --- a/Endabgabe/script-frontend/warenkorb.ts +++ b/Endabgabe/script-frontend/warenkorb.ts @@ -1,147 +1,148 @@ - -namespace frontShop { - - let serverUrl: string = "https://theoneandgis.herokuapp.com"; - let orderArray: string[] = []; - let orderPrice: number = 0; - let orderNumber: number = 0; - - init(); - - async function init(): Promise { - await setOrder(); - await addButtonListener(); - fixCartCount(); - } - - interface Products { - [type: string]: string | number; - } - - async function setOrder(): Promise { - //let formData: FormData = new FormData(document.forms[0]); - orderNumber = await getNumber(); - for (const key in localStorage) { - if (localStorage.getItem(key) != null && key.includes("Combination")) { - let content: string = localStorage.getItem(key)!; - let contentObj: Products[] = await JSON.parse(content); - let contentString: string = "{"; - let countFlavour: number = 1; - let countTopping: number = 1; - let countPrice: number = 0; - - let div: HTMLDivElement = document.createElement("div"); - div.classList.add("product"); - div.innerHTML = ``; - for (const keys of contentObj) - if (keys.category == "container") { - contentString += `"container"` + ":" + `"${keys.name}"` + ","; - div.innerHTML += `Behälter: ${keys.name}
`; - } - for (const keys of contentObj) - if (keys.category == "flavour") { - contentString += `"flavour${countFlavour}"` + ":" + `"${keys.name}"` + ","; - div.innerHTML += `Kugel Nr. ${countFlavour}: ${keys.name}
`; - countFlavour++; - } - for (const keys of contentObj) - if (keys.category == "topping") { - contentString += `"topping${countTopping}"` + ":" + `"${keys.name}"` + ","; - div.innerHTML += `Topping Nr. ${countTopping}: ${keys.name}
`; - countTopping++; - } - for (const keys of contentObj) { - if (keys.price != undefined) { - orderPrice += keys.price; - countPrice += keys.price; - } - } - for (const keys of contentObj) { - if (keys.tisch != undefined) { - contentString += `"tisch"` + ":" + `"${keys.tisch}"` + ","; - } - } - contentString += `"productPrice"` + ":" + `"${countPrice.toFixed(2)}"` + "," + `"Nr"` + ":" + `"${orderNumber}"` + ","; - //contentString += `"vorname"` + ":" + `"${formData.get("vorname")}"` + "," + `"nachname"` + ":" + `"${formData.get("nachname")}"` + ","; - //contentString += `"straße"` + ":" + `"${formData.get("straße")}"` + "," + `"postleitzahl"` + ":" + `"${formData.get("postleitzahl")}"` + ","; - contentString = contentString.slice(0, contentString.length - 1) + "}"; - div.innerHTML += ``; - orderArray.push(contentString); - (document.querySelector("#check")).append(div); - //(document.querySelector("#check")).innerHTML += contentString + "

"; - } - } - } - - /*async function saveForm(): Promise { - let formData: FormData = new FormData(document.forms[0]); - let url: string = ""; - //tslint:disable-next-line: no-any - let query: URLSearchParams = new URLSearchParams(formData); - url = "http://localhost:8100" + "/" + "mongo" + "/" + "orders" + "/" + "insertEntry" + "/" + "?" + query.toString(); - await fetch(url); - }*/ - - async function confirmOrder(): Promise { - let formData: FormData = new FormData(document.forms[0]); - let url: string = ""; - //tslint:disable-next-line: no-any - let query: URLSearchParams = new URLSearchParams(formData); - url = serverUrl + "/" + "mongo" + "/" + "orders" + "/" + "insertEntry" + "/" + "?" + query.toString() + `&Nr=${orderNumber}` + `&orderPrice=${orderPrice.toFixed(2)}`; - await fetch(url); - - for (const iterator of orderArray) { - await fetch(serverUrl, { - method: "POST", - headers: { - "Content-Type": "text/plain" - }, - body: iterator - }); - } - - orderNumber++; - await fetch( serverUrl + "/mongo/orders/updateEntry" + "?_id=5f1a48d7a8f957baaa07cfeb&orderCount=" + orderNumber.toString()); - - localStorage.clear(); - location.reload(); - alert("Ihre Bestellung wurde eingereicht. Bitte melden Sie sich am Tresen, sobald Ihre Nummer aufgerufen wird! ♥"); - } - - async function getNumber(): Promise { - let response: Response = await fetch(serverUrl + "/mongo/orders/findEntry?_id=5f1a48d7a8f957baaa07cfeb"); - let orderObj: Products = await response.json(); - let orderObjNumber: number = parseFloat(orderObj.orderCount); - return orderObjNumber; - } - - async function addButtonListener(): Promise { - //(document.querySelector("#printOrder")).addEventListener("click", setOrder); - (document.querySelector("#sendOrder")).addEventListener("click", confirmOrder); - //(document.querySelector("#formButton")).addEventListener("click", saveForm); - let elementList: NodeListOf = document.querySelectorAll(".removeButton"); - for (const iterator of elementList) - iterator.addEventListener("click", removeCombination); - } - - function removeCombination(_event: Event): void { - localStorage.setItem("CartCount", `${parseFloat(localStorage.getItem("CartCount")!) - 1}`); - let target: HTMLElement = (_event.target); - delete orderArray[parseFloat(target.getAttribute("arrayindex")!)]; - localStorage.removeItem(target.getAttribute("localname")!) ; - location.reload(); - } - - function fixCartCount(): void { - if (localStorage["CartCount"] != undefined) - localStorage.removeItem("CartCount"); - let count: number = 0; - for (const key in localStorage) { - if (key.includes("Combination")) { - count++; - } - } - localStorage.setItem("CartCount", `${count}`); - (document.querySelector("#warenkorb span")).innerHTML = `${localStorage.CartCount}`; - } + +namespace frontShop { + + let serverUrl: string = "http://localhost:8100"; + let orderArray: string[] = []; + let orderPrice: number = 0; + let orderNumber: number = 0; + + init(); + + async function init(): Promise { + await setOrder(); + await addButtonListener(); + fixCartCount(); + } + + interface Products { + [type: string]: string | number; + } + + async function setOrder(): Promise { + //let formData: FormData = new FormData(document.forms[0]); + orderNumber = await getNumber(); + for (const key in localStorage) { + if (localStorage.getItem(key) != null && key.includes("Combination")) { + let content: string = localStorage.getItem(key)!; + let contentObj: Products[] = await JSON.parse(content); + let contentString: string = "{"; + let countFlavour: number = 1; + let countTopping: number = 1; + let countPrice: number = 0; + + let div: HTMLDivElement = document.createElement("div"); + div.classList.add("product"); + div.innerHTML = ``; + for (const keys of contentObj) + if (keys.category == "container") { + contentString += `"container"` + ":" + `"${keys.name}"` + ","; + div.innerHTML += `Behälter: ${keys.name}
`; + } + for (const keys of contentObj) + if (keys.category == "flavour") { + contentString += `"flavour${countFlavour}"` + ":" + `"${keys.name}"` + ","; + div.innerHTML += `Kugel Nr. ${countFlavour}: ${keys.name}
`; + countFlavour++; + } + for (const keys of contentObj) + if (keys.category == "topping") { + contentString += `"topping${countTopping}"` + ":" + `"${keys.name}"` + ","; + div.innerHTML += `Topping Nr. ${countTopping}: ${keys.name}
`; + countTopping++; + } + for (const keys of contentObj) { + if (keys.price != undefined) { + orderPrice += keys.price; + countPrice += keys.price; + } + } + for (const keys of contentObj) { + if (keys.tisch != undefined) { + contentString += `"tisch"` + ":" + `"${keys.tisch}"` + ","; + } + } + contentString += `"productPrice"` + ":" + `"${countPrice.toFixed(2)}"` + "," + `"Nr"` + ":" + `"${orderNumber}"` + ","; + //contentString += `"vorname"` + ":" + `"${formData.get("vorname")}"` + "," + `"nachname"` + ":" + `"${formData.get("nachname")}"` + ","; + //contentString += `"straße"` + ":" + `"${formData.get("straße")}"` + "," + `"postleitzahl"` + ":" + `"${formData.get("postleitzahl")}"` + ","; + contentString = contentString.slice(0, contentString.length - 1) + "}"; + div.innerHTML += ``; + orderArray.push(contentString); + (document.querySelector("#check")).append(div); + //(document.querySelector("#check")).innerHTML += contentString + "

"; + } + } + } + + /*async function saveForm(): Promise { + let formData: FormData = new FormData(document.forms[0]); + let url: string = ""; + //tslint:disable-next-line: no-any + let query: URLSearchParams = new URLSearchParams(formData); + url = "http://localhost:8100" + "/" + "mongo" + "/" + "orders" + "/" + "insertEntry" + "/" + "?" + query.toString(); + await fetch(url); + }*/ + + async function confirmOrder(): Promise { + let formData: FormData = new FormData(document.forms[0]); + let url: string = ""; + //tslint:disable-next-line: no-any + let query: URLSearchParams = new URLSearchParams(formData); + url = serverUrl + "/" + "mongo" + "/" + "orders" + "/" + "insertEntry" + "/" + "?" + query.toString() + `&Nr=${orderNumber}` + `&orderPrice=${orderPrice.toFixed(2)}`; + await fetch(url); + + for (const iterator of orderArray) { + console.log("{" + `"area":"mongo","collection":"orders","action":"insertEntry",` + iterator.slice(1, iterator.length - 1) ); + await fetch(serverUrl, { + method: "POST", + headers: { + "Content-Type": "text/plain" + }, + body: "{" + `"area":"mongo","collection":"orders","action":"insertEntry",` + iterator.slice(1, iterator.length - 1) + "}" + }); + } + + orderNumber++; + await fetch(serverUrl + "/mongo/orders/updateEntry" + "?_id=5f34646911221b807b8df54c&orderCount=" + orderNumber.toString()); + + localStorage.clear(); + location.reload(); + alert("Ihre Bestellung wurde eingereicht. Bitte melden Sie sich am Tresen, sobald Ihre Nummer aufgerufen wird! ♥"); + } + + async function getNumber(): Promise { + let response: Response = await fetch(serverUrl + "/mongo/orders/findEntry?_id=5f34646911221b807b8df54c"); + let orderObj: Products = await response.json(); + let orderObjNumber: number = parseFloat(orderObj.orderCount); + return orderObjNumber; + } + + async function addButtonListener(): Promise { + //(document.querySelector("#printOrder")).addEventListener("click", setOrder); + (document.querySelector("#sendOrder")).addEventListener("click", confirmOrder); + //(document.querySelector("#formButton")).addEventListener("click", saveForm); + let elementList: NodeListOf = document.querySelectorAll(".removeButton"); + for (const iterator of elementList) + iterator.addEventListener("click", removeCombination); + } + + function removeCombination(_event: Event): void { + localStorage.setItem("CartCount", `${parseFloat(localStorage.getItem("CartCount")!) - 1}`); + let target: HTMLElement = (_event.target); + delete orderArray[parseFloat(target.getAttribute("arrayindex")!)]; + localStorage.removeItem(target.getAttribute("localname")!) ; + location.reload(); + } + + function fixCartCount(): void { + if (localStorage["CartCount"] != undefined) + localStorage.removeItem("CartCount"); + let count: number = 0; + for (const key in localStorage) { + if (key.includes("Combination")) { + count++; + } + } + localStorage.setItem("CartCount", `${count}`); + (document.querySelector("#warenkorb span")).innerHTML = `${localStorage.CartCount}`; + } } \ No newline at end of file