Moved Repository
This commit is contained in:
Yami
parent
ccd5991c58
commit
eb336f6bd7
|
|
@ -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
|
||||
|
|
@ -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}"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
{
|
||||
"liveServer.settings.port": 5502
|
||||
{
|
||||
"liveServer.settings.port": 5502
|
||||
}
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<head>
|
||||
<title> Aufgabe 0 </title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1 style="text-align:center"> Wer das liest, ist ein toller Mensch ♥ </h1>
|
||||
<image src="picture.jpg" alt="Schade, ich konnte dein Bild nicht finden :c" style="width:100%;height:auto;"/>
|
||||
<!DOCTYPE html>
|
||||
|
||||
<head>
|
||||
<title> Aufgabe 0 </title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1 style="text-align:center"> Wer das liest, ist ein toller Mensch ♥ </h1>
|
||||
<image src="picture.jpg" alt="Schade, ich konnte dein Bild nicht finden :c" style="width:100%;height:auto;"/>
|
||||
</body>
|
||||
|
|
@ -1,30 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title> Aufgabe 01 </title>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a href="#Anker-Tag"> Hier ist der Anker zu deinem Glück! <br> </a>
|
||||
<image src="portrait_zuschnitt.png" alt="This is supposed to be a picture of me!"/>
|
||||
<h1> THIS IS ME </h1>
|
||||
<p> Ich bin Justin. Ich mag Kekse. Ich studiere Medieninformatik im zweiten Semester. Du möchtest mehr über mich wissen? Dann frag mich doch. :3 <br> </p>
|
||||
<h1> THIS IS MY FUTURE </h1>
|
||||
<p> Ich mag Informatik aber auch Medien. Also studiere ich Medieninformatik! <br> </p>
|
||||
|
||||
<p> Hier ist ein Link für: <a href="https://www.youtube.com/" target:"_blank">Youtube</a></p>
|
||||
|
||||
<p> Homepage von Janina: <a href="https://janinacpb.github.io/GIS-SoSe-2020/Aufgabe01/aufgabe1.html" target:"_blank">Press me!</a></p>
|
||||
<p> Homepage von Linda: <a href="https://linlin94.github.io/GiS_SoSe2020/Abgaben/Aufgabe_01" target:"_blank">Press me!</a></p>
|
||||
<p> Homepage von Jacqueline: <a href="https://jk-jacki.github.io/GIS_SoSe2020/Aufgabe01/" target:"_blank">Press me!</a></p>
|
||||
|
||||
<p id="Anker-Tag">
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
You've found me ó_ò <br>
|
||||
Here, have a cookie (UwU)~🍪
|
||||
</p>
|
||||
</body>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title> Aufgabe 01 </title>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a href="#Anker-Tag"> Hier ist der Anker zu deinem Glück! <br> </a>
|
||||
<image src="portrait_zuschnitt.png" alt="This is supposed to be a picture of me!"/>
|
||||
<h1> THIS IS ME </h1>
|
||||
<p> Ich bin Justin. Ich mag Kekse. Ich studiere Medieninformatik im zweiten Semester. Du möchtest mehr über mich wissen? Dann frag mich doch. :3 <br> </p>
|
||||
<h1> THIS IS MY FUTURE </h1>
|
||||
<p> Ich mag Informatik aber auch Medien. Also studiere ich Medieninformatik! <br> </p>
|
||||
|
||||
<p> Hier ist ein Link für: <a href="https://www.youtube.com/" target:"_blank">Youtube</a></p>
|
||||
|
||||
<p> Homepage von Janina: <a href="https://janinacpb.github.io/GIS-SoSe-2020/Aufgabe01/aufgabe1.html" target:"_blank">Press me!</a></p>
|
||||
<p> Homepage von Linda: <a href="https://linlin94.github.io/GiS_SoSe2020/Abgaben/Aufgabe_01" target:"_blank">Press me!</a></p>
|
||||
<p> Homepage von Jacqueline: <a href="https://jk-jacki.github.io/GIS_SoSe2020/Aufgabe01/" target:"_blank">Press me!</a></p>
|
||||
|
||||
<p id="Anker-Tag">
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
You've found me ó_ò <br>
|
||||
Here, have a cookie (UwU)~🍪
|
||||
</p>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,78 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<title> About Me </title>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p> Here you get ( o-o)~[ 20€ ] </p>
|
||||
<p> Now you have to get me an A++ (ò-ó) </p>
|
||||
|
||||
<p> <b>Hier</b> kommt ihr zu den anderen Seiten </p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="about_me.html"> About mew! </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="contact.html"> Kontaktiere mich doch :3 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="portfolio.html"> Portfolio </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h1> This is real, this is me</h1>
|
||||
<h2> This is exactly, where I'm supposed to be ♫ </h2>
|
||||
|
||||
<h4> Damit das "about mew!" mal gerechtfertigt ist:</h4>
|
||||
<p> Mew is also a Pokémon! </p>
|
||||
<embed src="files/pokeball.png" width="200" height="240" />
|
||||
|
||||
<div>
|
||||
<label>Süß, oder?</label>
|
||||
<input type="checkbox">
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th> Hello </th>
|
||||
<th> I'm </th>
|
||||
<th> a </th>
|
||||
<th> table </th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> a table </td>
|
||||
<td> without css </td>
|
||||
<td> is </td>
|
||||
<td> ugly </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> a table </td>
|
||||
<td> without css </td>
|
||||
<td> is </td>
|
||||
<td> ugly </td>
|
||||
</tr>
|
||||
</table> <br>
|
||||
|
||||
<img src="files/robin-redbreast-in-tree-5038867_640.jpg" alt="Cheep Cheep, I'm a Sheep" width="200" height="200" /> <br><br>
|
||||
|
||||
<div>
|
||||
Quick Mafs! <br>
|
||||
<code>
|
||||
x = 5; <br>
|
||||
y = 3; <br>
|
||||
x + y = 8;
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<ol>
|
||||
<li> Ich kann schon </li>
|
||||
<li> den Zahlenbereich </li>
|
||||
<li> von 1 bis 20 </li>
|
||||
</ol>
|
||||
|
||||
</body>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<title> About Me </title>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p> Here you get ( o-o)~[ 20€ ] </p>
|
||||
<p> Now you have to get me an A++ (ò-ó) </p>
|
||||
|
||||
<p> <b>Hier</b> kommt ihr zu den anderen Seiten </p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="about_me.html"> About mew! </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="contact.html"> Kontaktiere mich doch :3 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="portfolio.html"> Portfolio </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h1> This is real, this is me</h1>
|
||||
<h2> This is exactly, where I'm supposed to be ♫ </h2>
|
||||
|
||||
<h4> Damit das "about mew!" mal gerechtfertigt ist:</h4>
|
||||
<p> Mew is also a Pokémon! </p>
|
||||
<embed src="files/pokeball.png" width="200" height="240" />
|
||||
|
||||
<div>
|
||||
<label>Süß, oder?</label>
|
||||
<input type="checkbox">
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th> Hello </th>
|
||||
<th> I'm </th>
|
||||
<th> a </th>
|
||||
<th> table </th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> a table </td>
|
||||
<td> without css </td>
|
||||
<td> is </td>
|
||||
<td> ugly </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> a table </td>
|
||||
<td> without css </td>
|
||||
<td> is </td>
|
||||
<td> ugly </td>
|
||||
</tr>
|
||||
</table> <br>
|
||||
|
||||
<img src="files/robin-redbreast-in-tree-5038867_640.jpg" alt="Cheep Cheep, I'm a Sheep" width="200" height="200" /> <br><br>
|
||||
|
||||
<div>
|
||||
Quick Mafs! <br>
|
||||
<code>
|
||||
x = 5; <br>
|
||||
y = 3; <br>
|
||||
x + y = 8;
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<ol>
|
||||
<li> Ich kann schon </li>
|
||||
<li> den Zahlenbereich </li>
|
||||
<li> von 1 bis 20 </li>
|
||||
</ol>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,58 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<title> Contact </title>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p> Look for stuff py pressing <kbd>Ctrl + F</kbd> </p>
|
||||
|
||||
<p> <b>Hier</b> kommt ihr zu den anderen Seiten </p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="about_me.html"> About mew! </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="contact.html"> Kontaktiere mich doch :3 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="portfolio.html"> Portfolio </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div>
|
||||
<label>What are you looking for? </label>
|
||||
<input type="text">
|
||||
</div>
|
||||
|
||||
<p> Hier ist eine <a href="files/leertext.pdf">PDF</a> mit Leertext verlinkt! </p>
|
||||
<p> Diese dient dazu, genug Datentypen für die Aufgabe zu verwenden. </p>
|
||||
|
||||
<h2> Mail </h2>
|
||||
<p> Justin.Dretvic@hs-furtwangen.de </p>
|
||||
|
||||
<h2> Facebook </h2>
|
||||
<img src="files/f_logo_RGB-Blue_58.png" alt="Facebook Logo" />
|
||||
<p> Here is a related quote:</p>
|
||||
<blockquote>
|
||||
<p>We're running the company to serve more people.</p>
|
||||
<p>Said by: Mark Zuckerberg</p>
|
||||
</blockquote>
|
||||
|
||||
|
||||
<h2> Instagram </h2>
|
||||
<img src="files/glyph-logo_May2016.png" width="130" heigth="130" alt="Instagram Logo" />
|
||||
|
||||
<footer>
|
||||
<div>
|
||||
<p> Dieser Inhalt steht in einem footer! </p>
|
||||
<p> Jegliche Inhalte werden nicht monetär verwendet! </p>
|
||||
<p> Alle Bilder, die keine Logos sind, wurden von <a href="https://pixabay.com/de/">https://pixabay.com/de/</a> bezogen </p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<title> Contact </title>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p> Look for stuff py pressing <kbd>Ctrl + F</kbd> </p>
|
||||
|
||||
<p> <b>Hier</b> kommt ihr zu den anderen Seiten </p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="about_me.html"> About mew! </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="contact.html"> Kontaktiere mich doch :3 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="portfolio.html"> Portfolio </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div>
|
||||
<label>What are you looking for? </label>
|
||||
<input type="text">
|
||||
</div>
|
||||
|
||||
<p> Hier ist eine <a href="files/leertext.pdf">PDF</a> mit Leertext verlinkt! </p>
|
||||
<p> Diese dient dazu, genug Datentypen für die Aufgabe zu verwenden. </p>
|
||||
|
||||
<h2> Mail </h2>
|
||||
<p> Justin.Dretvic@hs-furtwangen.de </p>
|
||||
|
||||
<h2> Facebook </h2>
|
||||
<img src="files/f_logo_RGB-Blue_58.png" alt="Facebook Logo" />
|
||||
<p> Here is a related quote:</p>
|
||||
<blockquote>
|
||||
<p>We're running the company to serve more people.</p>
|
||||
<p>Said by: Mark Zuckerberg</p>
|
||||
</blockquote>
|
||||
|
||||
|
||||
<h2> Instagram </h2>
|
||||
<img src="files/glyph-logo_May2016.png" width="130" heigth="130" alt="Instagram Logo" />
|
||||
|
||||
<footer>
|
||||
<div>
|
||||
<p> Dieser Inhalt steht in einem footer! </p>
|
||||
<p> Jegliche Inhalte werden nicht monetär verwendet! </p>
|
||||
<p> Alle Bilder, die keine Logos sind, wurden von <a href="https://pixabay.com/de/">https://pixabay.com/de/</a> bezogen </p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,51 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<title> Portfolio </title>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1> Willkommen auf meiner Website</h1>
|
||||
|
||||
<h3> Ich bin ein Fan davon, Anforderungen zu abusen </h3>
|
||||
|
||||
<h5> <del> Ich hab jetzt schon 3 HTML-Elemente </del> </h5>
|
||||
|
||||
<p> <b>Hier</b> kommt ihr zu den anderen Seiten </p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="about_me.html"> About mew! </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="contact.html"> Kontaktiere mich doch :3 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="portfolio.html"> Portfolio </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a href="#anchor"> Don't click on me </a> <br><br>
|
||||
|
||||
<div>
|
||||
<label>Klick mal drauf, das könnte irgendwann hilfreich werden: </label>
|
||||
<input type="color">
|
||||
</div>
|
||||
|
||||
<button> Sinnloser Button. ACHTUNG! SINNLOS!!! </button> <br><br>
|
||||
|
||||
<iframe width="1280" height="720" src="https://www.youtube.com/embed/-8SY-1f6xn0"
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
|
||||
</iframe> <br><br>
|
||||
|
||||
<p> Don't you dare pressing on the play-button! I warned you! </p>
|
||||
<audio controls id="anchor">
|
||||
<source src="files/Battle_Cry_High_Pitch.mp3" type="audio/ogg">
|
||||
Your browser does not support the audio element.
|
||||
</audio> <br>
|
||||
|
||||
</body>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<title> Portfolio </title>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1> Willkommen auf meiner Website</h1>
|
||||
|
||||
<h3> Ich bin ein Fan davon, Anforderungen zu abusen </h3>
|
||||
|
||||
<h5> <del> Ich hab jetzt schon 3 HTML-Elemente </del> </h5>
|
||||
|
||||
<p> <b>Hier</b> kommt ihr zu den anderen Seiten </p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="about_me.html"> About mew! </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="contact.html"> Kontaktiere mich doch :3 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="portfolio.html"> Portfolio </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a href="#anchor"> Don't click on me </a> <br><br>
|
||||
|
||||
<div>
|
||||
<label>Klick mal drauf, das könnte irgendwann hilfreich werden: </label>
|
||||
<input type="color">
|
||||
</div>
|
||||
|
||||
<button> Sinnloser Button. ACHTUNG! SINNLOS!!! </button> <br><br>
|
||||
|
||||
<iframe width="1280" height="720" src="https://www.youtube.com/embed/-8SY-1f6xn0"
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
|
||||
</iframe> <br><br>
|
||||
|
||||
<p> Don't you dare pressing on the play-button! I warned you! </p>
|
||||
<audio controls id="anchor">
|
||||
<source src="files/Battle_Cry_High_Pitch.mp3" type="audio/ogg">
|
||||
Your browser does not support the audio element.
|
||||
</audio> <br>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,161 +1,161 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<title> used tags </title>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<table>
|
||||
<tr>
|
||||
<th> tag </th>
|
||||
<th> Nutzen</th>
|
||||
<th> portfolio </th>
|
||||
<th> About_me </th>
|
||||
<th> contact </th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <h1–6> </td>
|
||||
<td> header </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <p> </td>
|
||||
<td> paragraph</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <del> </td>
|
||||
<td> deleted </td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <a> </td>
|
||||
<td> anchor </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <ul> </td>
|
||||
<td> unordered list </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <ol> </td>
|
||||
<td> ordered list </td>
|
||||
<td> [ ]</td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <div> </td>
|
||||
<td> Container </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <table> </td>
|
||||
<td> Tabelle </td>
|
||||
<td> [ ]</td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <code> </td>
|
||||
<td> code-block</td>
|
||||
<td> [ ]</td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <img> </td>
|
||||
<td> image </td>
|
||||
<td> [ ]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <button> </td>
|
||||
<td> button </td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <iframe> </td>
|
||||
<td> iframe </td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <audio> </td>
|
||||
<td> audio control </td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <br> </td>
|
||||
<td> break </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <embed> </td>
|
||||
<td> embed </td>
|
||||
<td> [ ]</td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <label> </td>
|
||||
<td> label </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <input> </td>
|
||||
<td> input </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <footer> </td>
|
||||
<td> footer </td>
|
||||
<td> [ ]</td>
|
||||
<td> [ ]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <blockquote> </td>
|
||||
<td> blockquote </td>
|
||||
<td> [ ]</td>
|
||||
<td> [ ]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <b> </td>
|
||||
<td> </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<title> used tags </title>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<table>
|
||||
<tr>
|
||||
<th> tag </th>
|
||||
<th> Nutzen</th>
|
||||
<th> portfolio </th>
|
||||
<th> About_me </th>
|
||||
<th> contact </th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <h1–6> </td>
|
||||
<td> header </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <p> </td>
|
||||
<td> paragraph</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <del> </td>
|
||||
<td> deleted </td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <a> </td>
|
||||
<td> anchor </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <ul> </td>
|
||||
<td> unordered list </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <ol> </td>
|
||||
<td> ordered list </td>
|
||||
<td> [ ]</td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <div> </td>
|
||||
<td> Container </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <table> </td>
|
||||
<td> Tabelle </td>
|
||||
<td> [ ]</td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <code> </td>
|
||||
<td> code-block</td>
|
||||
<td> [ ]</td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <img> </td>
|
||||
<td> image </td>
|
||||
<td> [ ]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <button> </td>
|
||||
<td> button </td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <iframe> </td>
|
||||
<td> iframe </td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <audio> </td>
|
||||
<td> audio control </td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <br> </td>
|
||||
<td> break </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <embed> </td>
|
||||
<td> embed </td>
|
||||
<td> [ ]</td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <label> </td>
|
||||
<td> label </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <input> </td>
|
||||
<td> input </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <footer> </td>
|
||||
<td> footer </td>
|
||||
<td> [ ]</td>
|
||||
<td> [ ]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <blockquote> </td>
|
||||
<td> blockquote </td>
|
||||
<td> [ ]</td>
|
||||
<td> [ ]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <b> </td>
|
||||
<td> </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,127 +1,127 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="basic.css">
|
||||
<link rel="stylesheet" href="about_me.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title> About Me </title>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<svg width="650" height="160">
|
||||
<ellipse cx="325" cy="0" rx="300" ry="150" stroke="#011f4b" stroke-width="5" fill="#005b96" />
|
||||
<text fill="#ffffff" font-size="50" x="200" y="60"> A B O U T </text>
|
||||
<text fill="#ffffff" font-size="50" x="260" y="110"> M E </text>
|
||||
</svg>
|
||||
|
||||
|
||||
|
||||
<div class="navigation">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="about_me.html" class="active"> About Me! </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="contact.html"> Contact </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="portfolio.html"> Portfolio </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="achthundert">
|
||||
|
||||
<div>
|
||||
<p id="dollar"> Here you get ( o-o)~[ 20€ ] </p>
|
||||
<p id="aplus"> Now you HAVE TO get me an A++ (ò-ó) </p>
|
||||
</div>
|
||||
|
||||
<div id="heading">
|
||||
<h1> This is real, this is me</h1>
|
||||
<h2> This is exactly, where I'm supposed to be ♫ </h2>
|
||||
</div>
|
||||
|
||||
<div id="pokemon">
|
||||
<h4> I'm a D I G I M O N </h4>
|
||||
<a href="https://wallpaperaccess.com/full/31008.jpg">
|
||||
<img src="files/pokeball.png" alt="pokeball" width="200" height="240" />
|
||||
</a>
|
||||
<div>
|
||||
<label>Süß, oder?</label>
|
||||
<input type="checkbox">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th> WHICH </th>
|
||||
<th> ONE </th>
|
||||
<th> AM </th>
|
||||
<th> I? </th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="eagle"> <embed class="eagle" src="files/eagle.jpg" type="image/jpeg" width="100" height="100"> </td>
|
||||
<td class="eagle"> <embed src="files/eagle.jpg" type="image/jpeg" width="100" height="100"> </td>
|
||||
<td class="eagle"> <embed src="files/eagle.jpg" type="image/jpeg" width="100" height="100"> </td>
|
||||
<td class="eagle"> <embed src="files/eagle.jpg" type="image/jpeg" width="100" height="100"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="eagle"> <embed src="files/eagle.jpg" type="image/jpeg" width="100" height="100"> </td>
|
||||
<td class="eagle"> <embed src="files/eagle.jpg" type="image/jpeg" width="100" height="100"> </td>
|
||||
<td id="peep"> <embed src="files/robin-redbreast-in-tree-5038867_640.jpg" type="image/jpeg" width="100"
|
||||
height="100"> </td>
|
||||
<td class="eagle"> <embed src="files/eagle.jpg" type="image/jpeg" width="100" height="100"> </td>
|
||||
</tr>
|
||||
</table> <br>
|
||||
|
||||
<div id="kasten_außen">
|
||||
<div class="kasten">
|
||||
Quick Mafs! <br>
|
||||
<code>
|
||||
x = 5; <br>
|
||||
y = 3; <br>
|
||||
x + y = 8;
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div class="kasten">
|
||||
<ol>
|
||||
<li> Ich kann schon </li>
|
||||
<li> den Zahlenbereich </li>
|
||||
<li> von 1 bis 20 </li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="dozent">
|
||||
<p> Ich saß zu viele Stunden an der Aufgabe, irgendwann hab ich das Design nur noch sehr einfach gehalten.
|
||||
Bitte
|
||||
vergebt mir, Eure Dozentheit! :c</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div>
|
||||
<p> Dieser Inhalt steht in einem footer! </p>
|
||||
<p> Jegliche Inhalte werden nicht monetär verwendet! </p>
|
||||
<p> Alle Bilder, die keine Logos sind, wurden von
|
||||
<a href="https://pixabay.com/de/"> Pixabay</a> bezogen </p>
|
||||
<div class="second_nav">
|
||||
<a href=""> <i class="fa fa-facebook-square"></i> </a>
|
||||
<a href=""> <i class="fa fa-instagram"></i> </a>
|
||||
<a href=""> <i class="fa fa-envelope"></i> </a>
|
||||
<a href=""> <i class="fa fa-xing"></i> </a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="basic.css">
|
||||
<link rel="stylesheet" href="about_me.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title> About Me </title>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<svg width="650" height="160">
|
||||
<ellipse cx="325" cy="0" rx="300" ry="150" stroke="#011f4b" stroke-width="5" fill="#005b96" />
|
||||
<text fill="#ffffff" font-size="50" x="200" y="60"> A B O U T </text>
|
||||
<text fill="#ffffff" font-size="50" x="260" y="110"> M E </text>
|
||||
</svg>
|
||||
|
||||
|
||||
|
||||
<div class="navigation">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="about_me.html" class="active"> About Me! </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="contact.html"> Contact </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="portfolio.html"> Portfolio </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="achthundert">
|
||||
|
||||
<div>
|
||||
<p id="dollar"> Here you get ( o-o)~[ 20€ ] </p>
|
||||
<p id="aplus"> Now you HAVE TO get me an A++ (ò-ó) </p>
|
||||
</div>
|
||||
|
||||
<div id="heading">
|
||||
<h1> This is real, this is me</h1>
|
||||
<h2> This is exactly, where I'm supposed to be ♫ </h2>
|
||||
</div>
|
||||
|
||||
<div id="pokemon">
|
||||
<h4> I'm a D I G I M O N </h4>
|
||||
<a href="https://wallpaperaccess.com/full/31008.jpg">
|
||||
<img src="files/pokeball.png" alt="pokeball" width="200" height="240" />
|
||||
</a>
|
||||
<div>
|
||||
<label>Süß, oder?</label>
|
||||
<input type="checkbox">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th> WHICH </th>
|
||||
<th> ONE </th>
|
||||
<th> AM </th>
|
||||
<th> I? </th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="eagle"> <embed class="eagle" src="files/eagle.jpg" type="image/jpeg" width="100" height="100"> </td>
|
||||
<td class="eagle"> <embed src="files/eagle.jpg" type="image/jpeg" width="100" height="100"> </td>
|
||||
<td class="eagle"> <embed src="files/eagle.jpg" type="image/jpeg" width="100" height="100"> </td>
|
||||
<td class="eagle"> <embed src="files/eagle.jpg" type="image/jpeg" width="100" height="100"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="eagle"> <embed src="files/eagle.jpg" type="image/jpeg" width="100" height="100"> </td>
|
||||
<td class="eagle"> <embed src="files/eagle.jpg" type="image/jpeg" width="100" height="100"> </td>
|
||||
<td id="peep"> <embed src="files/robin-redbreast-in-tree-5038867_640.jpg" type="image/jpeg" width="100"
|
||||
height="100"> </td>
|
||||
<td class="eagle"> <embed src="files/eagle.jpg" type="image/jpeg" width="100" height="100"> </td>
|
||||
</tr>
|
||||
</table> <br>
|
||||
|
||||
<div id="kasten_außen">
|
||||
<div class="kasten">
|
||||
Quick Mafs! <br>
|
||||
<code>
|
||||
x = 5; <br>
|
||||
y = 3; <br>
|
||||
x + y = 8;
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div class="kasten">
|
||||
<ol>
|
||||
<li> Ich kann schon </li>
|
||||
<li> den Zahlenbereich </li>
|
||||
<li> von 1 bis 20 </li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="dozent">
|
||||
<p> Ich saß zu viele Stunden an der Aufgabe, irgendwann hab ich das Design nur noch sehr einfach gehalten.
|
||||
Bitte
|
||||
vergebt mir, Eure Dozentheit! :c</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div>
|
||||
<p> Dieser Inhalt steht in einem footer! </p>
|
||||
<p> Jegliche Inhalte werden nicht monetär verwendet! </p>
|
||||
<p> Alle Bilder, die keine Logos sind, wurden von
|
||||
<a href="https://pixabay.com/de/"> Pixabay</a> bezogen </p>
|
||||
<div class="second_nav">
|
||||
<a href=""> <i class="fa fa-facebook-square"></i> </a>
|
||||
<a href=""> <i class="fa fa-instagram"></i> </a>
|
||||
<a href=""> <i class="fa fa-envelope"></i> </a>
|
||||
<a href=""> <i class="fa fa-xing"></i> </a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,116 +1,116 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="basic.css">
|
||||
<link rel="stylesheet" href="contact.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title> Contact </title>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="navigation">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="about_me.html"> About Me! </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="contact.html" class="active"> Contact </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="portfolio.html"> Portfolio </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<svg width="650" height="160">
|
||||
<ellipse cx="325" cy="0" rx="300" ry="150" stroke="#011f4b" stroke-width="5" fill="#005b96" />
|
||||
<text fill="#ffffff" font-size="40" x="200" y="70"> C O N T A C T </text>
|
||||
</svg>
|
||||
|
||||
</header>
|
||||
|
||||
<div class="achthundert">
|
||||
|
||||
<div class="socialMedia">
|
||||
<div class="socialMediaText">
|
||||
<h1> Facebook </h1>
|
||||
<h2> Justin Dretvic </h2>
|
||||
</div>
|
||||
<a href="https://www.facebook.com/justin.dretvic.1">
|
||||
<i class="fa fa-facebook-square" style="font-size:150px"></i>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="socialMedia">
|
||||
<div class="socialMediaText">
|
||||
<h1> Instagram </h1>
|
||||
<h2> @justin_da_ghost </h2>
|
||||
</div>
|
||||
<a href="https://www.instagram.com/justin_da_ghost/">
|
||||
<i class="fa fa-instagram" style="font-size:150px"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="socialMedia">
|
||||
<div class="socialMediaText">
|
||||
<h1> Xing </h1>
|
||||
<h2> Justin Dretvic </h2>
|
||||
</div>
|
||||
<a href="https://www.xing.com/profile/Justin_Dretvic/cv">
|
||||
<i class="fa fa-xing" style="font-size:150px"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="socialMedia">
|
||||
<div class="socialMediaText">
|
||||
<h1> E-Mail </h1>
|
||||
<h2> Justin.Dretvic@hs-furtwangen.de </h2>
|
||||
</div>
|
||||
<a href="mailto:Justin.Dretvic@hs-furtwangen.de">
|
||||
<i class="fa fa-envelope" style="font-size:150px"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="contact_me">
|
||||
<h1>Kontaktiere mich doch!</h1>
|
||||
<form>
|
||||
<input type="text" placeholder="Vorname">
|
||||
<input type="text" placeholder="Nachname">
|
||||
<input type="text" placeholder="E-Mail">
|
||||
<textarea id="textInput" placeholder="Nachricht"></textarea>
|
||||
<p id="extra">Mit Absenden der Nachricht bestätige ich <br>den <a href="files/leertext.pdf">Datenschutz</a></p>
|
||||
<input type="submit" onclick="alert('Ihre Nachricht wurde verschickt')">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- <div class="quick_tip">
|
||||
<p> Look for stuff py pressing <kbd>Ctrl + F</kbd> </p>
|
||||
<p> Hier ist eine <a href="files/leertext.pdf">PDF</a> mit Leertext verlinkt! </p>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div>
|
||||
<p> Dieser Inhalt steht in einem footer! </p>
|
||||
<p> Jegliche Inhalte werden nicht monetär verwendet! </p>
|
||||
<p> Alle Bilder, die keine Logos sind, wurden von
|
||||
<a href="https://pixabay.com/de/"> Pixabay</a> bezogen </p>
|
||||
<div class="second_nav">
|
||||
<a href=""> <i class="fa fa-facebook-square"></i> </a>
|
||||
<a href=""> <i class="fa fa-instagram"></i> </a>
|
||||
<a href=""> <i class="fa fa-envelope"></i> </a>
|
||||
<a href=""> <i class="fa fa-xing"></i> </a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="basic.css">
|
||||
<link rel="stylesheet" href="contact.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title> Contact </title>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="navigation">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="about_me.html"> About Me! </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="contact.html" class="active"> Contact </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="portfolio.html"> Portfolio </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<svg width="650" height="160">
|
||||
<ellipse cx="325" cy="0" rx="300" ry="150" stroke="#011f4b" stroke-width="5" fill="#005b96" />
|
||||
<text fill="#ffffff" font-size="40" x="200" y="70"> C O N T A C T </text>
|
||||
</svg>
|
||||
|
||||
</header>
|
||||
|
||||
<div class="achthundert">
|
||||
|
||||
<div class="socialMedia">
|
||||
<div class="socialMediaText">
|
||||
<h1> Facebook </h1>
|
||||
<h2> Justin Dretvic </h2>
|
||||
</div>
|
||||
<a href="https://www.facebook.com/justin.dretvic.1">
|
||||
<i class="fa fa-facebook-square" style="font-size:150px"></i>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="socialMedia">
|
||||
<div class="socialMediaText">
|
||||
<h1> Instagram </h1>
|
||||
<h2> @justin_da_ghost </h2>
|
||||
</div>
|
||||
<a href="https://www.instagram.com/justin_da_ghost/">
|
||||
<i class="fa fa-instagram" style="font-size:150px"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="socialMedia">
|
||||
<div class="socialMediaText">
|
||||
<h1> Xing </h1>
|
||||
<h2> Justin Dretvic </h2>
|
||||
</div>
|
||||
<a href="https://www.xing.com/profile/Justin_Dretvic/cv">
|
||||
<i class="fa fa-xing" style="font-size:150px"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="socialMedia">
|
||||
<div class="socialMediaText">
|
||||
<h1> E-Mail </h1>
|
||||
<h2> Justin.Dretvic@hs-furtwangen.de </h2>
|
||||
</div>
|
||||
<a href="mailto:Justin.Dretvic@hs-furtwangen.de">
|
||||
<i class="fa fa-envelope" style="font-size:150px"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="contact_me">
|
||||
<h1>Kontaktiere mich doch!</h1>
|
||||
<form>
|
||||
<input type="text" placeholder="Vorname">
|
||||
<input type="text" placeholder="Nachname">
|
||||
<input type="text" placeholder="E-Mail">
|
||||
<textarea id="textInput" placeholder="Nachricht"></textarea>
|
||||
<p id="extra">Mit Absenden der Nachricht bestätige ich <br>den <a href="files/leertext.pdf">Datenschutz</a></p>
|
||||
<input type="submit" onclick="alert('Ihre Nachricht wurde verschickt')">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- <div class="quick_tip">
|
||||
<p> Look for stuff py pressing <kbd>Ctrl + F</kbd> </p>
|
||||
<p> Hier ist eine <a href="files/leertext.pdf">PDF</a> mit Leertext verlinkt! </p>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div>
|
||||
<p> Dieser Inhalt steht in einem footer! </p>
|
||||
<p> Jegliche Inhalte werden nicht monetär verwendet! </p>
|
||||
<p> Alle Bilder, die keine Logos sind, wurden von
|
||||
<a href="https://pixabay.com/de/"> Pixabay</a> bezogen </p>
|
||||
<div class="second_nav">
|
||||
<a href=""> <i class="fa fa-facebook-square"></i> </a>
|
||||
<a href=""> <i class="fa fa-instagram"></i> </a>
|
||||
<a href=""> <i class="fa fa-envelope"></i> </a>
|
||||
<a href=""> <i class="fa fa-xing"></i> </a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,91 +1,91 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="basic.css">
|
||||
<link rel="stylesheet" href="portfolio.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title> Portfolio </title>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<svg width="650" height="160">
|
||||
<ellipse cx="325" cy="0" rx="300" ry="150" stroke="#011f4b" stroke-width="5" fill="#005b96" />
|
||||
<text fill="#ffffff" font-size="50" x="140" y="70"> P O R T F O L I O </text>
|
||||
</svg>
|
||||
|
||||
<div class="navigation">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="about_me.html"> About Me! </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="contact.html"> Contact </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="portfolio.html" class="active"> Portfolio </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<div class="achthundert">
|
||||
|
||||
|
||||
<h1> Willkommen auf meiner Website</h1>
|
||||
|
||||
<h3> Die Website zeigt Ihnen ein paar HTML-Tags </h3>
|
||||
|
||||
<h5> <del> Ich hab jetzt schon 3 HTML-Elemente </del> </h5>
|
||||
|
||||
|
||||
|
||||
<a id="anchor_tag" href="#anchor"> Don't click on me </a> <br><br>
|
||||
|
||||
<div>
|
||||
<label><span>So</span> wurden Farben früher in HTML verwendet: </label>
|
||||
<input type="color">
|
||||
</div>
|
||||
|
||||
<button id="button"> Sinnloser Button. ACHTUNG! SINNLOS!!! </button> <br><br>
|
||||
|
||||
<div class="containment">
|
||||
<iframe id="youtube" src="https://www.youtube.com/embed/-8SY-1f6xn0"
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
|
||||
</iframe> <br><br>
|
||||
</div>
|
||||
|
||||
<div id="audio">
|
||||
<p> Don't you dare pressing on the play-button!</p>
|
||||
<p> I warned you! </p>
|
||||
<audio controls id="anchor">
|
||||
<source src="files/Battle_Cry_High_Pitch.mp3" type="audio/ogg">
|
||||
Your browser does not support the audio element.
|
||||
</audio> <br>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div>
|
||||
<p> Dieser Inhalt steht in einem footer! </p>
|
||||
<p> Jegliche Inhalte werden nicht monetär verwendet! </p>
|
||||
<p> Alle Bilder, die keine Logos sind, wurden von
|
||||
<a href="https://pixabay.com/de/"> Pixabay</a> bezogen </p>
|
||||
<div class="second_nav">
|
||||
<a href=""> <i class="fa fa-facebook-square"></i> </a>
|
||||
<a href=""> <i class="fa fa-instagram"></i> </a>
|
||||
<a href=""> <i class="fa fa-envelope"></i> </a>
|
||||
<a href=""> <i class="fa fa-xing"></i> </a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="basic.css">
|
||||
<link rel="stylesheet" href="portfolio.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title> Portfolio </title>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<svg width="650" height="160">
|
||||
<ellipse cx="325" cy="0" rx="300" ry="150" stroke="#011f4b" stroke-width="5" fill="#005b96" />
|
||||
<text fill="#ffffff" font-size="50" x="140" y="70"> P O R T F O L I O </text>
|
||||
</svg>
|
||||
|
||||
<div class="navigation">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="about_me.html"> About Me! </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="contact.html"> Contact </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="portfolio.html" class="active"> Portfolio </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<div class="achthundert">
|
||||
|
||||
|
||||
<h1> Willkommen auf meiner Website</h1>
|
||||
|
||||
<h3> Die Website zeigt Ihnen ein paar HTML-Tags </h3>
|
||||
|
||||
<h5> <del> Ich hab jetzt schon 3 HTML-Elemente </del> </h5>
|
||||
|
||||
|
||||
|
||||
<a id="anchor_tag" href="#anchor"> Don't click on me </a> <br><br>
|
||||
|
||||
<div>
|
||||
<label><span>So</span> wurden Farben früher in HTML verwendet: </label>
|
||||
<input type="color">
|
||||
</div>
|
||||
|
||||
<button id="button"> Sinnloser Button. ACHTUNG! SINNLOS!!! </button> <br><br>
|
||||
|
||||
<div class="containment">
|
||||
<iframe id="youtube" src="https://www.youtube.com/embed/-8SY-1f6xn0"
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
|
||||
</iframe> <br><br>
|
||||
</div>
|
||||
|
||||
<div id="audio">
|
||||
<p> Don't you dare pressing on the play-button!</p>
|
||||
<p> I warned you! </p>
|
||||
<audio controls id="anchor">
|
||||
<source src="files/Battle_Cry_High_Pitch.mp3" type="audio/ogg">
|
||||
Your browser does not support the audio element.
|
||||
</audio> <br>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div>
|
||||
<p> Dieser Inhalt steht in einem footer! </p>
|
||||
<p> Jegliche Inhalte werden nicht monetär verwendet! </p>
|
||||
<p> Alle Bilder, die keine Logos sind, wurden von
|
||||
<a href="https://pixabay.com/de/"> Pixabay</a> bezogen </p>
|
||||
<div class="second_nav">
|
||||
<a href=""> <i class="fa fa-facebook-square"></i> </a>
|
||||
<a href=""> <i class="fa fa-instagram"></i> </a>
|
||||
<a href=""> <i class="fa fa-envelope"></i> </a>
|
||||
<a href=""> <i class="fa fa-xing"></i> </a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,161 +1,161 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<title> used tags </title>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<table>
|
||||
<tr>
|
||||
<th> tag </th>
|
||||
<th> Nutzen</th>
|
||||
<th> portfolio </th>
|
||||
<th> About_me </th>
|
||||
<th> contact </th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <h1–6> </td>
|
||||
<td> header </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <p> </td>
|
||||
<td> paragraph</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <del> </td>
|
||||
<td> deleted </td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <a> </td>
|
||||
<td> anchor </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <ul> </td>
|
||||
<td> unordered list </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <ol> </td>
|
||||
<td> ordered list </td>
|
||||
<td> [ ]</td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <div> </td>
|
||||
<td> Container </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <table> </td>
|
||||
<td> Tabelle </td>
|
||||
<td> [ ]</td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <code> </td>
|
||||
<td> code-block</td>
|
||||
<td> [ ]</td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <img> </td>
|
||||
<td> image </td>
|
||||
<td> [ ]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <button> </td>
|
||||
<td> button </td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <iframe> </td>
|
||||
<td> iframe </td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <audio> </td>
|
||||
<td> audio control </td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <br> </td>
|
||||
<td> break </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <embed> </td>
|
||||
<td> embed </td>
|
||||
<td> [ ]</td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <label> </td>
|
||||
<td> label </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <input> </td>
|
||||
<td> input </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <footer> </td>
|
||||
<td> footer </td>
|
||||
<td> [ ]</td>
|
||||
<td> [ ]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <blockquote> </td>
|
||||
<td> blockquote </td>
|
||||
<td> [ ]</td>
|
||||
<td> [ ]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <b> </td>
|
||||
<td> </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<title> used tags </title>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<table>
|
||||
<tr>
|
||||
<th> tag </th>
|
||||
<th> Nutzen</th>
|
||||
<th> portfolio </th>
|
||||
<th> About_me </th>
|
||||
<th> contact </th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <h1–6> </td>
|
||||
<td> header </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <p> </td>
|
||||
<td> paragraph</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <del> </td>
|
||||
<td> deleted </td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <a> </td>
|
||||
<td> anchor </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <ul> </td>
|
||||
<td> unordered list </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <ol> </td>
|
||||
<td> ordered list </td>
|
||||
<td> [ ]</td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <div> </td>
|
||||
<td> Container </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <table> </td>
|
||||
<td> Tabelle </td>
|
||||
<td> [ ]</td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <code> </td>
|
||||
<td> code-block</td>
|
||||
<td> [ ]</td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <img> </td>
|
||||
<td> image </td>
|
||||
<td> [ ]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <button> </td>
|
||||
<td> button </td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <iframe> </td>
|
||||
<td> iframe </td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <audio> </td>
|
||||
<td> audio control </td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <br> </td>
|
||||
<td> break </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <embed> </td>
|
||||
<td> embed </td>
|
||||
<td> [ ]</td>
|
||||
<td> [X]</td>
|
||||
<td> [ ]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <label> </td>
|
||||
<td> label </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <input> </td>
|
||||
<td> input </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <footer> </td>
|
||||
<td> footer </td>
|
||||
<td> [ ]</td>
|
||||
<td> [ ]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <blockquote> </td>
|
||||
<td> blockquote </td>
|
||||
<td> [ ]</td>
|
||||
<td> [ ]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <b> </td>
|
||||
<td> </td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
<td> [X]</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,302 +1,302 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" media="screen and (max-width: 600px)" href="product-small.css">
|
||||
<link rel="stylesheet" media="screen and (min-width: 601px)" href="product-medium.css">
|
||||
<link rel="stylesheet" media="screen and (min-width: 1025px)" href="product-big.css">
|
||||
<link rel="stylesheet" href="shop.css">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>green grass</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="title_bar">
|
||||
<img src="files/grass_icon_left.png" alt="grass" />
|
||||
<span>GREEEN GRASS</span>
|
||||
<img src="files/grass_icon_right.png" alt="grass" />
|
||||
</div>
|
||||
<div id="bottom">
|
||||
<div class="dropdown">
|
||||
<span>Categories</span>
|
||||
<ul class="dropdown-content">
|
||||
<li><a href="#special">~ Special Offers ~</a></li>
|
||||
<li><a href="#bunt">~ Colored Grass ~</a></li>
|
||||
<li><a href="#grün">~ Green-Tones ~</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="shopping_cart">
|
||||
<a href=""><i class="fas fa-shopping-cart" style='font-size:24px'></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="übersicht">
|
||||
<h1 id="special">Special Offers!</h1>
|
||||
<div class="container">
|
||||
<div class="product">
|
||||
<h3 class="title"> Color: Rainbow </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 3279,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-rainbow-square.png" alt="Product" />
|
||||
<p class="size"> Size: 4m²</p>
|
||||
<div class="description">
|
||||
<p> If you can't choose one color, go and catch them all!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Color: White </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 3279,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-white.png" alt="Product" />
|
||||
<p class="size"> Size: 4m²</p>
|
||||
<p class="description"> The appearance of many sparkling stars on your garden floor.</p>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Color: Black </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 3279,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-black.png" alt="Product" />
|
||||
<p class="size"> Size: 4m²</p>
|
||||
<div class="description">
|
||||
<p> Dark as the night. Be careful not to form a black hole!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Pattern: Murica </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 3279,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-green-murica.png" alt="Product" />
|
||||
<p class="size"> Size: 4m²</p>
|
||||
<div class="description">
|
||||
<p> Texas, Trump, Guns & Hamburgers</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Pattern: Schachbrett </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 3279,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-green-chess-square.png" alt="Product" />
|
||||
<p class="size"> Size: 4m²</p>
|
||||
<div class="description">
|
||||
<p> Show your intellect on your own lawn and embarrass your opponents!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 id="bunt">Bunte Gräser!</h1>
|
||||
<div class="container">
|
||||
<div class="product">
|
||||
<h3 class="title"> Color: Green </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 2339,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-green.png" alt="Product" />
|
||||
<p class="size"> Size: 4m²</p>
|
||||
<div class="description">
|
||||
<p> The standard model in our range. Ensures a natural look and pleasant freshness in your living room!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Color: Desert </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 2339,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-yellow.png" alt="Product" />
|
||||
<p class="size"> Size: 4m²</p>
|
||||
<div class="description">
|
||||
<p> Summer, sun and oh my god, I'm hot! Are they pyramids in my garden ?!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Color: Beach </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 2339,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-orange.png" alt="Product" />
|
||||
<p class="size"> Size: 4m²</p>
|
||||
<div class="description">
|
||||
<p> Summer, sun and hot feelings!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Color: Hell </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 2339,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-red.png" alt="Product" />
|
||||
<p class="size"> Size: 4m²</p>
|
||||
<div class="description">
|
||||
<p> Look into the abyss that could await you after your death and invite guests to it!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Color: Unicorn </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 2339,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-pink.png" alt="Product" />
|
||||
<p class="size"> Size: 4m²</p>
|
||||
<div class="description">
|
||||
<p> PINK FLUFFY UNICORN, DANCING ON RAINBOWS (which you can also buy in here) !!!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Color: Grape </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 2339,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-purple.png" alt="Product" />
|
||||
<p class="size"> Size: 4m²</p>
|
||||
<div class="description">
|
||||
<p> It looks purple. Do you have to say more?</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Color: Atlantic </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 2339,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-blue.png" alt="Product" />
|
||||
<p class="size"> Size: 4m²</p>
|
||||
<div class="description">
|
||||
<p>Blue like the ocean. A deep look and mysterious nature.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 id="grün">Green-Tones!</h1>
|
||||
<div class="container">
|
||||
<div class="product">
|
||||
<h3 class="title"> Green: 3B </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 3499,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-green-dark-3.png" alt="Product" />
|
||||
<p class="size"> Size: 10m²</p>
|
||||
<div class="description">
|
||||
<p>Green in every way. Nothing more to know about it.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Green: 2B </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 3499,99 </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-green-dark-2.png" alt="Product" />
|
||||
<p class="size"> Size: 10m²</p>
|
||||
<div class="description">
|
||||
<p>Green in every way. Nothing more to know about it.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Green: B </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 3499,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-green-dark-1.png" alt="Product" />
|
||||
<p class="size"> Size: 10m²</p>
|
||||
<div class="description">
|
||||
<p>Green in every way. Nothing more to know about it.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Green: HB </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 2339,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-green.png" alt="Product" />
|
||||
<p class="size"> Size: 10m²</p>
|
||||
<div class="description">
|
||||
<p>The standard model in our range. Ensures a natural look and pleasant freshness in your living room!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Size: H </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 3499,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-green-light-1.png" alt="Product" />
|
||||
<p class="size"> Size: 10m²</p>
|
||||
<div class="description">
|
||||
<p>Green in every way. Nothing more to know about it.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Size: 2H </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 3499,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-green-light-2.png" alt="Product" />
|
||||
<p class="size"> Size: 10m²</p>
|
||||
<div class="description">
|
||||
<p>Green in every way. Nothing more to know about it.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Green: 3H </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 3499,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-green-light-3.png" alt="Product" />
|
||||
<p class="size"> Size: 10m²</p>
|
||||
<div class="description">
|
||||
<p>Green in every way. Nothing more to know about it.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<h1>Disclaimer</h1>
|
||||
<p>This website is not used monetarily </p>
|
||||
<p>Not even if things seem to be sold here!</p>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" media="screen and (max-width: 600px)" href="product-small.css">
|
||||
<link rel="stylesheet" media="screen and (min-width: 601px)" href="product-medium.css">
|
||||
<link rel="stylesheet" media="screen and (min-width: 1025px)" href="product-big.css">
|
||||
<link rel="stylesheet" href="shop.css">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>green grass</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="title_bar">
|
||||
<img src="files/grass_icon_left.png" alt="grass" />
|
||||
<span>GREEEN GRASS</span>
|
||||
<img src="files/grass_icon_right.png" alt="grass" />
|
||||
</div>
|
||||
<div id="bottom">
|
||||
<div class="dropdown">
|
||||
<span>Categories</span>
|
||||
<ul class="dropdown-content">
|
||||
<li><a href="#special">~ Special Offers ~</a></li>
|
||||
<li><a href="#bunt">~ Colored Grass ~</a></li>
|
||||
<li><a href="#grün">~ Green-Tones ~</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="shopping_cart">
|
||||
<a href=""><i class="fas fa-shopping-cart" style='font-size:24px'></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="übersicht">
|
||||
<h1 id="special">Special Offers!</h1>
|
||||
<div class="container">
|
||||
<div class="product">
|
||||
<h3 class="title"> Color: Rainbow </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 3279,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-rainbow-square.png" alt="Product" />
|
||||
<p class="size"> Size: 4m²</p>
|
||||
<div class="description">
|
||||
<p> If you can't choose one color, go and catch them all!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Color: White </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 3279,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-white.png" alt="Product" />
|
||||
<p class="size"> Size: 4m²</p>
|
||||
<p class="description"> The appearance of many sparkling stars on your garden floor.</p>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Color: Black </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 3279,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-black.png" alt="Product" />
|
||||
<p class="size"> Size: 4m²</p>
|
||||
<div class="description">
|
||||
<p> Dark as the night. Be careful not to form a black hole!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Pattern: Murica </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 3279,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-green-murica.png" alt="Product" />
|
||||
<p class="size"> Size: 4m²</p>
|
||||
<div class="description">
|
||||
<p> Texas, Trump, Guns & Hamburgers</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Pattern: Schachbrett </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 3279,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-green-chess-square.png" alt="Product" />
|
||||
<p class="size"> Size: 4m²</p>
|
||||
<div class="description">
|
||||
<p> Show your intellect on your own lawn and embarrass your opponents!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 id="bunt">Bunte Gräser!</h1>
|
||||
<div class="container">
|
||||
<div class="product">
|
||||
<h3 class="title"> Color: Green </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 2339,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-green.png" alt="Product" />
|
||||
<p class="size"> Size: 4m²</p>
|
||||
<div class="description">
|
||||
<p> The standard model in our range. Ensures a natural look and pleasant freshness in your living room!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Color: Desert </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 2339,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-yellow.png" alt="Product" />
|
||||
<p class="size"> Size: 4m²</p>
|
||||
<div class="description">
|
||||
<p> Summer, sun and oh my god, I'm hot! Are they pyramids in my garden ?!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Color: Beach </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 2339,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-orange.png" alt="Product" />
|
||||
<p class="size"> Size: 4m²</p>
|
||||
<div class="description">
|
||||
<p> Summer, sun and hot feelings!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Color: Hell </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 2339,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-red.png" alt="Product" />
|
||||
<p class="size"> Size: 4m²</p>
|
||||
<div class="description">
|
||||
<p> Look into the abyss that could await you after your death and invite guests to it!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Color: Unicorn </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 2339,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-pink.png" alt="Product" />
|
||||
<p class="size"> Size: 4m²</p>
|
||||
<div class="description">
|
||||
<p> PINK FLUFFY UNICORN, DANCING ON RAINBOWS (which you can also buy in here) !!!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Color: Grape </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 2339,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-purple.png" alt="Product" />
|
||||
<p class="size"> Size: 4m²</p>
|
||||
<div class="description">
|
||||
<p> It looks purple. Do you have to say more?</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Color: Atlantic </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 2339,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-blue.png" alt="Product" />
|
||||
<p class="size"> Size: 4m²</p>
|
||||
<div class="description">
|
||||
<p>Blue like the ocean. A deep look and mysterious nature.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 id="grün">Green-Tones!</h1>
|
||||
<div class="container">
|
||||
<div class="product">
|
||||
<h3 class="title"> Green: 3B </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 3499,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-green-dark-3.png" alt="Product" />
|
||||
<p class="size"> Size: 10m²</p>
|
||||
<div class="description">
|
||||
<p>Green in every way. Nothing more to know about it.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Green: 2B </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 3499,99 </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-green-dark-2.png" alt="Product" />
|
||||
<p class="size"> Size: 10m²</p>
|
||||
<div class="description">
|
||||
<p>Green in every way. Nothing more to know about it.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Green: B </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 3499,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-green-dark-1.png" alt="Product" />
|
||||
<p class="size"> Size: 10m²</p>
|
||||
<div class="description">
|
||||
<p>Green in every way. Nothing more to know about it.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Green: HB </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 2339,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-green.png" alt="Product" />
|
||||
<p class="size"> Size: 10m²</p>
|
||||
<div class="description">
|
||||
<p>The standard model in our range. Ensures a natural look and pleasant freshness in your living room!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Size: H </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 3499,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-green-light-1.png" alt="Product" />
|
||||
<p class="size"> Size: 10m²</p>
|
||||
<div class="description">
|
||||
<p>Green in every way. Nothing more to know about it.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Size: 2H </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 3499,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-green-light-2.png" alt="Product" />
|
||||
<p class="size"> Size: 10m²</p>
|
||||
<div class="description">
|
||||
<p>Green in every way. Nothing more to know about it.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product">
|
||||
<h3 class="title"> Green: 3H </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> 3499,99 ¥ </span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/grass-green-light-3.png" alt="Product" />
|
||||
<p class="size"> Size: 10m²</p>
|
||||
<div class="description">
|
||||
<p>Green in every way. Nothing more to know about it.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<h1>Disclaimer</h1>
|
||||
<p>This website is not used monetarily </p>
|
||||
<p>Not even if things seem to be sold here!</p>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 MiB After Width: | Height: | Size: 2.7 MiB |
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 = `
|
||||
<h3 class="title"> ${categories[nummer].products[index].title} </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> ${categories[nummer].products[index].price} ¥</span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/${categories[nummer].products[index].imgName}" alt="Product" />
|
||||
<p class="size"> Size: ${categories[nummer].products[index].size}</p>
|
||||
<div class="description">
|
||||
<p> ${categories[nummer].products[index].description}</p>
|
||||
</div>
|
||||
product.innerHTML = `
|
||||
<h3 class="title"> ${categories[nummer].products[index].title} </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> ${categories[nummer].products[index].price} ¥</span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/${categories[nummer].products[index].imgName}" alt="Product" />
|
||||
<p class="size"> Size: ${categories[nummer].products[index].size}</p>
|
||||
<div class="description">
|
||||
<p> ${categories[nummer].products[index].description}</p>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(product);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}`;
|
||||
(<HTMLDivElement>document.querySelector("#übersicht")).appendChild(heading);
|
||||
|
||||
let container: HTMLDivElement = document.createElement("div");
|
||||
container.classList.add("container");
|
||||
(<HTMLDivElement>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 = `
|
||||
<h3 class="title"> ${categories[nummer].products[index].title} </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> ${categories[nummer].products[index].price} ¥</span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/${categories[nummer].products[index].imgName}" alt="Product" />
|
||||
<p class="size"> Size: ${categories[nummer].products[index].size}</p>
|
||||
<div class="description">
|
||||
<p> ${categories[nummer].products[index].description}</p>
|
||||
</div>
|
||||
`;
|
||||
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
|
||||
<div class="product"> tag class
|
||||
<h3 class="title"> Color: Rainbow </h3> tag class content
|
||||
<div class=shopIn> tag class
|
||||
<span class="price"> 3279,99 ¥ </span> tag class content
|
||||
<button>+</button> tag content
|
||||
<button>-</button> tag content
|
||||
</div>
|
||||
<img src="files/grass-rainbow-square.png" alt="Product" /> tag attribute1 attribute2
|
||||
<p class="size"> Size: 4m²</p> tag class content
|
||||
<div class="description"> tag class
|
||||
<p> If you can't choose one color, go and catch them all!</p> tag content
|
||||
</div>
|
||||
</div>
|
||||
// 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}`;
|
||||
(<HTMLDivElement>document.querySelector("#übersicht")).appendChild(heading);
|
||||
|
||||
let container: HTMLDivElement = document.createElement("div");
|
||||
container.classList.add("container");
|
||||
(<HTMLDivElement>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 = `
|
||||
<h3 class="title"> ${categories[nummer].products[index].title} </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> ${categories[nummer].products[index].price} ¥</span>
|
||||
<button>+</button>
|
||||
<button>-</button>
|
||||
</div>
|
||||
<img src="files/${categories[nummer].products[index].imgName}" alt="Product" />
|
||||
<p class="size"> Size: ${categories[nummer].products[index].size}</p>
|
||||
<div class="description">
|
||||
<p> ${categories[nummer].products[index].description}</p>
|
||||
</div>
|
||||
`;
|
||||
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
|
||||
<div class="product"> tag class
|
||||
<h3 class="title"> Color: Rainbow </h3> tag class content
|
||||
<div class=shopIn> tag class
|
||||
<span class="price"> 3279,99 ¥ </span> tag class content
|
||||
<button>+</button> tag content
|
||||
<button>-</button> tag content
|
||||
</div>
|
||||
<img src="files/grass-rainbow-square.png" alt="Product" /> tag attribute1 attribute2
|
||||
<p class="size"> Size: 4m²</p> tag class content
|
||||
<div class="description"> tag class
|
||||
<p> If you can't choose one color, go and catch them all!</p> tag content
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,50 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" media="screen and (max-width: 600px)" href="product-small.css">
|
||||
<link rel="stylesheet" media="screen and (min-width: 601px)" href="product-medium.css">
|
||||
<link rel="stylesheet" media="screen and (min-width: 1025px)" href="product-big.css">
|
||||
<link rel="stylesheet" href="shop.css">
|
||||
<script src="script.js" defer></script>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>green grass</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="title_bar">
|
||||
<img src="files/grass_icon_left.png" alt="grass" />
|
||||
<span>GREEEN GRASS</span>
|
||||
<img src="files/grass_icon_right.png" alt="grass" />
|
||||
</div>
|
||||
<div id="bottom">
|
||||
<div class="dropdown">
|
||||
<span>Categories</span>
|
||||
<ul class="dropdown-content">
|
||||
<li><a href="#special">~ Special Offers ~</a></li>
|
||||
<li><a href="#bunt">~ Colored Grass ~</a></li>
|
||||
<li><a href="#grün">~ Green-Tones ~</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="shopping_cart">
|
||||
<a href=""><i class="fas fa-shopping-cart" style='font-size:24px'></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="übersicht">
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<h1>Disclaimer</h1>
|
||||
<p>This website is not used monetarily </p>
|
||||
<p>Not even if things seem to be sold here!</p>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" media="screen and (max-width: 600px)" href="product-small.css">
|
||||
<link rel="stylesheet" media="screen and (min-width: 601px)" href="product-medium.css">
|
||||
<link rel="stylesheet" media="screen and (min-width: 1025px)" href="product-big.css">
|
||||
<link rel="stylesheet" href="shop.css">
|
||||
<script src="script.js" defer></script>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>green grass</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="title_bar">
|
||||
<img src="files/grass_icon_left.png" alt="grass" />
|
||||
<span>GREEEN GRASS</span>
|
||||
<img src="files/grass_icon_right.png" alt="grass" />
|
||||
</div>
|
||||
<div id="bottom">
|
||||
<div class="dropdown">
|
||||
<span>Categories</span>
|
||||
<ul class="dropdown-content">
|
||||
<li><a href="#special">~ Special Offers ~</a></li>
|
||||
<li><a href="#bunt">~ Colored Grass ~</a></li>
|
||||
<li><a href="#grün">~ Green-Tones ~</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="shopping_cart">
|
||||
<a href=""><i class="fas fa-shopping-cart" style='font-size:24px'></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="übersicht">
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<h1>Disclaimer</h1>
|
||||
<p>This website is not used monetarily </p>
|
||||
<p>Not even if things seem to be sold here!</p>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 = `
|
||||
<h3 class="title"> ${categories[nummer].products[index].title} </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> ${categories[nummer].products[index].price.toFixed(2).toLocaleString()} ¥</span>
|
||||
<button class="addProduct" productPrice="${categories[nummer].products[index].price}">+</button>
|
||||
<button class="removeProduct">-</button>
|
||||
</div>
|
||||
<img src="files/${categories[nummer].products[index].imgName}" alt="Product" />
|
||||
<p class="size"> Size: ${categories[nummer].products[index].size}</p>
|
||||
<div class="description">
|
||||
<p> ${categories[nummer].products[index].description}</p>
|
||||
</div>
|
||||
product.innerHTML = `
|
||||
<h3 class="title"> ${categories[nummer].products[index].title} </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> ${categories[nummer].products[index].price.toFixed(2).toLocaleString()} ¥</span>
|
||||
<button class="addProduct" productPrice="${categories[nummer].products[index].price}">+</button>
|
||||
<button class="removeProduct">-</button>
|
||||
</div>
|
||||
<img src="files/${categories[nummer].products[index].imgName}" alt="Product" />
|
||||
<p class="size"> Size: ${categories[nummer].products[index].size}</p>
|
||||
<div class="description">
|
||||
<p> ${categories[nummer].products[index].description}</p>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(product);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}`;
|
||||
(<HTMLDivElement>document.querySelector("#übersicht")).appendChild(heading);
|
||||
|
||||
let container: HTMLDivElement = document.createElement("div");
|
||||
container.classList.add("container");
|
||||
(<HTMLDivElement>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 = `
|
||||
<h3 class="title"> ${categories[nummer].products[index].title} </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> ${categories[nummer].products[index].price.toFixed(2).toLocaleString()} ¥</span>
|
||||
<button class="addProduct" productPrice="${categories[nummer].products[index].price}">+</button>
|
||||
<button class="removeProduct">-</button>
|
||||
</div>
|
||||
<img src="files/${categories[nummer].products[index].imgName}" alt="Product" />
|
||||
<p class="size"> Size: ${categories[nummer].products[index].size}</p>
|
||||
<div class="description">
|
||||
<p> ${categories[nummer].products[index].description}</p>
|
||||
</div>
|
||||
`;
|
||||
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 = (<HTMLDivElement>document.querySelector("#übersicht"));
|
||||
alles.innerHTML = "";
|
||||
}
|
||||
}
|
||||
|
||||
(<HTMLLIElement>document.querySelector("#special_a")).addEventListener("click", drawSpecial);
|
||||
function drawSpecial(): void {
|
||||
printProducts(0);
|
||||
}
|
||||
(<HTMLLIElement>document.querySelector("#bunt_a")).addEventListener("click", drawBunt);
|
||||
function drawBunt(): void {
|
||||
printProducts(1);
|
||||
}
|
||||
(<HTMLLIElement>document.querySelector("#grün_a")).addEventListener("click", drawGrün);
|
||||
function drawGrün(): void {
|
||||
printProducts(2);
|
||||
}
|
||||
(<HTMLLIElement>document.querySelector("#all_a")).addEventListener("click", drawAll);
|
||||
function drawAll(): void {
|
||||
printProducts(100);
|
||||
}
|
||||
|
||||
function money(_event: Event): void {
|
||||
let target: HTMLElement = (<HTMLElement>_event.target);
|
||||
let price: number = parseFloat(target.getAttribute("productPrice")!);
|
||||
console.log("Artikel-Preis: " + price + " ¥");
|
||||
shoppingPrice += price;
|
||||
console.log("Shopping-Cart-Preis: " + shoppingPrice + " ¥");
|
||||
shoppingCount++;
|
||||
(<HTMLLIElement>document.querySelector("#shoppingCartNumber")).innerHTML = shoppingCount.toLocaleString();
|
||||
}
|
||||
|
||||
function addShoppingFunction(): void {
|
||||
const buttons: HTMLCollectionOf<Element> = 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
|
||||
<div class="product"> tag class
|
||||
<h3 class="title"> Color: Rainbow </h3> tag class content
|
||||
<div class=shopIn> tag class
|
||||
<span class="price"> 3279,99 ¥ </span> tag class content
|
||||
<button>+</button> tag content
|
||||
<button>-</button> tag content
|
||||
</div>
|
||||
<img src="files/grass-rainbow-square.png" alt="Product" /> tag attribute1 attribute2
|
||||
<p class="size"> Size: 4m²</p> tag class content
|
||||
<div class="description"> tag class
|
||||
<p> If you can't choose one color, go and catch them all!</p> tag content
|
||||
</div>
|
||||
</div>
|
||||
// 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}`;
|
||||
(<HTMLDivElement>document.querySelector("#übersicht")).appendChild(heading);
|
||||
|
||||
let container: HTMLDivElement = document.createElement("div");
|
||||
container.classList.add("container");
|
||||
(<HTMLDivElement>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 = `
|
||||
<h3 class="title"> ${categories[nummer].products[index].title} </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> ${categories[nummer].products[index].price.toFixed(2).toLocaleString()} ¥</span>
|
||||
<button class="addProduct" productPrice="${categories[nummer].products[index].price}">+</button>
|
||||
<button class="removeProduct">-</button>
|
||||
</div>
|
||||
<img src="files/${categories[nummer].products[index].imgName}" alt="Product" />
|
||||
<p class="size"> Size: ${categories[nummer].products[index].size}</p>
|
||||
<div class="description">
|
||||
<p> ${categories[nummer].products[index].description}</p>
|
||||
</div>
|
||||
`;
|
||||
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 = (<HTMLDivElement>document.querySelector("#übersicht"));
|
||||
alles.innerHTML = "";
|
||||
}
|
||||
}
|
||||
|
||||
(<HTMLLIElement>document.querySelector("#special_a")).addEventListener("click", drawSpecial);
|
||||
function drawSpecial(): void {
|
||||
printProducts(0);
|
||||
}
|
||||
(<HTMLLIElement>document.querySelector("#bunt_a")).addEventListener("click", drawBunt);
|
||||
function drawBunt(): void {
|
||||
printProducts(1);
|
||||
}
|
||||
(<HTMLLIElement>document.querySelector("#grün_a")).addEventListener("click", drawGrün);
|
||||
function drawGrün(): void {
|
||||
printProducts(2);
|
||||
}
|
||||
(<HTMLLIElement>document.querySelector("#all_a")).addEventListener("click", drawAll);
|
||||
function drawAll(): void {
|
||||
printProducts(100);
|
||||
}
|
||||
|
||||
function money(_event: Event): void {
|
||||
let target: HTMLElement = (<HTMLElement>_event.target);
|
||||
let price: number = parseFloat(target.getAttribute("productPrice")!);
|
||||
console.log("Artikel-Preis: " + price + " ¥");
|
||||
shoppingPrice += price;
|
||||
console.log("Shopping-Cart-Preis: " + shoppingPrice + " ¥");
|
||||
shoppingCount++;
|
||||
(<HTMLLIElement>document.querySelector("#shoppingCartNumber")).innerHTML = shoppingCount.toLocaleString();
|
||||
}
|
||||
|
||||
function addShoppingFunction(): void {
|
||||
const buttons: HTMLCollectionOf<Element> = 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
|
||||
<div class="product"> tag class
|
||||
<h3 class="title"> Color: Rainbow </h3> tag class content
|
||||
<div class=shopIn> tag class
|
||||
<span class="price"> 3279,99 ¥ </span> tag class content
|
||||
<button>+</button> tag content
|
||||
<button>-</button> tag content
|
||||
</div>
|
||||
<img src="files/grass-rainbow-square.png" alt="Product" /> tag attribute1 attribute2
|
||||
<p class="size"> Size: 4m²</p> tag class content
|
||||
<div class="description"> tag class
|
||||
<p> If you can't choose one color, go and catch them all!</p> tag content
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,51 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" media="screen and (max-width: 600px)" href="product-small.css">
|
||||
<link rel="stylesheet" media="screen and (min-width: 601px)" href="product-medium.css">
|
||||
<link rel="stylesheet" media="screen and (min-width: 1025px)" href="product-big.css">
|
||||
<link rel="stylesheet" href="shop.css">
|
||||
<script src="script.js" defer></script>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>green grass</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="title_bar">
|
||||
<img src="files/grass_icon_left.png" alt="grass" />
|
||||
<span>GREEEN GRASS</span>
|
||||
<img src="files/grass_icon_right.png" alt="grass" />
|
||||
</div>
|
||||
<div id="bottom">
|
||||
<div class="dropdown">
|
||||
<span>Categories</span>
|
||||
<ul class="dropdown-content">
|
||||
<li id="special_a"><a>~ Special Offers ~</a></li>
|
||||
<li id="bunt_a"><a>~ Colored Grass ~</a></li>
|
||||
<li id="grün_a"><a>~ Green-Tones ~</a></li>
|
||||
<li id="all_a"><a>~ Show All ~</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="shopping_cart">
|
||||
<a href=""><span id=shoppingCartNumber> </span><i class="fas fa-shopping-cart" style='font-size:24px'> </i></a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="übersicht">
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<h1>Disclaimer</h1>
|
||||
<p>This website is not used monetarily </p>
|
||||
<p>Not even if things seem to be sold here!</p>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" media="screen and (max-width: 600px)" href="product-small.css">
|
||||
<link rel="stylesheet" media="screen and (min-width: 601px)" href="product-medium.css">
|
||||
<link rel="stylesheet" media="screen and (min-width: 1025px)" href="product-big.css">
|
||||
<link rel="stylesheet" href="shop.css">
|
||||
<script src="script.js" defer></script>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>green grass</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="title_bar">
|
||||
<img src="files/grass_icon_left.png" alt="grass" />
|
||||
<span>GREEEN GRASS</span>
|
||||
<img src="files/grass_icon_right.png" alt="grass" />
|
||||
</div>
|
||||
<div id="bottom">
|
||||
<div class="dropdown">
|
||||
<span>Categories</span>
|
||||
<ul class="dropdown-content">
|
||||
<li id="special_a"><a>~ Special Offers ~</a></li>
|
||||
<li id="bunt_a"><a>~ Colored Grass ~</a></li>
|
||||
<li id="grün_a"><a>~ Green-Tones ~</a></li>
|
||||
<li id="all_a"><a>~ Show All ~</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="shopping_cart">
|
||||
<a href=""><span id=shoppingCartNumber> </span><i class="fas fa-shopping-cart" style='font-size:24px'> </i></a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="übersicht">
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<h1>Disclaimer</h1>
|
||||
<p>This website is not used monetarily </p>
|
||||
<p>Not even if things seem to be sold here!</p>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -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."
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,51 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
|
||||
<link SameSite="Secure" href="https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" media="screen and (max-width: 600px)" href="product-small.css">
|
||||
<link rel="stylesheet" media="screen and (min-width: 601px)" href="product-medium.css">
|
||||
<link rel="stylesheet" media="screen and (min-width: 1025px)" href="product-big.css">
|
||||
<link rel="stylesheet" href="shop.css">
|
||||
<script src="shop.js" defer></script>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>green grass</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="title_bar">
|
||||
<img src="files/grass_icon_left.png" alt="grass" />
|
||||
<span>GREEEN GRASS</span>
|
||||
<img src="files/grass_icon_right.png" alt="grass" />
|
||||
</div>
|
||||
<div id="bottom">
|
||||
<div class="dropdown">
|
||||
<span>Categories</span>
|
||||
<ul class="dropdown-content">
|
||||
<li id="special_a"><a>~ Special Offers ~</a></li>
|
||||
<li id="bunt_a"><a>~ Colored Grass ~</a></li>
|
||||
<li id="grün_a"><a>~ Green-Tones ~</a></li>
|
||||
<li id="all_a"><a>~ Show All ~</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="shopping_cart">
|
||||
<a href="shoppingCart.html"><span id=shoppingCartNumber> </span><i class="fas fa-shopping-cart" style='font-size:24px'> </i></a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="übersicht">
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<h1>Disclaimer</h1>
|
||||
<p>This website is not used monetarily </p>
|
||||
<p>Not even if things seem to be sold here!</p>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
|
||||
<link SameSite="Secure" href="https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" media="screen and (max-width: 600px)" href="product-small.css">
|
||||
<link rel="stylesheet" media="screen and (min-width: 601px)" href="product-medium.css">
|
||||
<link rel="stylesheet" media="screen and (min-width: 1025px)" href="product-big.css">
|
||||
<link rel="stylesheet" href="shop.css">
|
||||
<script src="shop.js" defer></script>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>green grass</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="title_bar">
|
||||
<img src="files/grass_icon_left.png" alt="grass" />
|
||||
<span>GREEEN GRASS</span>
|
||||
<img src="files/grass_icon_right.png" alt="grass" />
|
||||
</div>
|
||||
<div id="bottom">
|
||||
<div class="dropdown">
|
||||
<span>Categories</span>
|
||||
<ul class="dropdown-content">
|
||||
<li id="special_a"><a>~ Special Offers ~</a></li>
|
||||
<li id="bunt_a"><a>~ Colored Grass ~</a></li>
|
||||
<li id="grün_a"><a>~ Green-Tones ~</a></li>
|
||||
<li id="all_a"><a>~ Show All ~</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="shopping_cart">
|
||||
<a href="shoppingCart.html"><span id=shoppingCartNumber> </span><i class="fas fa-shopping-cart" style='font-size:24px'> </i></a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="übersicht">
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<h1>Disclaimer</h1>
|
||||
<p>This website is not used monetarily </p>
|
||||
<p>Not even if things seem to be sold here!</p>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -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 = `
|
||||
<h3 class="title"> ${jsonObj[nummer].products[index].title} </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> ${jsonObj[nummer].products[index].price.toFixed(2).toLocaleString()} ¥</span>
|
||||
<button class="addProduct" CategoryNumber="${nummer}" productIndex="${index}">+</button>
|
||||
<button class="removeProduct">-</button>
|
||||
</div>
|
||||
<img src="files/${jsonObj[nummer].products[index].imgName}" alt="Product" />
|
||||
<p class="size"> Size: ${jsonObj[nummer].products[index].size}</p>
|
||||
<div class="description">
|
||||
<p> ${jsonObj[nummer].products[index].description}</p>
|
||||
</div>
|
||||
product.innerHTML = `
|
||||
<h3 class="title"> ${jsonObj[nummer].products[index].title} </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> ${jsonObj[nummer].products[index].price.toFixed(2).toLocaleString()} ¥</span>
|
||||
<button class="addProduct" CategoryNumber="${nummer}" productIndex="${index}">+</button>
|
||||
<button class="removeProduct">-</button>
|
||||
</div>
|
||||
<img src="files/${jsonObj[nummer].products[index].imgName}" alt="Product" />
|
||||
<p class="size"> Size: ${jsonObj[nummer].products[index].size}</p>
|
||||
<div class="description">
|
||||
<p> ${jsonObj[nummer].products[index].description}</p>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(product);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,197 +1,197 @@
|
|||
// Datensammlung für Produkte
|
||||
|
||||
namespace Aufgabe07 {
|
||||
|
||||
let shoppingPrice: number = 0;
|
||||
let shoppingCount: number = localStorage.length;
|
||||
if ( localStorage.length > 1)
|
||||
shoppingCount --;
|
||||
|
||||
(<HTMLLIElement>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<void> {
|
||||
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);*/
|
||||
|
||||
(<HTMLLIElement>document.querySelector("#special_a")).addEventListener("click", drawSpecial);
|
||||
function drawSpecial(): void {
|
||||
printProducts(0);
|
||||
}
|
||||
(<HTMLLIElement>document.querySelector("#bunt_a")).addEventListener("click", drawBunt);
|
||||
function drawBunt(): void {
|
||||
printProducts(1);
|
||||
}
|
||||
(<HTMLLIElement>document.querySelector("#grün_a")).addEventListener("click", drawGrün);
|
||||
function drawGrün(): void {
|
||||
printProducts(2);
|
||||
}
|
||||
(<HTMLLIElement>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}`;
|
||||
(<HTMLDivElement>document.querySelector("#übersicht")).appendChild(heading);
|
||||
|
||||
let container: HTMLDivElement = document.createElement("div");
|
||||
container.classList.add("container");
|
||||
(<HTMLDivElement>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 = `
|
||||
<h3 class="title"> ${jsonObj[nummer].products[index].title} </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> ${jsonObj[nummer].products[index].price.toFixed(2).toLocaleString()} ¥</span>
|
||||
<button class="addProduct" CategoryNumber="${nummer}" productIndex="${index}">+</button>
|
||||
<button class="removeProduct">-</button>
|
||||
</div>
|
||||
<img src="files/${jsonObj[nummer].products[index].imgName}" alt="Product" />
|
||||
<p class="size"> Size: ${jsonObj[nummer].products[index].size}</p>
|
||||
<div class="description">
|
||||
<p> ${jsonObj[nummer].products[index].description}</p>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(product);
|
||||
}
|
||||
if (catCheck)
|
||||
break;
|
||||
}
|
||||
addShoppingFunction();
|
||||
}
|
||||
|
||||
function clearProducts(): void {
|
||||
for (let nummer: number = 0; nummer < jsonObj.length; nummer++) {
|
||||
let alles: HTMLDivElement = (<HTMLDivElement>document.querySelector("#übersicht"));
|
||||
alles.innerHTML = "";
|
||||
}
|
||||
}
|
||||
|
||||
function money(_event: Event): void {
|
||||
let target: HTMLElement = (<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++;
|
||||
(<HTMLLIElement>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 = (<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<Element> = 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
|
||||
<div class="product"> tag class
|
||||
<h3 class="title"> Color: Rainbow </h3> tag class content
|
||||
<div class=shopIn> tag class
|
||||
<span class="price"> 3279,99 ¥ </span> tag class content
|
||||
<button>+</button> tag content
|
||||
<button>-</button> tag content
|
||||
</div>
|
||||
<img src="files/grass-rainbow-square.png" alt="Product" /> tag attribute1 attribute2
|
||||
<p class="size"> Size: 4m²</p> tag class content
|
||||
<div class="description"> tag class
|
||||
<p> If you can't choose one color, go and catch them all!</p> tag content
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
/*
|
||||
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 --;
|
||||
|
||||
(<HTMLLIElement>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<void> {
|
||||
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);*/
|
||||
|
||||
(<HTMLLIElement>document.querySelector("#special_a")).addEventListener("click", drawSpecial);
|
||||
function drawSpecial(): void {
|
||||
printProducts(0);
|
||||
}
|
||||
(<HTMLLIElement>document.querySelector("#bunt_a")).addEventListener("click", drawBunt);
|
||||
function drawBunt(): void {
|
||||
printProducts(1);
|
||||
}
|
||||
(<HTMLLIElement>document.querySelector("#grün_a")).addEventListener("click", drawGrün);
|
||||
function drawGrün(): void {
|
||||
printProducts(2);
|
||||
}
|
||||
(<HTMLLIElement>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}`;
|
||||
(<HTMLDivElement>document.querySelector("#übersicht")).appendChild(heading);
|
||||
|
||||
let container: HTMLDivElement = document.createElement("div");
|
||||
container.classList.add("container");
|
||||
(<HTMLDivElement>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 = `
|
||||
<h3 class="title"> ${jsonObj[nummer].products[index].title} </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> ${jsonObj[nummer].products[index].price.toFixed(2).toLocaleString()} ¥</span>
|
||||
<button class="addProduct" CategoryNumber="${nummer}" productIndex="${index}">+</button>
|
||||
<button class="removeProduct">-</button>
|
||||
</div>
|
||||
<img src="files/${jsonObj[nummer].products[index].imgName}" alt="Product" />
|
||||
<p class="size"> Size: ${jsonObj[nummer].products[index].size}</p>
|
||||
<div class="description">
|
||||
<p> ${jsonObj[nummer].products[index].description}</p>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(product);
|
||||
}
|
||||
if (catCheck)
|
||||
break;
|
||||
}
|
||||
addShoppingFunction();
|
||||
}
|
||||
|
||||
function clearProducts(): void {
|
||||
for (let nummer: number = 0; nummer < jsonObj.length; nummer++) {
|
||||
let alles: HTMLDivElement = (<HTMLDivElement>document.querySelector("#übersicht"));
|
||||
alles.innerHTML = "";
|
||||
}
|
||||
}
|
||||
|
||||
function money(_event: Event): void {
|
||||
let target: HTMLElement = (<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++;
|
||||
(<HTMLLIElement>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 = (<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<Element> = 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
|
||||
<div class="product"> tag class
|
||||
<h3 class="title"> Color: Rainbow </h3> tag class content
|
||||
<div class=shopIn> tag class
|
||||
<span class="price"> 3279,99 ¥ </span> tag class content
|
||||
<button>+</button> tag content
|
||||
<button>-</button> tag content
|
||||
</div>
|
||||
<img src="files/grass-rainbow-square.png" alt="Product" /> tag attribute1 attribute2
|
||||
<p class="size"> Size: 4m²</p> tag class content
|
||||
<div class="description"> tag class
|
||||
<p> If you can't choose one color, go and catch them all!</p> tag content
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
/*
|
||||
let myJSON: string = JSON.stringify(categories);
|
||||
JSON.stringify(categories);
|
||||
console.log(myJSON);
|
||||
*/
|
||||
|
|
@ -1,44 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
|
||||
<link SameSite="Secure" href="https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" media="screen and (max-width: 600px)" href="product-small.css">
|
||||
<link rel="stylesheet" media="screen and (min-width: 601px)" href="product-medium.css">
|
||||
<link rel="stylesheet" media="screen and (min-width: 1025px)" href="product-big.css">
|
||||
<link rel="stylesheet" href="shop.css">
|
||||
<script src="shoppingCart.js" defer></script>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>green grass</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="title_bar">
|
||||
<img src="files/grass_icon_left.png" alt="grass" />
|
||||
<span><a href="shop.html" style="text-decoration: none;color:#b8d5cd">GREEN GRASS</a></span>
|
||||
<img src="files/grass_icon_right.png" alt="grass" />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="übersicht">
|
||||
|
||||
</div>
|
||||
<button style="text-align: center" id="removeAllItems">Remove All</button>
|
||||
<div>
|
||||
<span style="margin-left: 10px;"> Current Price: </span>
|
||||
<span style="margin-left: 10px;" id="showPrice">Hello</span>
|
||||
</div>
|
||||
|
||||
|
||||
<footer>
|
||||
<h1>Disclaimer</h1>
|
||||
<p>This website is not used monetarily </p>
|
||||
<p>Not even if things seem to be sold here!</p>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
|
||||
<link SameSite="Secure" href="https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" media="screen and (max-width: 600px)" href="product-small.css">
|
||||
<link rel="stylesheet" media="screen and (min-width: 601px)" href="product-medium.css">
|
||||
<link rel="stylesheet" media="screen and (min-width: 1025px)" href="product-big.css">
|
||||
<link rel="stylesheet" href="shop.css">
|
||||
<script src="shoppingCart.js" defer></script>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>green grass</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="title_bar">
|
||||
<img src="files/grass_icon_left.png" alt="grass" />
|
||||
<span><a href="shop.html" style="text-decoration: none;color:#b8d5cd">GREEN GRASS</a></span>
|
||||
<img src="files/grass_icon_right.png" alt="grass" />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="übersicht">
|
||||
|
||||
</div>
|
||||
<button style="text-align: center" id="removeAllItems">Remove All</button>
|
||||
<div>
|
||||
<span style="margin-left: 10px;"> Current Price: </span>
|
||||
<span style="margin-left: 10px;" id="showPrice">Hello</span>
|
||||
</div>
|
||||
|
||||
|
||||
<footer>
|
||||
<h1>Disclaimer</h1>
|
||||
<p>This website is not used monetarily </p>
|
||||
<p>Not even if things seem to be sold here!</p>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -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 = `
|
||||
<h3 class="title"> ${zeug.title} </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> ${zeug.price} ¥</span>
|
||||
<button class="removeProduct" itemIndex="${iterator}">-</button>
|
||||
</div>
|
||||
<img src="files/${zeug.imgName}" alt="Product" />
|
||||
<p class="size"> Size: ${zeug.size}</p>
|
||||
<div class="description">
|
||||
<p> ${zeug.description}</p>
|
||||
</div>
|
||||
product.innerHTML = `
|
||||
<h3 class="title"> ${zeug.title} </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> ${zeug.price} ¥</span>
|
||||
<button class="removeProduct" itemIndex="${iterator}">-</button>
|
||||
</div>
|
||||
<img src="files/${zeug.imgName}" alt="Product" />
|
||||
<p class="size"> Size: ${zeug.size}</p>
|
||||
<div class="description">
|
||||
<p> ${zeug.description}</p>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(product);
|
||||
/*let shoppingPrice: HTMLSpanElement = (<HTMLDivElement>document.querySelector("#showPrice"));
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
(<HTMLDivElement>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 = `
|
||||
<h3 class="title"> ${zeug.title} </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> ${zeug.price} ¥</span>
|
||||
<button class="removeProduct" itemIndex="${iterator}">-</button>
|
||||
</div>
|
||||
<img src="files/${zeug.imgName}" alt="Product" />
|
||||
<p class="size"> Size: ${zeug.size}</p>
|
||||
<div class="description">
|
||||
<p> ${zeug.description}</p>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(product);
|
||||
|
||||
/*let shoppingPrice: HTMLSpanElement = (<HTMLDivElement>document.querySelector("#showPrice"));
|
||||
myPrice += zeug.price;
|
||||
shoppingPrice.innerHTML = myPrice.toLocaleString() + " ¥";
|
||||
//alles.innerHTML = "";*/
|
||||
fixPrice(zeug.price);
|
||||
}
|
||||
(<HTMLButtonElement>document.querySelector("#removeAllItems")).addEventListener("click", clearLocalStorage);
|
||||
addRemoveFunction();
|
||||
} // zeug.price.toFixed(2).toLocaleString()
|
||||
//addShoppingFunction();
|
||||
|
||||
function clearLocalStorage(): void {
|
||||
localStorage.clear();
|
||||
(<HTMLDivElement>document.querySelector("#übersicht")).innerHTML = "";
|
||||
}
|
||||
|
||||
function removeItem(_event: Event): void {
|
||||
let target: HTMLElement = (<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")!)!)}`);
|
||||
(<HTMLDivElement>document.querySelector("#übersicht")).innerHTML = "";
|
||||
printProducts();
|
||||
}
|
||||
|
||||
function addRemoveFunction(): void {
|
||||
const buttons: HTMLCollectionOf<Element> = document.getElementsByClassName("removeProduct");
|
||||
for (const button of buttons) {
|
||||
button.addEventListener("click", removeItem);
|
||||
}
|
||||
}
|
||||
|
||||
function fixPrice(_price: number): void {
|
||||
shoppingPrice += _price;
|
||||
let shoppingPriceEle: HTMLSpanElement = (<HTMLDivElement>document.querySelector("#showPrice"));
|
||||
shoppingPriceEle.innerHTML = shoppingPrice.toLocaleString() + " ¥";
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*function money(_event: Event): void {
|
||||
let target: HTMLElement = (<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++;
|
||||
(<HTMLLIElement>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 = (<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<Element> = 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");
|
||||
(<HTMLDivElement>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 = `
|
||||
<h3 class="title"> ${zeug.title} </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> ${zeug.price} ¥</span>
|
||||
<button class="removeProduct" itemIndex="${iterator}">-</button>
|
||||
</div>
|
||||
<img src="files/${zeug.imgName}" alt="Product" />
|
||||
<p class="size"> Size: ${zeug.size}</p>
|
||||
<div class="description">
|
||||
<p> ${zeug.description}</p>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(product);
|
||||
|
||||
/*let shoppingPrice: HTMLSpanElement = (<HTMLDivElement>document.querySelector("#showPrice"));
|
||||
myPrice += zeug.price;
|
||||
shoppingPrice.innerHTML = myPrice.toLocaleString() + " ¥";
|
||||
//alles.innerHTML = "";*/
|
||||
fixPrice(zeug.price);
|
||||
}
|
||||
(<HTMLButtonElement>document.querySelector("#removeAllItems")).addEventListener("click", clearLocalStorage);
|
||||
addRemoveFunction();
|
||||
} // zeug.price.toFixed(2).toLocaleString()
|
||||
//addShoppingFunction();
|
||||
|
||||
function clearLocalStorage(): void {
|
||||
localStorage.clear();
|
||||
(<HTMLDivElement>document.querySelector("#übersicht")).innerHTML = "";
|
||||
}
|
||||
|
||||
function removeItem(_event: Event): void {
|
||||
let target: HTMLElement = (<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")!)!)}`);
|
||||
(<HTMLDivElement>document.querySelector("#übersicht")).innerHTML = "";
|
||||
printProducts();
|
||||
}
|
||||
|
||||
function addRemoveFunction(): void {
|
||||
const buttons: HTMLCollectionOf<Element> = document.getElementsByClassName("removeProduct");
|
||||
for (const button of buttons) {
|
||||
button.addEventListener("click", removeItem);
|
||||
}
|
||||
}
|
||||
|
||||
function fixPrice(_price: number): void {
|
||||
shoppingPrice += _price;
|
||||
let shoppingPriceEle: HTMLSpanElement = (<HTMLDivElement>document.querySelector("#showPrice"));
|
||||
shoppingPriceEle.innerHTML = shoppingPrice.toLocaleString() + " ¥";
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*function money(_event: Event): void {
|
||||
let target: HTMLElement = (<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++;
|
||||
(<HTMLLIElement>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 = (<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<Element> = document.getElementsByClassName("addProduct");
|
||||
for (const button of buttons) {
|
||||
button.addEventListener("click", money);
|
||||
button.addEventListener("click", removeLocal);
|
||||
}
|
||||
}*/
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,49 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="tutorial.js" defer></script>
|
||||
<title>Tutorial Kapitel 08</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form method="" action="https://theoneandgis.herokuapp.com/">
|
||||
<label for="vorname">Vorname:</label> <br>
|
||||
<input type="text" id="vorname" name="vorname" value="Ben"> <br>
|
||||
<label for="nachname">Nachname:</label> <br>
|
||||
<input type="text" id="nachname" name="nachname" value="Uchiha"> <br>
|
||||
<input type="submit" value="Submit Input">
|
||||
<button type="submit">Submit Button</button>
|
||||
<button type="button" id="theButton">Button Button</button>
|
||||
</form>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- <form method="get" action="">
|
||||
<button type="submit">Get</button>
|
||||
</form>
|
||||
|
||||
<form method="get" action="https://gis-example.herokuapp.com/">
|
||||
<button type="submit">Get mit URL in Action</button>
|
||||
</form>
|
||||
|
||||
<hr>
|
||||
|
||||
<form method="post" action="">
|
||||
<button type="submit">Post</button>
|
||||
</form>
|
||||
|
||||
<form method="post" action="https://gis-example.herokuapp.com/">
|
||||
<button type="submit">Post mit URL in Action</button>
|
||||
</form> -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style>
|
||||
button,label,input {
|
||||
margin: 10px;
|
||||
}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="tutorial.js" defer></script>
|
||||
<title>Tutorial Kapitel 08</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form method="" action="https://theoneandgis.herokuapp.com/">
|
||||
<label for="vorname">Vorname:</label> <br>
|
||||
<input type="text" id="vorname" name="vorname" value="Ben"> <br>
|
||||
<label for="nachname">Nachname:</label> <br>
|
||||
<input type="text" id="nachname" name="nachname" value="Uchiha"> <br>
|
||||
<input type="submit" value="Submit Input">
|
||||
<button type="submit">Submit Button</button>
|
||||
<button type="button" id="theButton">Button Button</button>
|
||||
</form>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- <form method="get" action="">
|
||||
<button type="submit">Get</button>
|
||||
</form>
|
||||
|
||||
<form method="get" action="https://gis-example.herokuapp.com/">
|
||||
<button type="submit">Get mit URL in Action</button>
|
||||
</form>
|
||||
|
||||
<hr>
|
||||
|
||||
<form method="post" action="">
|
||||
<button type="submit">Post</button>
|
||||
</form>
|
||||
|
||||
<form method="post" action="https://gis-example.herokuapp.com/">
|
||||
<button type="submit">Post mit URL in Action</button>
|
||||
</form> -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style>
|
||||
button,label,input {
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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
|
||||
|
||||
(<HTMLButtonElement>document.querySelector("#theButton")).addEventListener("click", communicate);
|
||||
|
||||
//communicate("https://theoneandgis.herokuapp.com/");
|
||||
|
||||
async function communicate(): Promise<void> {
|
||||
|
||||
// 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(<any>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
|
||||
|
||||
(<HTMLButtonElement>document.querySelector("#theButton")).addEventListener("click", communicate);
|
||||
|
||||
//communicate("https://theoneandgis.herokuapp.com/");
|
||||
|
||||
async function communicate(): Promise<void> {
|
||||
|
||||
// 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(<any>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");
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,119 +1,119 @@
|
|||
|
||||
namespace clientSide {
|
||||
|
||||
(<HTMLButtonElement>document.querySelector("#getJson")).addEventListener("click", communicateJson);
|
||||
(<HTMLButtonElement>document.querySelector("#getHtml")).addEventListener("click", communicateHtml);
|
||||
|
||||
//communicate("https://theoneandgis.herokuapp.com/");
|
||||
|
||||
async function communicate(_path: string): Promise<void> {
|
||||
|
||||
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(<any>formData);
|
||||
|
||||
url += "?" + query.toString();
|
||||
|
||||
let response: Response = await fetch(url);
|
||||
let responseUrl: string;
|
||||
|
||||
if (_path == "/json") {
|
||||
responseUrl = await response.json();
|
||||
console.log(responseUrl);
|
||||
(<HTMLDivElement>document.getElementById("htmlResponse")).innerHTML = JSON.stringify(responseUrl);
|
||||
}
|
||||
|
||||
if (_path == "/html") {
|
||||
let responseUrl: string = await response.text();
|
||||
console.log("html-log: " + responseUrl);
|
||||
(<HTMLDivElement>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
|
||||
|
||||
(<HTMLButtonElement>document.querySelector("#getHtml")).addEventListener("click", startCommunication);
|
||||
|
||||
function startCommunication(): void {
|
||||
communicate("http://localhost:8100");
|
||||
}
|
||||
|
||||
async function communicate(_url: RequestInfo): Promise<void> {
|
||||
|
||||
// let response: Response = await fetch(_url);
|
||||
// let jsonObj = await response.json();
|
||||
|
||||
let formData: FormData = new FormData(document.forms[0]);
|
||||
let formquery: URLSearchParams = new URLSearchParams(<any>formData);
|
||||
_url += "?" + formquery.toString();
|
||||
console.log("_url: " + _url);
|
||||
//let url: string = "https://theoneandgis.herokuapp.com/";
|
||||
//let query: URLSearchParams = new URLSearchParams(<any>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);
|
||||
|
||||
(<HTMLDivElement>document.querySelector("#htmlResponse")).innerHTML = `${theAnswer}`;
|
||||
|
||||
|
||||
// await fetch(url);
|
||||
console.log(theAnswer);
|
||||
}
|
||||
|
||||
console.log("hello");
|
||||
|
||||
}*/
|
||||
|
||||
|
||||
|
||||
namespace clientSide {
|
||||
|
||||
(<HTMLButtonElement>document.querySelector("#getJson")).addEventListener("click", communicateJson);
|
||||
(<HTMLButtonElement>document.querySelector("#getHtml")).addEventListener("click", communicateHtml);
|
||||
|
||||
//communicate("https://theoneandgis.herokuapp.com/");
|
||||
|
||||
async function communicate(_path: string): Promise<void> {
|
||||
|
||||
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(<any>formData);
|
||||
|
||||
url += "?" + query.toString();
|
||||
|
||||
let response: Response = await fetch(url);
|
||||
let responseUrl: string;
|
||||
|
||||
if (_path == "/json") {
|
||||
responseUrl = await response.json();
|
||||
console.log(responseUrl);
|
||||
(<HTMLDivElement>document.getElementById("htmlResponse")).innerHTML = JSON.stringify(responseUrl);
|
||||
}
|
||||
|
||||
if (_path == "/html") {
|
||||
let responseUrl: string = await response.text();
|
||||
console.log("html-log: " + responseUrl);
|
||||
(<HTMLDivElement>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
|
||||
|
||||
(<HTMLButtonElement>document.querySelector("#getHtml")).addEventListener("click", startCommunication);
|
||||
|
||||
function startCommunication(): void {
|
||||
communicate("http://localhost:8100");
|
||||
}
|
||||
|
||||
async function communicate(_url: RequestInfo): Promise<void> {
|
||||
|
||||
// let response: Response = await fetch(_url);
|
||||
// let jsonObj = await response.json();
|
||||
|
||||
let formData: FormData = new FormData(document.forms[0]);
|
||||
let formquery: URLSearchParams = new URLSearchParams(<any>formData);
|
||||
_url += "?" + formquery.toString();
|
||||
console.log("_url: " + _url);
|
||||
//let url: string = "https://theoneandgis.herokuapp.com/";
|
||||
//let query: URLSearchParams = new URLSearchParams(<any>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);
|
||||
|
||||
(<HTMLDivElement>document.querySelector("#htmlResponse")).innerHTML = `${theAnswer}`;
|
||||
|
||||
|
||||
// await fetch(url);
|
||||
console.log(theAnswer);
|
||||
}
|
||||
|
||||
console.log("hello");
|
||||
|
||||
}*/
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,32 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="client.js" defer></script>
|
||||
<title>Formulare Kapitel 09</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form method="" action="https://theoneandgis.herokuapp.com">
|
||||
<label for="vorname">Name</label> <br>
|
||||
<input type="text" id="vorname" name="vorname" value="Ben"> <br>
|
||||
<label for="nachname">Geburtsjahr</label> <br>
|
||||
<input type="text" id="nachname" name="nachname" value="Uchiha"> <br>
|
||||
<button type="submit">Submit</button>
|
||||
<button type="button" id="getHtml">HTML Button</button>
|
||||
<button type="button" id="getJson">JSON Button</button>
|
||||
</form>
|
||||
|
||||
<div id="htmlResponse"></div>
|
||||
|
||||
<hr>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style>
|
||||
button,label,input,div {
|
||||
margin: 10px;
|
||||
}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="client.js" defer></script>
|
||||
<title>Formulare Kapitel 09</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form method="" action="https://theoneandgis.herokuapp.com">
|
||||
<label for="vorname">Name</label> <br>
|
||||
<input type="text" id="vorname" name="vorname" value="Ben"> <br>
|
||||
<label for="nachname">Geburtsjahr</label> <br>
|
||||
<input type="text" id="nachname" name="nachname" value="Uchiha"> <br>
|
||||
<button type="submit">Submit</button>
|
||||
<button type="button" id="getHtml">HTML Button</button>
|
||||
<button type="button" id="getJson">JSON Button</button>
|
||||
</form>
|
||||
|
||||
<div id="htmlResponse"></div>
|
||||
|
||||
<hr>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style>
|
||||
button,label,input,div {
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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 = (<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 = (<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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
(<HTMLButtonElement>document.querySelector("#abschicken")).addEventListener("click", sendData);
|
||||
function sendData(): void {
|
||||
communicate("http://localhost:8100", "mongo", "send", "");
|
||||
}
|
||||
|
||||
(<HTMLButtonElement>document.querySelector("#abfragen")).addEventListener("click", retrieveData);
|
||||
function retrieveData(): void {
|
||||
communicate("http://localhost:8100", "mongo", "retrieve", "");
|
||||
}
|
||||
|
||||
function removeData(_event: Event): void {
|
||||
let target: HTMLElement = (<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<void> {
|
||||
let formData: FormData = new FormData(document.forms[0]);
|
||||
let url: string = "";
|
||||
if (_id == "") {
|
||||
//tslint:disable-next-line: no-any
|
||||
let query: URLSearchParams = new URLSearchParams(<any>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);
|
||||
(<HTMLDivElement>document.querySelector("#divResponse")).innerHTML = jsonString;
|
||||
//console.log(jsonResponse[0].vorname + " " + jsonResponse[0].nachname + " " + jsonResponse[0].geburtsjahr);
|
||||
}
|
||||
if (_task == "retrieve") {
|
||||
let jsonString: string = formatCollection(jsonResponse);
|
||||
(<HTMLDivElement>document.querySelector("#divDatabase")).innerHTML = jsonString;
|
||||
addRemoveFunction();
|
||||
}
|
||||
|
||||
(<HTMLFormElement>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 += `<button class="removeButton" thisEntry=${(JSON.stringify(_jsonResponse[index]._id))}> Delete Entry </button><br>`;
|
||||
let current: Personalien = <Personalien>_jsonResponse[index];
|
||||
for (let key in current) {
|
||||
jsonString += key + ": " + JSON.stringify(current[key]) + "<br>";
|
||||
}
|
||||
jsonString += "<br>";
|
||||
}
|
||||
}
|
||||
return jsonString;
|
||||
}
|
||||
|
||||
function addRemoveFunction(): void {
|
||||
let removeButtons: NodeListOf<HTMLButtonElement> = 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;
|
||||
}
|
||||
|
||||
(<HTMLButtonElement>document.querySelector("#abschicken")).addEventListener("click", sendData);
|
||||
function sendData(): void {
|
||||
communicate("http://localhost:8100", "mongo", "send", "");
|
||||
}
|
||||
|
||||
(<HTMLButtonElement>document.querySelector("#abfragen")).addEventListener("click", retrieveData);
|
||||
function retrieveData(): void {
|
||||
communicate("http://localhost:8100", "mongo", "retrieve", "");
|
||||
}
|
||||
|
||||
function removeData(_event: Event): void {
|
||||
let target: HTMLElement = (<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<void> {
|
||||
let formData: FormData = new FormData(document.forms[0]);
|
||||
let url: string = "";
|
||||
if (_id == "") {
|
||||
//tslint:disable-next-line: no-any
|
||||
let query: URLSearchParams = new URLSearchParams(<any>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);
|
||||
(<HTMLDivElement>document.querySelector("#divResponse")).innerHTML = jsonString;
|
||||
//console.log(jsonResponse[0].vorname + " " + jsonResponse[0].nachname + " " + jsonResponse[0].geburtsjahr);
|
||||
}
|
||||
if (_task == "retrieve") {
|
||||
let jsonString: string = formatCollection(jsonResponse);
|
||||
(<HTMLDivElement>document.querySelector("#divDatabase")).innerHTML = jsonString;
|
||||
addRemoveFunction();
|
||||
}
|
||||
|
||||
(<HTMLFormElement>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 += `<button class="removeButton" thisEntry=${(JSON.stringify(_jsonResponse[index]._id))}> Delete Entry </button><br>`;
|
||||
let current: Personalien = <Personalien>_jsonResponse[index];
|
||||
for (let key in current) {
|
||||
jsonString += key + ": " + JSON.stringify(current[key]) + "<br>";
|
||||
}
|
||||
jsonString += "<br>";
|
||||
}
|
||||
}
|
||||
return jsonString;
|
||||
}
|
||||
|
||||
function addRemoveFunction(): void {
|
||||
let removeButtons: NodeListOf<HTMLButtonElement> = document.querySelectorAll(".removeButton");
|
||||
for (const iterator of removeButtons)
|
||||
iterator.addEventListener("click", removeData);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,64 +1,64 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="client.js" defer></script>
|
||||
<title>Kapitel 11</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<button class="container">Becher</button>
|
||||
<button id="blueberry">Blau</button>
|
||||
<button id="raspberry">Rot</button>
|
||||
<button id="streusel">bunte Streusel</button>
|
||||
|
||||
<hr>
|
||||
|
||||
<form id="myForm" method="" action="">
|
||||
<!--https://theoneandgis.herokuapp.com-->
|
||||
|
||||
<label for="vorname" method="get">Vorname
|
||||
</label><br>
|
||||
<input type="text" id="vorname" name="vorname" value="Vorname" onfocus="this.value=''"><br>
|
||||
|
||||
<label for="nachname">
|
||||
Nachname
|
||||
</label><br>
|
||||
<input type="text" id="nachname" name="nachname" value="Nachname" onfocus="this.value=''"><br>
|
||||
|
||||
<label for="geburtsjahr">
|
||||
Geburtsjahr
|
||||
</label><br>
|
||||
<input type="text" id="geburtsjahr" name="geburtsjahr" value="2000"><br>
|
||||
|
||||
<button type="button" id="abschicken"> Eintrag </button>
|
||||
<button type="button" id="abfragen"> Abfrage </button>
|
||||
|
||||
</form>
|
||||
|
||||
<hr>
|
||||
<div id="divResponse"></div>
|
||||
<hr>
|
||||
<div id="divDatabase"></div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
<style>
|
||||
button,
|
||||
label,
|
||||
input,
|
||||
div {
|
||||
margin: 10px;
|
||||
}
|
||||
body{
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="client.js" defer></script>
|
||||
<title>Kapitel 11</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<button class="container">Becher</button>
|
||||
<button id="blueberry">Blau</button>
|
||||
<button id="raspberry">Rot</button>
|
||||
<button id="streusel">bunte Streusel</button>
|
||||
|
||||
<hr>
|
||||
|
||||
<form id="myForm" method="" action="">
|
||||
<!--https://theoneandgis.herokuapp.com-->
|
||||
|
||||
<label for="vorname" method="get">Vorname
|
||||
</label><br>
|
||||
<input type="text" id="vorname" name="vorname" value="Vorname" onfocus="this.value=''"><br>
|
||||
|
||||
<label for="nachname">
|
||||
Nachname
|
||||
</label><br>
|
||||
<input type="text" id="nachname" name="nachname" value="Nachname" onfocus="this.value=''"><br>
|
||||
|
||||
<label for="geburtsjahr">
|
||||
Geburtsjahr
|
||||
</label><br>
|
||||
<input type="text" id="geburtsjahr" name="geburtsjahr" value="2000"><br>
|
||||
|
||||
<button type="button" id="abschicken"> Eintrag </button>
|
||||
<button type="button" id="abfragen"> Abfrage </button>
|
||||
|
||||
</form>
|
||||
|
||||
<hr>
|
||||
<div id="divResponse"></div>
|
||||
<hr>
|
||||
<div id="divDatabase"></div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
<style>
|
||||
button,
|
||||
label,
|
||||
input,
|
||||
div {
|
||||
margin: 10px;
|
||||
}
|
||||
body{
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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<void> { // _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<void> {
|
||||
//console.log("_entry: ", _entry);
|
||||
//console.log(_entry._id);
|
||||
let id: string = <string>_entry._id;
|
||||
let objID: Mongo.ObjectID = new Mongo.ObjectID(id);
|
||||
await content.deleteOne({"_id": objID});
|
||||
}
|
||||
|
||||
export async function findCollection(): Promise<Personalien[]> {
|
||||
let foundCollection: Personalien[] = await content.find().toArray();
|
||||
return foundCollection;
|
||||
}
|
||||
|
||||
/*
|
||||
async function findManyData(_order: Personalien): Promise<string> {
|
||||
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<void> {
|
||||
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<void> { // _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<void> {
|
||||
//console.log("_entry: ", _entry);
|
||||
//console.log(_entry._id);
|
||||
let id: string = <string>_entry._id;
|
||||
let objID: Mongo.ObjectID = new Mongo.ObjectID(id);
|
||||
await content.deleteOne({"_id": objID});
|
||||
}
|
||||
|
||||
export async function findCollection(): Promise<Personalien[]> {
|
||||
let foundCollection: Personalien[] = await content.find().toArray();
|
||||
return foundCollection;
|
||||
}
|
||||
|
||||
/*
|
||||
async function findManyData(_order: Personalien): Promise<string> {
|
||||
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<void> {
|
||||
let test2: any = await content.findOne(_order);
|
||||
console.log("findOneData: ", test2);
|
||||
//console.log(test2.name);
|
||||
}
|
||||
|
||||
function removeData(_order: Personalien): void {
|
||||
content.remove(_order);
|
||||
}
|
||||
*/
|
||||
|
||||
}
|
||||
|
|
@ -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<void> {
|
||||
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 = (<string>_request.url).slice(0, 9);
|
||||
|
||||
_response.setHeader("content-type", "application/json");
|
||||
_response.setHeader("Access-Control-Allow-Origin", "*");
|
||||
|
||||
if ( (<string>_request.url).includes("/mongo") ) {
|
||||
console.log(" myQueryString: ", myQueryString);
|
||||
console.log(" <string>_request.url: ", <string>_request.url);
|
||||
await mongoAction( _response, myQueryString , (<string>_request.url) );
|
||||
}
|
||||
|
||||
_response.end();
|
||||
}
|
||||
|
||||
async function mongoAction(_response: Http.ServerResponse, _query: string, _command: string): Promise<void> {
|
||||
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<void> {
|
||||
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 = (<string>_request.url).slice(0, 9);
|
||||
|
||||
_response.setHeader("content-type", "application/json");
|
||||
_response.setHeader("Access-Control-Allow-Origin", "*");
|
||||
|
||||
if ( (<string>_request.url).includes("/mongo") ) {
|
||||
console.log(" myQueryString: ", myQueryString);
|
||||
console.log(" <string>_request.url: ", <string>_request.url);
|
||||
await mongoAction( _response, myQueryString , (<string>_request.url) );
|
||||
}
|
||||
|
||||
_response.end();
|
||||
}
|
||||
|
||||
async function mongoAction(_response: Http.ServerResponse, _query: string, _command: string): Promise<void> {
|
||||
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(`{"":""}`);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -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
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,45 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<title>Administrator</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../index.css">
|
||||
<link rel="stylesheet" href="admin.css">
|
||||
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
|
||||
<script src="../script-frontend/admin.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="top-nav">
|
||||
<div id="logo">
|
||||
<a href="../index.html"><img src="../html-landing-page/images/nice-ice-logo.png" alt=""></a>
|
||||
</div>
|
||||
<div id="warenkorb">
|
||||
<a href="../html-warenkorb/warenkorb.html"><i class='fas fa-shopping-cart'></i> <span>0</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<nav>
|
||||
<div class="bottom-nav">
|
||||
<ul>
|
||||
<li><a href="admin.html">Administrator</a></li>
|
||||
<li><a href="../html-memes/memes.html">Über uns</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<main>
|
||||
<div id="tableDiv">
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div>
|
||||
<span>( - Disclaimer - )</span>
|
||||
<span>Ich verdiene mit dieser Website kein Geld</span>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<title>Administrator</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../index.css">
|
||||
<link rel="stylesheet" href="admin.css">
|
||||
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
|
||||
<script src="../script-frontend/admin.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="top-nav">
|
||||
<div id="logo">
|
||||
<a href="../index.html"><img src="../html-landing-page/images/nice-ice-logo.png" alt=""></a>
|
||||
</div>
|
||||
<div id="warenkorb">
|
||||
<a href="../html-warenkorb/warenkorb.html"><i class='fas fa-shopping-cart'></i> <span>0</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<nav>
|
||||
<div class="bottom-nav">
|
||||
<ul>
|
||||
<li><a href="admin.html">Administrator</a></li>
|
||||
<li><a href="../html-memes/memes.html">Über uns</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<main>
|
||||
<div id="tableDiv">
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div>
|
||||
<span>( - Disclaimer - )</span>
|
||||
<span>Ich verdiene mit dieser Website kein Geld</span>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,44 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" media="screen and (min-width: 0px)" href="../html-landing-page/landing-page-01-phone.css">
|
||||
<link rel="stylesheet" media="screen and (min-width: 601px)" href="../html-landing-page/landing-page-02-tablet.css">
|
||||
<link rel="stylesheet" media="screen and (min-width: 1025px)" href="../html-landing-page/landing-page-03-desktop.css">
|
||||
<link rel="stylesheet" href="../index.css">
|
||||
<link rel="stylesheet" href="memes.css">
|
||||
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
|
||||
<script src='../script-frontend/memes.js' defer></script>
|
||||
<title>MEMS!</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="top-nav">
|
||||
<div id="logo">
|
||||
<a href="../index.html"><img src="../html-landing-page/images/nice-ice-logo.png" alt=""></a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<nav>
|
||||
<div class="bottom-nav">
|
||||
<ul>
|
||||
<li><a href="../html-admin/admin.html">Administrator</a></li>
|
||||
<li><a href="memes.html">Über uns</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<main>
|
||||
<div id="imageBox">
|
||||
<img src="images/GiSBeLike.png" alt="Some weird Memes" />
|
||||
<div>
|
||||
<button id="buttonLeft"><</button>
|
||||
<button id="buttonRight">></button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" media="screen and (min-width: 0px)" href="../html-landing-page/landing-page-01-phone.css">
|
||||
<link rel="stylesheet" media="screen and (min-width: 601px)" href="../html-landing-page/landing-page-02-tablet.css">
|
||||
<link rel="stylesheet" media="screen and (min-width: 1025px)" href="../html-landing-page/landing-page-03-desktop.css">
|
||||
<link rel="stylesheet" href="../index.css">
|
||||
<link rel="stylesheet" href="memes.css">
|
||||
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
|
||||
<script src='../script-frontend/memes.js' defer></script>
|
||||
<title>MEMS!</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="top-nav">
|
||||
<div id="logo">
|
||||
<a href="../index.html"><img src="../html-landing-page/images/nice-ice-logo.png" alt=""></a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<nav>
|
||||
<div class="bottom-nav">
|
||||
<ul>
|
||||
<li><a href="../html-admin/admin.html">Administrator</a></li>
|
||||
<li><a href="memes.html">Über uns</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<main>
|
||||
<div id="imageBox">
|
||||
<img src="images/GiSBeLike.png" alt="Some weird Memes" />
|
||||
<div>
|
||||
<button id="buttonLeft"><</button>
|
||||
<button id="buttonRight">></button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,77 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../index.css">
|
||||
<link rel="stylesheet" href="shop.css">
|
||||
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
|
||||
<script src="../script-frontend/shop.js" defer></script>
|
||||
<title>Shop</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="top-nav">
|
||||
<div id="logo">
|
||||
<a href="../index.html"><img src="../html-landing-page/images/nice-ice-logo.png" alt=""></a>
|
||||
</div>
|
||||
<div id="warenkorb">
|
||||
<a href="../html-warenkorb/warenkorb.html"><i class='fas fa-shopping-cart'></i> <span>0</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<nav>
|
||||
<div class="bottom-nav">
|
||||
<ul>
|
||||
<li><a href="../html-admin/admin.html">Administrator</a></li>
|
||||
<li><a href="../html-memes/memes.html">Über uns</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<main>
|
||||
<div id="topContainer">
|
||||
<span>Wohin wollen Sie das Eis?</span>
|
||||
<div><span id="extraSpan">(Muss nur einmal pro Bestellvorgang ausgewählt werden)</span></div>
|
||||
<div>
|
||||
<span>Zum Tisch?</span>
|
||||
<div id="topTable"></div>
|
||||
</div>
|
||||
<div>
|
||||
<span>Zum Mitnehmen?</span>
|
||||
<div id="topTake"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="productContainer">
|
||||
<h1 id="containerHeader">Behälter (max 1)</h1>
|
||||
<div id="containerDiv"></div>
|
||||
<h1 id="flavourHeader">Eis Sorten (max 6)</h1>
|
||||
<div id="flavourDiv"></div>
|
||||
<h1 id="toppingHeader">Toppings (max 3)</h1>
|
||||
<div id="toppingDiv"></div>
|
||||
</div>
|
||||
<div id="displayContainer">
|
||||
<div id="behälter"></div>
|
||||
<div id="eis1"></div>
|
||||
<div id="eis2"></div>
|
||||
<div id="eis3"></div>
|
||||
<div id="eis4"></div>
|
||||
<div id="eis5"></div>
|
||||
<div id="eis6"></div>
|
||||
<div id="topping1"></div>
|
||||
<div id="topping2"></div>
|
||||
<div id="topping3"></div>
|
||||
</div>
|
||||
<div id="buttonContainer">
|
||||
<button id="resetButton">Eis zurücksetzen</button>
|
||||
<button id="nextButton">Nächstes Eis</button>
|
||||
<button id="sendButton">Bestellung speichern</button>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div>
|
||||
<span>( - Disclaimer - )</span>
|
||||
<span>Ich verdiene mit dieser Website kein Geld</span>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../index.css">
|
||||
<link rel="stylesheet" href="shop.css">
|
||||
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
|
||||
<script src="../script-frontend/shop.js" defer></script>
|
||||
<title>Shop</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="top-nav">
|
||||
<div id="logo">
|
||||
<a href="../index.html"><img src="../html-landing-page/images/nice-ice-logo.png" alt=""></a>
|
||||
</div>
|
||||
<div id="warenkorb">
|
||||
<a href="../html-warenkorb/warenkorb.html"><i class='fas fa-shopping-cart'></i> <span>0</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<nav>
|
||||
<div class="bottom-nav">
|
||||
<ul>
|
||||
<li><a href="../html-admin/admin.html">Administrator</a></li>
|
||||
<li><a href="../html-memes/memes.html">Über uns</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<main>
|
||||
<div id="topContainer">
|
||||
<span>Wohin wollen Sie das Eis?</span>
|
||||
<div><span id="extraSpan">(Muss nur einmal pro Bestellvorgang ausgewählt werden)</span></div>
|
||||
<div>
|
||||
<span>Zum Tisch?</span>
|
||||
<div id="topTable"></div>
|
||||
</div>
|
||||
<div>
|
||||
<span>Zum Mitnehmen?</span>
|
||||
<div id="topTake"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="productContainer">
|
||||
<h1 id="containerHeader">Behälter (max 1)</h1>
|
||||
<div id="containerDiv"></div>
|
||||
<h1 id="flavourHeader">Eis Sorten (max 6)</h1>
|
||||
<div id="flavourDiv"></div>
|
||||
<h1 id="toppingHeader">Toppings (max 3)</h1>
|
||||
<div id="toppingDiv"></div>
|
||||
</div>
|
||||
<div id="displayContainer">
|
||||
<div id="behälter"></div>
|
||||
<div id="eis1"></div>
|
||||
<div id="eis2"></div>
|
||||
<div id="eis3"></div>
|
||||
<div id="eis4"></div>
|
||||
<div id="eis5"></div>
|
||||
<div id="eis6"></div>
|
||||
<div id="topping1"></div>
|
||||
<div id="topping2"></div>
|
||||
<div id="topping3"></div>
|
||||
</div>
|
||||
<div id="buttonContainer">
|
||||
<button id="resetButton">Eis zurücksetzen</button>
|
||||
<button id="nextButton">Nächstes Eis</button>
|
||||
<button id="sendButton">Bestellung speichern</button>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div>
|
||||
<span>( - Disclaimer - )</span>
|
||||
<span>Ich verdiene mit dieser Website kein Geld</span>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,65 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<title>Warenkorb</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../index.css">
|
||||
<link rel="stylesheet" href="warenkorb.css">
|
||||
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
|
||||
<script src="../script-frontend/warenkorb.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="top-nav">
|
||||
<div id="logo">
|
||||
<a href="../index.html"><img src="../html-landing-page/images/nice-ice-logo.png" alt=""></a>
|
||||
</div>
|
||||
<div id="warenkorb">
|
||||
<a href="#"><i class='fas fa-shopping-cart'></i> <span>0</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<nav>
|
||||
<div class="bottom-nav">
|
||||
<ul>
|
||||
<li><a href="../html-shop/shop.html">Shop</a></li>
|
||||
<li><a href="../html-admin/admin.html">Administrator</a></li>
|
||||
<li><a href="../html-memes/memes.html">Über uns</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<main>
|
||||
<div id="mainContainer">
|
||||
<div id="check"></div>
|
||||
<form id="myForm" method="POST" action="(#)">
|
||||
<!--https://theoneandgis.herokuapp.com-->
|
||||
|
||||
<label for="vorname">Vorname</label>
|
||||
<input type="text" id="vorname" name="vorname" value="Vorname" onfocus="this.value=''">
|
||||
|
||||
<label for="nachname">Nachname</label>
|
||||
<input type="text" id="nachname" name="nachname" value="Nachname" onfocus="this.value=''">
|
||||
|
||||
<label for="straße">Straße</label>
|
||||
<input type="text" id="straße" name="straße" value="Straße-Hausnummer" onfocus="this.value=''">
|
||||
|
||||
<label for="postleitzahl">Postleitzahl</label>
|
||||
<input type="text" id="postleitzahl" name="postleitzahl" value="PLZ-Wohnort" onfocus="this.value=''">
|
||||
</form>
|
||||
<!--<button id="printOrder">print order</button>-->
|
||||
<button id="sendOrder">Bestellung Abschicken</button>
|
||||
<!--<button id="formButton">Send Form</button>-->
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div>
|
||||
<span>( - Disclaimer - )</span>
|
||||
<span>Ich verdiene mit dieser Website kein Geld</span>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<title>Warenkorb</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../index.css">
|
||||
<link rel="stylesheet" href="warenkorb.css">
|
||||
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
|
||||
<script src="../script-frontend/warenkorb.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="top-nav">
|
||||
<div id="logo">
|
||||
<a href="../index.html"><img src="../html-landing-page/images/nice-ice-logo.png" alt=""></a>
|
||||
</div>
|
||||
<div id="warenkorb">
|
||||
<a href="#"><i class='fas fa-shopping-cart'></i> <span>0</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<nav>
|
||||
<div class="bottom-nav">
|
||||
<ul>
|
||||
<li><a href="../html-shop/shop.html">Shop</a></li>
|
||||
<li><a href="../html-admin/admin.html">Administrator</a></li>
|
||||
<li><a href="../html-memes/memes.html">Über uns</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<main>
|
||||
<div id="mainContainer">
|
||||
<div id="check"></div>
|
||||
<form id="myForm" method="POST" action="(#)">
|
||||
<!--https://theoneandgis.herokuapp.com-->
|
||||
|
||||
<label for="vorname">Vorname</label>
|
||||
<input type="text" id="vorname" name="vorname" value="Vorname" onfocus="this.value=''">
|
||||
|
||||
<label for="nachname">Nachname</label>
|
||||
<input type="text" id="nachname" name="nachname" value="Nachname" onfocus="this.value=''">
|
||||
|
||||
<label for="straße">Straße</label>
|
||||
<input type="text" id="straße" name="straße" value="Straße-Hausnummer" onfocus="this.value=''">
|
||||
|
||||
<label for="postleitzahl">Postleitzahl</label>
|
||||
<input type="text" id="postleitzahl" name="postleitzahl" value="PLZ-Wohnort" onfocus="this.value=''">
|
||||
</form>
|
||||
<!--<button id="printOrder">print order</button>-->
|
||||
<button id="sendOrder">Bestellung Abschicken</button>
|
||||
<!--<button id="formButton">Send Form</button>-->
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div>
|
||||
<span>( - Disclaimer - )</span>
|
||||
<span>Ich verdiene mit dieser Website kein Geld</span>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,42 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" media="screen and (min-width: 0px)" href="html-landing-page/landing-page-01-phone.css">
|
||||
<link rel="stylesheet" media="screen and (min-width: 601px)" href="html-landing-page/landing-page-02-tablet.css">
|
||||
<link rel="stylesheet" media="screen and (min-width: 1025px)" href="html-landing-page/landing-page-03-desktop.css">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
|
||||
<script src="script-frontend/index.js" defer></script>
|
||||
<!--<title>Eisdile Olé</title>-->
|
||||
<title>Nice Ice</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="top-nav">
|
||||
<div id="logo">
|
||||
<a href="#"><img src="html-landing-page/images/nice-ice-logo.png" alt=""></a>
|
||||
</div>
|
||||
<div id="warenkorb">
|
||||
<a href="html-warenkorb/warenkorb.html"><i class='fas fa-shopping-cart'></i> <span>0</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<nav>
|
||||
<div class="bottom-nav">
|
||||
<ul>
|
||||
<li><a href="html-admin/admin.html">Administrator</a></li>
|
||||
<li><a href="html-memes/memes.html">Über uns</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="bestellbox">
|
||||
<span> Eis gefällig? </span>
|
||||
<a id="box-togo" href="html-shop/shop.html">Na klar!</a>
|
||||
<!--<a id="box-tostay" href="#">Gemütlich zum Tisch</a>-->
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" media="screen and (min-width: 0px)" href="html-landing-page/landing-page-01-phone.css">
|
||||
<link rel="stylesheet" media="screen and (min-width: 601px)" href="html-landing-page/landing-page-02-tablet.css">
|
||||
<link rel="stylesheet" media="screen and (min-width: 1025px)" href="html-landing-page/landing-page-03-desktop.css">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
|
||||
<script src="script-frontend/index.js" defer></script>
|
||||
<!--<title>Eisdile Olé</title>-->
|
||||
<title>Nice Ice</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="top-nav">
|
||||
<div id="logo">
|
||||
<a href="#"><img src="html-landing-page/images/nice-ice-logo.png" alt=""></a>
|
||||
</div>
|
||||
<div id="warenkorb">
|
||||
<a href="html-warenkorb/warenkorb.html"><i class='fas fa-shopping-cart'></i> <span>0</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<nav>
|
||||
<div class="bottom-nav">
|
||||
<ul>
|
||||
<li><a href="html-admin/admin.html">Administrator</a></li>
|
||||
<li><a href="html-memes/memes.html">Über uns</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="bestellbox">
|
||||
<span> Eis gefällig? </span>
|
||||
<a id="box-togo" href="html-shop/shop.html">Na klar!</a>
|
||||
<!--<a id="box-tostay" href="#">Gemütlich zum Tisch</a>-->
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 });
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"file":"useMongo.js","sourceRoot":"","sources":["useMongo.ts"],"names":[],"mappings":";;;AAAA,iCAAiC;AAEjC,IAAiB,WAAW,CA+F3B;AA/FD,WAAiB,WAAW;IAMxB,IAAI,kBAAoC,CAAC;IACzC,IAAI,gBAAkC,CAAC;IACvC,IAAI,iBAAmC,CAAC;IACxC,IAAI,KAAK,GAAW,EAAE,CAAC;IAEvB,SAAS,SAAS,CAAC,QAAgB;QAC/B,IAAI,QAAQ,IAAI,OAAO;YACnB,KAAK,GAAG,4BAA4B,CAAC;QACzC,IAAI,QAAQ,IAAI,QAAQ;YACpB,KAAK,GAAG,8HAA8H,CAAC;IAC/I,CAAC;IAEM,KAAK,UAAU,SAAS,CAAC,QAAgB;QAC5C,SAAS,CAAC,QAAQ,CAAC,CAAC;QACpB,IAAI,OAAO,GAA6B,EAAE,eAAe,EAAE,IAAI,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC;QAC5F,IAAI,WAAW,GAAsB,IAAI,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;QAC3E,MAAM,WAAW,CAAC,OAAO,EAAE,CAAC;QAC5B,kBAAkB,GAAG,WAAW,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;QACtE,gBAAgB,GAAG,WAAW,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QAClE,OAAO,CAAC,GAAG,CAAC,uBAAuB,EAAE,kBAAkB,IAAI,SAAS,CAAC,CAAC;IAC1E,CAAC;IARqB,qBAAS,YAQ9B,CAAA;IAEM,KAAK,UAAU,iBAAiB,CAAC,WAAmB;QACvD,IAAI,WAAW,IAAI,UAAU;YACzB,iBAAiB,GAAG,kBAAkB,CAAC;aACtC,IAAI,WAAW,IAAI,QAAQ;YAC5B,iBAAiB,GAAG,gBAAgB,CAAC;IAC7C,CAAC;IALqB,6BAAiB,oBAKtC,CAAA;IAED,SAAgB,WAAW,CAAC,WAAmB,EAAE,MAAkB;QAC/D,iBAAiB,CAAC,WAAW,CAAC,CAAC;QAC/B,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QAC9B,iBAAiB,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IACxC,CAAC;IAJe,uBAAW,cAI1B,CAAA;IAEM,KAAK,UAAU,YAAY,CAAC,WAAmB,EAAE,MAAoB;QACxE,QAAQ,CAAC;QACT,iBAAiB,CAAC,WAAW,CAAC,CAAC;QAC/B,OAAO,CAAC,GAAG,CAAC,oBAAoB,EAAE,MAAM,CAAC,CAAC;QAC1C,iGAAiG;QACjG,MAAM,iBAAiB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1C,MAAM,iBAAiB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1C,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;IACzC,CAAC;IARqB,wBAAY,eAQjC,CAAA;IAEM,KAAK,UAAU,WAAW,CAAC,WAAmB,EAAE,MAAkB;QACrE,iBAAiB,CAAC,WAAW,CAAC,CAAC;QAC/B,IAAI,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,SAAS,CAAC,EAAE;YAC3B,IAAI,EAAE,GAAmB,MAAM,CAAC,GAAG,CAAC;YACpC,IAAI,KAAK,GAAmB,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;YACnD,MAAM,iBAAiB,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;SACvD;aACI;YACD,MAAM,iBAAiB,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,EAAC,CAAC,CAAC;SAC1D;IACL,CAAC;IAVqB,uBAAW,cAUhC,CAAA;IAEM,KAAK,UAAU,YAAY,CAAC,WAAmB;QAClD,iBAAiB,CAAC,WAAW,CAAC,CAAC;QAC/B,IAAI,UAAU,GAAW,MAAM,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QAC3D,OAAO,UAAU,CAAC;IACtB,CAAC;IAJqB,wBAAY,eAIjC,CAAA;IAEM,KAAK,UAAU,cAAc,CAAC,WAAmB;QACpD,iBAAiB,CAAC,WAAW,CAAC,CAAC;QAC/B,IAAI,eAAe,GAAiB,MAAM,iBAAiB,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC;QACnG,OAAO,eAAe,CAAC;IAC3B,CAAC;IAJqB,0BAAc,iBAInC,CAAA;IAEM,KAAK,UAAU,SAAS,CAAC,WAAmB,EAAE,MAAkB;QACnE,iBAAiB,CAAC,WAAW,CAAC,CAAC;QAC/B,IAAI,EAAE,GAAmB,MAAM,CAAC,GAAG,CAAC;QACpC,IAAI,KAAK,GAAmB,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;QACnD,IAAI,UAAU,GAAe,MAAM,iBAAiB,CAAC,OAAO,CAAC,EAAC,GAAG,EAAE,KAAK,EAAC,CAAE,CAAC;QAC5E,OAAO,UAAU,CAAC;IACtB,CAAC;IANqB,qBAAS,YAM9B,CAAA;IAEM,KAAK,UAAU,WAAW,CAAC,WAAmB,EAAE,MAAkB;QACrE,iBAAiB,CAAC,WAAW,CAAC,CAAC;QAC/B,IAAI,EAAE,GAAmB,MAAM,CAAC,GAAG,CAAC;QACpC,IAAI,KAAK,GAAmB,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;QACnD,OAAO,MAAM,CAAC,GAAG,CAAC;QAClB,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QAC7B,IAAI,MAAM,CAAC,UAAU,IAAI,SAAS;YAC9B,iBAAiB,CAAC,SAAS,CAAC,EAAC,GAAG,EAAE,KAAK,EAAC,EAAE,EAAC,IAAI,EAAE,EAAC,UAAU,EAAW,MAAM,CAAC,UAAW,EAAC,EAAC,CAAC,CAAC;;YAE7F,iBAAiB,CAAC,SAAS,CAAC,EAAC,GAAG,EAAE,KAAK,EAAC,EAAE,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC,CAAC;IAClE,CAAC;IAVqB,uBAAW,cAUhC,CAAA;AAEL,CAAC,EA/FgB,WAAW,GAAX,mBAAW,KAAX,mBAAW,QA+F3B"}
|
||||
{"version":3,"file":"useMongo.js","sourceRoot":"","sources":["useMongo.ts"],"names":[],"mappings":";;;AAAA,iCAAiC;AAEjC,IAAiB,WAAW,CA+F3B;AA/FD,WAAiB,WAAW;IAMxB,IAAI,kBAAoC,CAAC;IACzC,IAAI,gBAAkC,CAAC;IACvC,IAAI,iBAAmC,CAAC;IACxC,IAAI,KAAK,GAAW,EAAE,CAAC;IAEvB,SAAS,SAAS,CAAC,QAAgB;QAC/B,IAAI,QAAQ,IAAI,OAAO;YACnB,KAAK,GAAG,4BAA4B,CAAC;QACzC,IAAI,QAAQ,IAAI,QAAQ;YACpB,KAAK,GAAG,8HAA8H,CAAC;IAC/I,CAAC;IAEM,KAAK,UAAU,SAAS,CAAC,QAAgB;QAC5C,SAAS,CAAC,QAAQ,CAAC,CAAC;QACpB,IAAI,OAAO,GAA6B,EAAE,eAAe,EAAE,IAAI,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC;QAC5F,IAAI,WAAW,GAAsB,IAAI,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;QAC3E,MAAM,WAAW,CAAC,OAAO,EAAE,CAAC;QAC5B,kBAAkB,GAAG,WAAW,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;QACtE,gBAAgB,GAAG,WAAW,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QAClE,OAAO,CAAC,GAAG,CAAC,uBAAuB,EAAE,kBAAkB,IAAI,SAAS,CAAC,CAAC;IAC1E,CAAC;IARqB,qBAAS,YAQ9B,CAAA;IAEM,KAAK,UAAU,iBAAiB,CAAC,WAAmB;QACvD,IAAI,WAAW,IAAI,UAAU;YACzB,iBAAiB,GAAG,kBAAkB,CAAC;aACtC,IAAI,WAAW,IAAI,QAAQ;YAC5B,iBAAiB,GAAG,gBAAgB,CAAC;IAC7C,CAAC;IALqB,6BAAiB,oBAKtC,CAAA;IAED,SAAgB,WAAW,CAAC,WAAmB,EAAE,MAAkB;QAC/D,iBAAiB,CAAC,WAAW,CAAC,CAAC;QAC/B,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QAC9B,iBAAiB,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IACxC,CAAC;IAJe,uBAAW,cAI1B,CAAA;IAEM,KAAK,UAAU,YAAY,CAAC,WAAmB,EAAE,MAAoB;QACxE,QAAQ,CAAC;QACT,iBAAiB,CAAC,WAAW,CAAC,CAAC;QAC/B,OAAO,CAAC,GAAG,CAAC,oBAAoB,EAAE,MAAM,CAAC,CAAC;QAC1C,iGAAiG;QACjG,MAAM,iBAAiB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1C,MAAM,iBAAiB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1C,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;IACzC,CAAC;IARqB,wBAAY,eAQjC,CAAA;IAEM,KAAK,UAAU,WAAW,CAAC,WAAmB,EAAE,MAAkB;QACrE,iBAAiB,CAAC,WAAW,CAAC,CAAC;QAC/B,IAAI,MAAM,CAAC,GAAG,IAAI,SAAS,EAAE;YACzB,IAAI,EAAE,GAAmB,MAAM,CAAC,GAAG,CAAC;YACpC,IAAI,KAAK,GAAmB,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;YACnD,MAAM,iBAAiB,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;SACvD;aACI;YACD,MAAM,iBAAiB,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,EAAC,CAAC,CAAC;SAC1D;IACL,CAAC;IAVqB,uBAAW,cAUhC,CAAA;IAEM,KAAK,UAAU,YAAY,CAAC,WAAmB;QAClD,iBAAiB,CAAC,WAAW,CAAC,CAAC;QAC/B,IAAI,UAAU,GAAW,MAAM,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QAC3D,OAAO,UAAU,CAAC;IACtB,CAAC;IAJqB,wBAAY,eAIjC,CAAA;IAEM,KAAK,UAAU,cAAc,CAAC,WAAmB;QACpD,iBAAiB,CAAC,WAAW,CAAC,CAAC;QAC/B,IAAI,eAAe,GAAiB,MAAM,iBAAiB,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC;QACnG,OAAO,eAAe,CAAC;IAC3B,CAAC;IAJqB,0BAAc,iBAInC,CAAA;IAEM,KAAK,UAAU,SAAS,CAAC,WAAmB,EAAE,MAAkB;QACnE,iBAAiB,CAAC,WAAW,CAAC,CAAC;QAC/B,IAAI,EAAE,GAAmB,MAAM,CAAC,GAAG,CAAC;QACpC,IAAI,KAAK,GAAmB,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;QACnD,IAAI,UAAU,GAAe,MAAM,iBAAiB,CAAC,OAAO,CAAC,EAAC,GAAG,EAAE,KAAK,EAAC,CAAE,CAAC;QAC5E,OAAO,UAAU,CAAC;IACtB,CAAC;IANqB,qBAAS,YAM9B,CAAA;IAEM,KAAK,UAAU,WAAW,CAAC,WAAmB,EAAE,MAAkB;QACrE,iBAAiB,CAAC,WAAW,CAAC,CAAC;QAC/B,IAAI,EAAE,GAAmB,MAAM,CAAC,GAAG,CAAC;QACpC,IAAI,KAAK,GAAmB,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;QACnD,OAAO,MAAM,CAAC,GAAG,CAAC;QAClB,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QAC7B,IAAI,MAAM,CAAC,UAAU,IAAI,SAAS;YAC9B,iBAAiB,CAAC,SAAS,CAAC,EAAC,GAAG,EAAE,KAAK,EAAC,EAAE,EAAC,IAAI,EAAE,EAAC,UAAU,EAAW,MAAM,CAAC,UAAW,EAAC,EAAC,CAAC,CAAC;;YAE7F,iBAAiB,CAAC,SAAS,CAAC,EAAC,GAAG,EAAE,KAAK,EAAC,EAAE,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC,CAAC;IAClE,CAAC;IAVqB,uBAAW,cAUhC,CAAA;AAEL,CAAC,EA/FgB,WAAW,GAAX,mBAAW,KAAX,mBAAW,QA+F3B"}
|
||||
|
|
@ -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<void> { // _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<void> {
|
||||
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<void> {
|
||||
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<void> {
|
||||
connectCollection(_collection);
|
||||
if (!(_entry.id == undefined)) {
|
||||
let id: string = <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<number> {
|
||||
connectCollection(_collection);
|
||||
let entryCount: number = await currentCollection.count({});
|
||||
return entryCount;
|
||||
}
|
||||
|
||||
export async function findCollection(_collection: string): Promise<ProduktObj[]> {
|
||||
connectCollection(_collection);
|
||||
let foundCollection: ProduktObj[] = await currentCollection.find().sort({ category: 1 }).toArray();
|
||||
return foundCollection;
|
||||
}
|
||||
|
||||
export async function findEntry(_collection: string, _entry: ProduktObj): Promise<ProduktObj> {
|
||||
connectCollection(_collection);
|
||||
let id: string = <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<void> {
|
||||
connectCollection(_collection);
|
||||
let id: string = <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: (<number>_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<void> { // _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<void> {
|
||||
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<void> {
|
||||
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<void> {
|
||||
connectCollection(_collection);
|
||||
if (_entry._id != undefined) {
|
||||
let id: string = <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<number> {
|
||||
connectCollection(_collection);
|
||||
let entryCount: number = await currentCollection.count({});
|
||||
return entryCount;
|
||||
}
|
||||
|
||||
export async function findCollection(_collection: string): Promise<ProduktObj[]> {
|
||||
connectCollection(_collection);
|
||||
let foundCollection: ProduktObj[] = await currentCollection.find().sort({ category: 1 }).toArray();
|
||||
return foundCollection;
|
||||
}
|
||||
|
||||
export async function findEntry(_collection: string, _entry: ProduktObj): Promise<ProduktObj> {
|
||||
connectCollection(_collection);
|
||||
let id: string = <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<void> {
|
||||
connectCollection(_collection);
|
||||
let id: string = <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: (<number>_entry.orderCount)}});
|
||||
else
|
||||
currentCollection.updateOne({_id: objID}, {$set: _entry});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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<void> {
|
||||
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 = <string>_request.url;
|
||||
//let splitString: string = (<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<void> {
|
||||
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<void> {
|
||||
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<void> {
|
||||
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 = <string>_request.url;
|
||||
//let splitString: string = (<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<void> {
|
||||
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<void> {
|
||||
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}"}`);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 = `
|
||||
<tr>
|
||||
<th>Bestellung</th>
|
||||
<td>Nr. ${iterator.Nr}</td>
|
||||
<tr>
|
||||
<tr>
|
||||
<th>Preis</th>
|
||||
<td>${iterator.orderPrice} €</td>
|
||||
</tr>
|
||||
<th>Name</th>
|
||||
<td>${iterator.vorname} ${iterator.nachname}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Straße</th>
|
||||
<td>${iterator.straße}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Wohnort</th>
|
||||
<td>${iterator.postleitzahl}</td>
|
||||
</tr>
|
||||
table.innerHTML = `
|
||||
<tr>
|
||||
<th>Bestellung</th>
|
||||
<td>Nr. ${iterator.Nr}</td>
|
||||
<tr>
|
||||
<tr>
|
||||
<th>Preis</th>
|
||||
<td>${iterator.orderPrice} €</td>
|
||||
</tr>
|
||||
<th>Name</th>
|
||||
<td>${iterator.vorname} ${iterator.nachname}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Straße</th>
|
||||
<td>${iterator.straße}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Wohnort</th>
|
||||
<td>${iterator.postleitzahl}</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
else {
|
||||
table.innerHTML += `
|
||||
<tr>
|
||||
<th>Bestellung</th>
|
||||
<td>Nr. ${iterator.Nr}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Preis</th>
|
||||
<td>${iterator.productPrice}€</td>
|
||||
table.innerHTML += `
|
||||
<tr>
|
||||
<th>Bestellung</th>
|
||||
<td>Nr. ${iterator.Nr}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Preis</th>
|
||||
<td>${iterator.productPrice}€</td>
|
||||
</tr>`;
|
||||
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 = `
|
||||
<button class="removeOne" content=${JSON.stringify(iterator._id)}>▲ Entfernen ▲</button>
|
||||
div.innerHTML = `
|
||||
<button class="removeOne" content=${JSON.stringify(iterator._id)}>▲ Entfernen ▲</button>
|
||||
<button class="editOne" content=${JSON.stringify(iterator)}>▲ Bearbeiten ▲</button> `;
|
||||
document.querySelector("#tableDiv").append(div);
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,201 +1,201 @@
|
|||
|
||||
namespace frontShop {
|
||||
|
||||
interface Products {
|
||||
[type: string]: string | number;
|
||||
}
|
||||
|
||||
let serverUrl: string = "https://theoneandgis.herokuapp.com";
|
||||
|
||||
init();
|
||||
|
||||
async function init(): Promise<void> {
|
||||
await getOrderList();
|
||||
addListening();
|
||||
fixCartCount();
|
||||
}
|
||||
async function getOrderList(): Promise<void> {
|
||||
let url: string = serverUrl + "/mongo/orders/findCollection" + "?";
|
||||
let response: Response = await fetch(url);
|
||||
let jsonResponse: Products[] = await response.json();
|
||||
let previousNr: number = -1;
|
||||
//(<HTMLDivElement>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`;
|
||||
(<HTMLDivElement>document.querySelector("#tableDiv")).append(button);
|
||||
previousNr = <number>iterator.Nr;
|
||||
}
|
||||
|
||||
|
||||
if (!(iterator.vorname == undefined)) {
|
||||
table.innerHTML = `
|
||||
<tr>
|
||||
<th>Bestellung</th>
|
||||
<td>Nr. ${iterator.Nr}</td>
|
||||
<tr>
|
||||
<tr>
|
||||
<th>Preis</th>
|
||||
<td>${iterator.orderPrice} €</td>
|
||||
</tr>
|
||||
<th>Name</th>
|
||||
<td>${iterator.vorname} ${iterator.nachname}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Straße</th>
|
||||
<td>${iterator.straße}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Wohnort</th>
|
||||
<td>${iterator.postleitzahl}</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
else {
|
||||
table.innerHTML += `
|
||||
<tr>
|
||||
<th>Bestellung</th>
|
||||
<td>Nr. ${iterator.Nr}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Preis</th>
|
||||
<td>${iterator.productPrice}€</td>
|
||||
</tr>`;
|
||||
for (const key in iterator) {
|
||||
switch (key) {
|
||||
case ("container"): table.innerHTML += `<tr><th>${key}</th><td>${iterator.container}</td></tr>`;
|
||||
break;
|
||||
case ("flavour1"): table.innerHTML += `<tr><th>${key}</th><td>${iterator.flavour1}</td></tr>`;
|
||||
break;
|
||||
case ("flavour2"): table.innerHTML += `<tr><th>${key}</th><td>${iterator.flavour2}</td></tr>`;
|
||||
break;
|
||||
case ("flavour3"): table.innerHTML += `<tr><th>${key}</th><td>${iterator.flavour3}</td></tr>`;
|
||||
break;
|
||||
case ("flavour4"): table.innerHTML += `<tr><th>${key}</th><td>${iterator.flavour4}</td></tr>`;
|
||||
break;
|
||||
case ("flavour5"): table.innerHTML += `<tr><th>${key}</th><td>${iterator.flavour5}</td></tr>`;
|
||||
break;
|
||||
case ("flavour6"): table.innerHTML += `<tr><th>${key}</th><td>${iterator.flavour6}</td></tr>`;
|
||||
break;
|
||||
case ("topping1"): table.innerHTML += `<tr><th>${key}</th><td>${iterator.topping1}</td></tr>`;
|
||||
break;
|
||||
case ("topping2"): table.innerHTML += `<tr><th>${key}</th><td>${iterator.topping2}</td></tr>`;
|
||||
break;
|
||||
case ("topping3"): table.innerHTML += `<tr><th>${key}</th><td>${iterator.topping3}</td></tr>`;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
(<HTMLDivElement>document.querySelector("#tableDiv")).append(table);
|
||||
let div: HTMLDivElement = document.createElement("div");
|
||||
div.classList.add("buttonDiv");
|
||||
div.innerHTML = `
|
||||
<button class="removeOne" content=${JSON.stringify(iterator._id)}>▲ Entfernen ▲</button>
|
||||
<button class="editOne" content=${JSON.stringify(iterator)}>▲ Bearbeiten ▲</button> `;
|
||||
(<HTMLDivElement>document.querySelector("#tableDiv")).append(div);
|
||||
}
|
||||
}
|
||||
|
||||
function addListening(): void {
|
||||
let elementList: NodeListOf<Element> = document.querySelectorAll(".removeOne");
|
||||
for (const iterator of elementList)
|
||||
iterator.addEventListener("click", removeDataID);
|
||||
let elementList2: NodeListOf<Element> = document.querySelectorAll(".removeButton");
|
||||
for (const iterator of elementList2)
|
||||
iterator.addEventListener("click", removeDataNR);
|
||||
let elementList3: NodeListOf<Element> = document.querySelectorAll(".editOne");
|
||||
for (const iterator of elementList3)
|
||||
iterator.addEventListener("click", editData);
|
||||
}
|
||||
|
||||
async function removeDataID(_event: Event): Promise<void> {
|
||||
await removeData(_event, "id");
|
||||
}
|
||||
|
||||
async function removeDataNR(_event: Event): Promise<void> {
|
||||
await removeData(_event, "order");
|
||||
}
|
||||
|
||||
async function removeData(_event: Event, _parameter: string): Promise<void> {
|
||||
let target: HTMLElement = (<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 = (<HTMLElement>_event.target);
|
||||
let obj: Products = JSON.parse(target.getAttribute("content")!);
|
||||
let div: HTMLDivElement = document.createElement("div");
|
||||
div.setAttribute("id", "formDiv");
|
||||
div.innerHTML = `<form id="myForm"></form>`;
|
||||
if ((<HTMLFormElement>document.querySelector("#myForm")) != null)
|
||||
(<HTMLDivElement>document.querySelector("#tableDiv")).removeChild(div);
|
||||
(<HTMLDivElement>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", <string>obj[iterator]);
|
||||
|
||||
if (iterator == "_id") {
|
||||
input.setAttribute("readonly", "");
|
||||
}
|
||||
else {
|
||||
input.setAttribute("onfocus", `if(this.value == "${<string>obj[iterator]}") this.value=""`);
|
||||
input.setAttribute("onblur", `if(this.value == "") this.value="${<string>obj[iterator]}"`);
|
||||
}
|
||||
|
||||
(<HTMLLabelElement>document.querySelector("#myForm")).append(label);
|
||||
(<HTMLInputElement>document.querySelector("#myForm")).append(input);
|
||||
}
|
||||
let button: HTMLButtonElement = document.createElement("button");
|
||||
button.setAttribute("id", "setAttribute");
|
||||
button.innerHTML = "Bestätigung";
|
||||
button.addEventListener("click", confirmForm);
|
||||
(<HTMLInputElement>document.querySelector("#myForm")).append(button);
|
||||
}
|
||||
|
||||
async function confirmForm(): Promise<void> {
|
||||
let formData: FormData = new FormData(document.forms[0]);
|
||||
let url: string = "";
|
||||
//tslint:disable-next-line: no-any
|
||||
let query: URLSearchParams = new URLSearchParams(<any>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}`);
|
||||
(<HTMLElement>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<void> {
|
||||
await getOrderList();
|
||||
addListening();
|
||||
fixCartCount();
|
||||
}
|
||||
async function getOrderList(): Promise<void> {
|
||||
let url: string = serverUrl + "/mongo/orders/findCollection" + "?";
|
||||
let response: Response = await fetch(url);
|
||||
let jsonResponse: Products[] = await response.json();
|
||||
let previousNr: number = -1;
|
||||
//(<HTMLDivElement>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`;
|
||||
(<HTMLDivElement>document.querySelector("#tableDiv")).append(button);
|
||||
previousNr = <number>iterator.Nr;
|
||||
}
|
||||
|
||||
|
||||
if (!(iterator.vorname == undefined)) {
|
||||
table.innerHTML = `
|
||||
<tr>
|
||||
<th>Bestellung</th>
|
||||
<td>Nr. ${iterator.Nr}</td>
|
||||
<tr>
|
||||
<tr>
|
||||
<th>Preis</th>
|
||||
<td>${iterator.orderPrice} €</td>
|
||||
</tr>
|
||||
<th>Name</th>
|
||||
<td>${iterator.vorname} ${iterator.nachname}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Straße</th>
|
||||
<td>${iterator.straße}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Wohnort</th>
|
||||
<td>${iterator.postleitzahl}</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
else {
|
||||
table.innerHTML += `
|
||||
<tr>
|
||||
<th>Bestellung</th>
|
||||
<td>Nr. ${iterator.Nr}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Preis</th>
|
||||
<td>${iterator.productPrice}€</td>
|
||||
</tr>`;
|
||||
for (const key in iterator) {
|
||||
switch (key) {
|
||||
case ("container"): table.innerHTML += `<tr><th>${key}</th><td>${iterator.container}</td></tr>`;
|
||||
break;
|
||||
case ("flavour1"): table.innerHTML += `<tr><th>${key}</th><td>${iterator.flavour1}</td></tr>`;
|
||||
break;
|
||||
case ("flavour2"): table.innerHTML += `<tr><th>${key}</th><td>${iterator.flavour2}</td></tr>`;
|
||||
break;
|
||||
case ("flavour3"): table.innerHTML += `<tr><th>${key}</th><td>${iterator.flavour3}</td></tr>`;
|
||||
break;
|
||||
case ("flavour4"): table.innerHTML += `<tr><th>${key}</th><td>${iterator.flavour4}</td></tr>`;
|
||||
break;
|
||||
case ("flavour5"): table.innerHTML += `<tr><th>${key}</th><td>${iterator.flavour5}</td></tr>`;
|
||||
break;
|
||||
case ("flavour6"): table.innerHTML += `<tr><th>${key}</th><td>${iterator.flavour6}</td></tr>`;
|
||||
break;
|
||||
case ("topping1"): table.innerHTML += `<tr><th>${key}</th><td>${iterator.topping1}</td></tr>`;
|
||||
break;
|
||||
case ("topping2"): table.innerHTML += `<tr><th>${key}</th><td>${iterator.topping2}</td></tr>`;
|
||||
break;
|
||||
case ("topping3"): table.innerHTML += `<tr><th>${key}</th><td>${iterator.topping3}</td></tr>`;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
(<HTMLDivElement>document.querySelector("#tableDiv")).append(table);
|
||||
let div: HTMLDivElement = document.createElement("div");
|
||||
div.classList.add("buttonDiv");
|
||||
div.innerHTML = `
|
||||
<button class="removeOne" content=${JSON.stringify(iterator._id)}>▲ Entfernen ▲</button>
|
||||
<button class="editOne" content=${JSON.stringify(iterator)}>▲ Bearbeiten ▲</button> `;
|
||||
(<HTMLDivElement>document.querySelector("#tableDiv")).append(div);
|
||||
}
|
||||
}
|
||||
|
||||
function addListening(): void {
|
||||
let elementList: NodeListOf<Element> = document.querySelectorAll(".removeOne");
|
||||
for (const iterator of elementList)
|
||||
iterator.addEventListener("click", removeDataID);
|
||||
let elementList2: NodeListOf<Element> = document.querySelectorAll(".removeButton");
|
||||
for (const iterator of elementList2)
|
||||
iterator.addEventListener("click", removeDataNR);
|
||||
let elementList3: NodeListOf<Element> = document.querySelectorAll(".editOne");
|
||||
for (const iterator of elementList3)
|
||||
iterator.addEventListener("click", editData);
|
||||
}
|
||||
|
||||
async function removeDataID(_event: Event): Promise<void> {
|
||||
await removeData(_event, "id");
|
||||
}
|
||||
|
||||
async function removeDataNR(_event: Event): Promise<void> {
|
||||
await removeData(_event, "order");
|
||||
}
|
||||
|
||||
async function removeData(_event: Event, _parameter: string): Promise<void> {
|
||||
let target: HTMLElement = (<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 = (<HTMLElement>_event.target);
|
||||
let obj: Products = JSON.parse(target.getAttribute("content")!);
|
||||
let div: HTMLDivElement = document.createElement("div");
|
||||
div.setAttribute("id", "formDiv");
|
||||
div.innerHTML = `<form id="myForm"></form>`;
|
||||
if ((<HTMLFormElement>document.querySelector("#myForm")) != null)
|
||||
(<HTMLDivElement>document.querySelector("#tableDiv")).removeChild(div);
|
||||
(<HTMLDivElement>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", <string>obj[iterator]);
|
||||
|
||||
if (iterator == "_id") {
|
||||
input.setAttribute("readonly", "");
|
||||
}
|
||||
else {
|
||||
input.setAttribute("onfocus", `if(this.value == "${<string>obj[iterator]}") this.value=""`);
|
||||
input.setAttribute("onblur", `if(this.value == "") this.value="${<string>obj[iterator]}"`);
|
||||
}
|
||||
|
||||
(<HTMLLabelElement>document.querySelector("#myForm")).append(label);
|
||||
(<HTMLInputElement>document.querySelector("#myForm")).append(input);
|
||||
}
|
||||
let button: HTMLButtonElement = document.createElement("button");
|
||||
button.setAttribute("id", "setAttribute");
|
||||
button.innerHTML = "Bestätigung";
|
||||
button.addEventListener("click", confirmForm);
|
||||
(<HTMLInputElement>document.querySelector("#myForm")).append(button);
|
||||
}
|
||||
|
||||
async function confirmForm(): Promise<void> {
|
||||
let formData: FormData = new FormData(document.forms[0]);
|
||||
let url: string = "";
|
||||
//tslint:disable-next-line: no-any
|
||||
let query: URLSearchParams = new URLSearchParams(<any>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}`);
|
||||
(<HTMLElement>document.querySelector("#warenkorb span")).innerHTML = `${localStorage.CartCount}`;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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}`);
|
||||
(<HTMLElement>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}`);
|
||||
(<HTMLElement>document.querySelector("#warenkorb span")).innerHTML = `${localStorage.CartCount}`;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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 = (<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 = (<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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 += `
|
||||
<div class="${iterator.category}">
|
||||
<img src="images/${iterator.imageName}" alt="Product"/><br>
|
||||
<div class="product_name">${iterator.name.replace("-", " ")}</div>
|
||||
<button class="product_button" content=${JSON.stringify(iterator)}>Hinzufügen</button>
|
||||
</div>
|
||||
document.querySelector(`#${iterator.category}Div`).innerHTML += `
|
||||
<div class="${iterator.category}">
|
||||
<img src="images/${iterator.imageName}" alt="Product"/><br>
|
||||
<div class="product_name">${iterator.name.replace("-", " ")}</div>
|
||||
<button class="product_button" content=${JSON.stringify(iterator)}>Hinzufügen</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 = "";
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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<void> {
|
||||
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}`;
|
||||
(<HTMLDivElement>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!";
|
||||
(<HTMLDivElement>document.querySelector("#topTake")).append(button);
|
||||
}
|
||||
|
||||
async function getProductList(): Promise<void> {
|
||||
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;
|
||||
(<HTMLElement>document.querySelector(`#${iterator.category}Div`)).innerHTML += `
|
||||
<div class="${iterator.category}">
|
||||
<img src="images/${iterator.imageName}" alt="Product"/><br>
|
||||
<div class="product_name">${(<string>iterator.name).replace("-", " ")}</div>
|
||||
<button class="product_button" content=${JSON.stringify(iterator)}>Hinzufügen</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
function addButtonFunctions(): void {
|
||||
let buttonList: NodeListOf<HTMLButtonElement> = document.querySelectorAll(".product_button");
|
||||
for (const iterator of buttonList)
|
||||
iterator.addEventListener("click", addProduct);
|
||||
|
||||
(<HTMLButtonElement>document.querySelector("#id_table_0")).addEventListener("click", addProduct);
|
||||
(<HTMLButtonElement>document.querySelector("#nextButton")).addEventListener("click", addCurrent);
|
||||
(<HTMLButtonElement>document.querySelector("#sendButton")).addEventListener("click", addToLocal);
|
||||
(<HTMLButtonElement>document.querySelector("#resetButton")).addEventListener("click", clearCombination);
|
||||
}
|
||||
|
||||
function addProduct(_event: Event): void {
|
||||
let target: HTMLElement = (<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 = <string>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(<string>_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();
|
||||
(<HTMLDivElement>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}`);
|
||||
(<HTMLElement>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 {
|
||||
(<HTMLElement>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]);
|
||||
(<HTMLElement>document.querySelector("#displayContainer")).innerHTML += `<img src="images/${obj.imageName}" alt=""/>`;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
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<void> {
|
||||
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}`;
|
||||
|
||||
(<HTMLDivElement>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!";
|
||||
|
||||
(<HTMLDivElement>document.querySelector("#topTake")).append(button);
|
||||
}
|
||||
|
||||
async function getProductList(): Promise<void> {
|
||||
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;
|
||||
(<HTMLElement>document.querySelector(`#${iterator.category}Div`)).innerHTML += `
|
||||
<div class="${iterator.category}">
|
||||
<img src="images/${iterator.imageName}" alt="Product"/><br>
|
||||
<div class="product_name">${(<string>iterator.name).replace("-", " ")}</div>
|
||||
<button class="product_button" content=${JSON.stringify(iterator)}>Hinzufügen</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
function addButtonFunctions(): void {
|
||||
let buttonList: NodeListOf<HTMLButtonElement> = document.querySelectorAll(".product_button");
|
||||
for (const iterator of buttonList)
|
||||
iterator.addEventListener("click", addProduct);
|
||||
|
||||
(<HTMLButtonElement>document.querySelector("#id_table_0")).addEventListener("click", addProduct);
|
||||
(<HTMLButtonElement>document.querySelector("#nextButton")).addEventListener("click", addCurrent);
|
||||
(<HTMLButtonElement>document.querySelector("#sendButton")).addEventListener("click", addOrderToLocal);
|
||||
(<HTMLButtonElement>document.querySelector("#resetButton")).addEventListener("click", clearCombination);
|
||||
}
|
||||
|
||||
function addProduct(_event: Event): void {
|
||||
let target: HTMLElement = (<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 = <string>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(<string>_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();
|
||||
(<HTMLDivElement>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}`);
|
||||
(<HTMLElement>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 {
|
||||
(<HTMLElement>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]);
|
||||
(<HTMLElement>document.querySelector("#displayContainer")).innerHTML += `<img src="images/${obj.imageName}" alt=""/>`;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"file":"warenkorb.js","sourceRoot":"","sources":["warenkorb.ts"],"names":[],"mappings":";AACA,IAAU,SAAS,CAiJlB;AAjJD,WAAU,SAAS;IAEf,IAAI,SAAS,GAAW,oCAAoC,CAAC;IAC7D,IAAI,UAAU,GAAa,EAAE,CAAC;IAC9B,IAAI,UAAU,GAAW,CAAC,CAAC;IAC3B,IAAI,WAAW,GAAW,CAAC,CAAC;IAE5B,IAAI,EAAE,CAAC;IAEP,KAAK,UAAU,IAAI;QACf,MAAM,QAAQ,EAAE,CAAC;QACjB,MAAM,iBAAiB,EAAE,CAAC;QAC1B,YAAY,EAAE,CAAC;IACnB,CAAC;IAMD,KAAK,UAAU,QAAQ;QACnB,2DAA2D;QAC3D,WAAW,GAAG,MAAM,SAAS,EAAE,CAAC;QAChC,KAAK,MAAM,GAAG,IAAI,YAAY,EAAE;YAC5B,IAAI,YAAY,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,GAAG,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;gBAClE,IAAI,OAAO,GAAW,YAAY,CAAC,OAAO,CAAC,GAAG,CAAE,CAAC;gBACjD,IAAI,UAAU,GAAe,MAAM,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;gBACvD,IAAI,aAAa,GAAW,GAAG,CAAC;gBAChC,IAAI,YAAY,GAAW,CAAC,CAAC;gBAC7B,IAAI,YAAY,GAAW,CAAC,CAAC;gBAC7B,IAAI,UAAU,GAAW,CAAC,CAAC;gBAE3B,IAAI,GAAG,GAAmB,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBACxD,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;gBAC7B,GAAG,CAAC,SAAS,GAAG,EAAE,CAAC;gBACnB,KAAK,MAAM,IAAI,IAAI,UAAU;oBACzB,IAAI,IAAI,CAAC,QAAQ,IAAI,WAAW,EAAE;wBAC9B,aAAa,IAAI,aAAa,GAAG,GAAG,GAAG,IAAI,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,CAAC;wBAC9D,GAAG,CAAC,SAAS,IAAI,mBAAmB,IAAI,CAAC,IAAI,aAAa,CAAC;qBAC9D;gBACL,KAAK,MAAM,IAAI,IAAI,UAAU;oBACzB,IAAI,IAAI,CAAC,QAAQ,IAAI,SAAS,EAAE;wBAC5B,aAAa,IAAI,WAAW,YAAY,GAAG,GAAG,GAAG,GAAG,IAAI,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,CAAC;wBAC3E,GAAG,CAAC,SAAS,IAAI,mBAAmB,YAAY,KAAK,IAAI,CAAC,IAAI,aAAa,CAAC;wBAC5E,YAAY,EAAE,CAAC;qBAClB;gBACL,KAAK,MAAM,IAAI,IAAI,UAAU;oBACzB,IAAI,IAAI,CAAC,QAAQ,IAAI,SAAS,EAAE;wBAC5B,aAAa,IAAI,WAAW,YAAY,GAAG,GAAG,GAAG,GAAG,IAAI,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,CAAC;wBAC3E,GAAG,CAAC,SAAS,IAAI,qBAAqB,YAAY,KAAK,IAAI,CAAC,IAAI,aAAa,CAAC;wBAC9E,YAAY,EAAE,CAAC;qBAClB;gBACL,KAAK,MAAM,IAAI,IAAI,UAAU,EAAE;oBAC3B,IAAI,IAAI,CAAC,KAAK,IAAI,SAAS,EAAE;wBACzB,UAAU,IAAY,IAAI,CAAC,KAAK,CAAC;wBACjC,UAAU,IAAY,IAAI,CAAC,KAAK,CAAC;qBACpC;iBACJ;gBACD,KAAK,MAAM,IAAI,IAAI,UAAU,EAAE;oBAC3B,IAAI,IAAI,CAAC,KAAK,IAAI,SAAS,EAAE;wBACzB,aAAa,IAAI,SAAS,GAAG,GAAG,GAAG,IAAI,IAAI,CAAC,KAAK,GAAG,GAAG,GAAG,CAAC;qBAC9D;iBACJ;gBACD,aAAa,IAAI,gBAAgB,GAAG,GAAG,GAAG,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,GAAG,MAAM,GAAG,GAAG,GAAG,IAAI,WAAW,GAAG,GAAG,GAAG,CAAC;gBACvH,yIAAyI;gBACzI,+IAA+I;gBAC/I,aAAa,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;gBACvE,GAAG,CAAC,SAAS,IAAI,4CAA4C,UAAU,CAAC,MAAM,gBAAgB,GAAG,qBAAqB,UAAU,CAAC,MAAM,GAAG,CAAC,qBAAqB,CAAC;gBACjK,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;gBACd,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;gBAC/D,6FAA6F;aAChG;SACJ;IACL,CAAC;IAED;;;;;;;OAOG;IAEH,KAAK,UAAU,YAAY;QACvB,IAAI,QAAQ,GAAa,IAAI,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QACzD,IAAI,GAAG,GAAW,EAAE,CAAC;QACrB,kCAAkC;QAClC,IAAI,KAAK,GAAoB,IAAI,eAAe,CAAM,QAAQ,CAAC,CAAC;QAChE,GAAG,GAAG,SAAS,GAAG,GAAG,GAAG,OAAO,GAAG,GAAG,GAAG,QAAQ,GAAG,GAAG,GAAG,aAAa,GAAG,GAAG,GAAG,GAAG,GAAG,KAAK,CAAC,QAAQ,EAAE,GAAG,OAAO,WAAW,EAAE,GAAG,eAAe,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;QACtK,MAAM,KAAK,CAAC,GAAG,CAAC,CAAC;QAEjB,KAAK,MAAM,QAAQ,IAAI,UAAU,EAAE;YAC/B,MAAM,KAAK,CAAC,SAAS,EAAE;gBACnB,MAAM,EAAE,MAAM;gBACd,OAAO,EAAE;oBACL,cAAc,EAAE,YAAY;iBAC/B;gBACD,IAAI,EAAE,QAAQ;aACjB,CAAC,CAAC;SACN;QAED,WAAW,EAAE,CAAC;QACd,MAAM,KAAK,CAAE,SAAS,GAAG,2BAA2B,GAAG,2CAA2C,GAAG,WAAW,CAAC,QAAQ,EAAE,CAAC,CAAC;QAE7H,YAAY,CAAC,KAAK,EAAE,CAAC;QACrB,QAAQ,CAAC,MAAM,EAAE,CAAC;QAClB,KAAK,CAAC,2GAA2G,CAAC,CAAC;IACvH,CAAC;IAED,KAAK,UAAU,SAAS;QACpB,IAAI,QAAQ,GAAa,MAAM,KAAK,CAAC,SAAS,GAAG,sDAAsD,CAAC,CAAC;QACzG,IAAI,QAAQ,GAAa,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QAC/C,IAAI,cAAc,GAAW,UAAU,CAAS,QAAQ,CAAC,UAAU,CAAC,CAAC;QACrE,OAAO,cAAc,CAAC;IAC1B,CAAC;IAED,KAAK,UAAU,iBAAiB;QAC5B,2FAA2F;QAC7E,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;QAC5F,2FAA2F;QAC3F,IAAI,WAAW,GAAwB,QAAQ,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;QAClF,KAAK,MAAM,QAAQ,IAAI,WAAW;YAC9B,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;IAC9D,CAAC;IAED,SAAS,iBAAiB,CAAC,MAAa;QACpC,YAAY,CAAC,OAAO,CAAC,WAAW,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,OAAO,CAAC,WAAW,CAAE,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAC3F,IAAI,MAAM,GAA8B,MAAM,CAAC,MAAO,CAAC;QACvD,OAAO,UAAU,CAAC,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,YAAY,CAAE,CAAC,CAAC,CAAC;QAClE,YAAY,CAAC,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,WAAW,CAAE,CAAC,CAAE;QAC5D,QAAQ,CAAC,MAAM,EAAE,CAAC;IACtB,CAAC;IAED,SAAS,YAAY;QACjB,IAAI,YAAY,CAAC,WAAW,CAAC,IAAI,SAAS;YACtC,YAAY,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;QACzC,IAAI,KAAK,GAAW,CAAC,CAAC;QACtB,KAAK,MAAM,GAAG,IAAI,YAAY,EAAE;YAC5B,IAAI,GAAG,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;gBAC7B,KAAK,EAAE,CAAC;aACX;SACJ;QACD,YAAY,CAAC,OAAO,CAAC,WAAW,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC;QAChC,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAE,CAAC,SAAS,GAAG,GAAG,YAAY,CAAC,SAAS,EAAE,CAAC;IACrG,CAAC;AACL,CAAC,EAjJS,SAAS,KAAT,SAAS,QAiJlB"}
|
||||
{"version":3,"file":"warenkorb.js","sourceRoot":"","sources":["warenkorb.ts"],"names":[],"mappings":";AACA,IAAU,SAAS,CAkJlB;AAlJD,WAAU,SAAS;IAEf,IAAI,SAAS,GAAW,uBAAuB,CAAC;IAChD,IAAI,UAAU,GAAa,EAAE,CAAC;IAC9B,IAAI,UAAU,GAAW,CAAC,CAAC;IAC3B,IAAI,WAAW,GAAW,CAAC,CAAC;IAE5B,IAAI,EAAE,CAAC;IAEP,KAAK,UAAU,IAAI;QACf,MAAM,QAAQ,EAAE,CAAC;QACjB,MAAM,iBAAiB,EAAE,CAAC;QAC1B,YAAY,EAAE,CAAC;IACnB,CAAC;IAMD,KAAK,UAAU,QAAQ;QACnB,2DAA2D;QAC3D,WAAW,GAAG,MAAM,SAAS,EAAE,CAAC;QAChC,KAAK,MAAM,GAAG,IAAI,YAAY,EAAE;YAC5B,IAAI,YAAY,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,GAAG,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;gBAClE,IAAI,OAAO,GAAW,YAAY,CAAC,OAAO,CAAC,GAAG,CAAE,CAAC;gBACjD,IAAI,UAAU,GAAe,MAAM,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;gBACvD,IAAI,aAAa,GAAW,GAAG,CAAC;gBAChC,IAAI,YAAY,GAAW,CAAC,CAAC;gBAC7B,IAAI,YAAY,GAAW,CAAC,CAAC;gBAC7B,IAAI,UAAU,GAAW,CAAC,CAAC;gBAE3B,IAAI,GAAG,GAAmB,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBACxD,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;gBAC7B,GAAG,CAAC,SAAS,GAAG,EAAE,CAAC;gBACnB,KAAK,MAAM,IAAI,IAAI,UAAU;oBACzB,IAAI,IAAI,CAAC,QAAQ,IAAI,WAAW,EAAE;wBAC9B,aAAa,IAAI,aAAa,GAAG,GAAG,GAAG,IAAI,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,CAAC;wBAC9D,GAAG,CAAC,SAAS,IAAI,mBAAmB,IAAI,CAAC,IAAI,aAAa,CAAC;qBAC9D;gBACL,KAAK,MAAM,IAAI,IAAI,UAAU;oBACzB,IAAI,IAAI,CAAC,QAAQ,IAAI,SAAS,EAAE;wBAC5B,aAAa,IAAI,WAAW,YAAY,GAAG,GAAG,GAAG,GAAG,IAAI,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,CAAC;wBAC3E,GAAG,CAAC,SAAS,IAAI,mBAAmB,YAAY,KAAK,IAAI,CAAC,IAAI,aAAa,CAAC;wBAC5E,YAAY,EAAE,CAAC;qBAClB;gBACL,KAAK,MAAM,IAAI,IAAI,UAAU;oBACzB,IAAI,IAAI,CAAC,QAAQ,IAAI,SAAS,EAAE;wBAC5B,aAAa,IAAI,WAAW,YAAY,GAAG,GAAG,GAAG,GAAG,IAAI,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,CAAC;wBAC3E,GAAG,CAAC,SAAS,IAAI,qBAAqB,YAAY,KAAK,IAAI,CAAC,IAAI,aAAa,CAAC;wBAC9E,YAAY,EAAE,CAAC;qBAClB;gBACL,KAAK,MAAM,IAAI,IAAI,UAAU,EAAE;oBAC3B,IAAI,IAAI,CAAC,KAAK,IAAI,SAAS,EAAE;wBACzB,UAAU,IAAY,IAAI,CAAC,KAAK,CAAC;wBACjC,UAAU,IAAY,IAAI,CAAC,KAAK,CAAC;qBACpC;iBACJ;gBACD,KAAK,MAAM,IAAI,IAAI,UAAU,EAAE;oBAC3B,IAAI,IAAI,CAAC,KAAK,IAAI,SAAS,EAAE;wBACzB,aAAa,IAAI,SAAS,GAAG,GAAG,GAAG,IAAI,IAAI,CAAC,KAAK,GAAG,GAAG,GAAG,CAAC;qBAC9D;iBACJ;gBACD,aAAa,IAAI,gBAAgB,GAAG,GAAG,GAAG,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,GAAG,MAAM,GAAG,GAAG,GAAG,IAAI,WAAW,GAAG,GAAG,GAAG,CAAC;gBACvH,yIAAyI;gBACzI,+IAA+I;gBAC/I,aAAa,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;gBACvE,GAAG,CAAC,SAAS,IAAI,4CAA4C,UAAU,CAAC,MAAM,gBAAgB,GAAG,qBAAqB,UAAU,CAAC,MAAM,GAAG,CAAC,qBAAqB,CAAC;gBACjK,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;gBACd,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;gBAC/D,6FAA6F;aAChG;SACJ;IACL,CAAC;IAED;;;;;;;OAOG;IAEH,KAAK,UAAU,YAAY;QACvB,IAAI,QAAQ,GAAa,IAAI,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QACzD,IAAI,GAAG,GAAW,EAAE,CAAC;QACrB,kCAAkC;QAClC,IAAI,KAAK,GAAoB,IAAI,eAAe,CAAM,QAAQ,CAAC,CAAC;QAChE,GAAG,GAAG,SAAS,GAAG,GAAG,GAAG,OAAO,GAAG,GAAG,GAAG,QAAQ,GAAG,GAAG,GAAG,aAAa,GAAG,GAAG,GAAG,GAAG,GAAG,KAAK,CAAC,QAAQ,EAAE,GAAG,OAAO,WAAW,EAAE,GAAG,eAAe,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;QACtK,MAAM,KAAK,CAAC,GAAG,CAAC,CAAC;QAEjB,KAAK,MAAM,QAAQ,IAAI,UAAU,EAAE;YAC/B,OAAO,CAAC,GAAG,CAAC,GAAG,GAAG,8DAA8D,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAE,CAAC;YAC5H,MAAM,KAAK,CAAC,SAAS,EAAE;gBACnB,MAAM,EAAE,MAAM;gBACd,OAAO,EAAE;oBACL,cAAc,EAAE,YAAY;iBAC/B;gBACD,IAAI,EAAE,GAAG,GAAG,8DAA8D,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,GAAG;aAC5H,CAAC,CAAC;SACN;QAED,WAAW,EAAE,CAAC;QACd,MAAM,KAAK,CAAC,SAAS,GAAG,2BAA2B,GAAG,2CAA2C,GAAG,WAAW,CAAC,QAAQ,EAAE,CAAC,CAAC;QAE5H,YAAY,CAAC,KAAK,EAAE,CAAC;QACrB,QAAQ,CAAC,MAAM,EAAE,CAAC;QAClB,KAAK,CAAC,2GAA2G,CAAC,CAAC;IACvH,CAAC;IAED,KAAK,UAAU,SAAS;QACpB,IAAI,QAAQ,GAAa,MAAM,KAAK,CAAC,SAAS,GAAG,sDAAsD,CAAC,CAAC;QACzG,IAAI,QAAQ,GAAa,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QAC/C,IAAI,cAAc,GAAW,UAAU,CAAS,QAAQ,CAAC,UAAU,CAAC,CAAC;QACrE,OAAO,cAAc,CAAC;IAC1B,CAAC;IAED,KAAK,UAAU,iBAAiB;QAC5B,2FAA2F;QAC7E,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;QAC5F,2FAA2F;QAC3F,IAAI,WAAW,GAAwB,QAAQ,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;QAClF,KAAK,MAAM,QAAQ,IAAI,WAAW;YAC9B,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;IAC9D,CAAC;IAED,SAAS,iBAAiB,CAAC,MAAa;QACpC,YAAY,CAAC,OAAO,CAAC,WAAW,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,OAAO,CAAC,WAAW,CAAE,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAC3F,IAAI,MAAM,GAA8B,MAAM,CAAC,MAAO,CAAC;QACvD,OAAO,UAAU,CAAC,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,YAAY,CAAE,CAAC,CAAC,CAAC;QAClE,YAAY,CAAC,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,WAAW,CAAE,CAAC,CAAE;QAC5D,QAAQ,CAAC,MAAM,EAAE,CAAC;IACtB,CAAC;IAED,SAAS,YAAY;QACjB,IAAI,YAAY,CAAC,WAAW,CAAC,IAAI,SAAS;YACtC,YAAY,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;QACzC,IAAI,KAAK,GAAW,CAAC,CAAC;QACtB,KAAK,MAAM,GAAG,IAAI,YAAY,EAAE;YAC5B,IAAI,GAAG,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;gBAC7B,KAAK,EAAE,CAAC;aACX;SACJ;QACD,YAAY,CAAC,OAAO,CAAC,WAAW,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC;QAChC,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAE,CAAC,SAAS,GAAG,GAAG,YAAY,CAAC,SAAS,EAAE,CAAC;IACrG,CAAC;AACL,CAAC,EAlJS,SAAS,KAAT,SAAS,QAkJlB"}
|
||||
|
|
@ -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<void> {
|
||||
await setOrder();
|
||||
await addButtonListener();
|
||||
fixCartCount();
|
||||
}
|
||||
|
||||
interface Products {
|
||||
[type: string]: string | number;
|
||||
}
|
||||
|
||||
async function setOrder(): Promise<void> {
|
||||
//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 += `<span>Behälter: ${keys.name}</span><br>`;
|
||||
}
|
||||
for (const keys of contentObj)
|
||||
if (keys.category == "flavour") {
|
||||
contentString += `"flavour${countFlavour}"` + ":" + `"${keys.name}"` + ",";
|
||||
div.innerHTML += `<span>Kugel Nr. ${countFlavour}: ${keys.name}</span><br>`;
|
||||
countFlavour++;
|
||||
}
|
||||
for (const keys of contentObj)
|
||||
if (keys.category == "topping") {
|
||||
contentString += `"topping${countTopping}"` + ":" + `"${keys.name}"` + ",";
|
||||
div.innerHTML += `<span>Topping Nr. ${countTopping}: ${keys.name}</span><br>`;
|
||||
countTopping++;
|
||||
}
|
||||
for (const keys of contentObj) {
|
||||
if (keys.price != undefined) {
|
||||
orderPrice += <number>keys.price;
|
||||
countPrice += <number>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 += `<button class="removeButton" arrayIndex="${orderArray.length}" localName="${key}">Kombination Nr. ${orderArray.length + 1} entfernen</button>`;
|
||||
orderArray.push(contentString);
|
||||
(<HTMLDivElement>document.querySelector("#check")).append(div);
|
||||
//(<HTMLDivElement>document.querySelector("#check")).innerHTML += contentString + "<br><br>";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*async function saveForm(): Promise<void> {
|
||||
let formData: FormData = new FormData(document.forms[0]);
|
||||
let url: string = "";
|
||||
//tslint:disable-next-line: no-any
|
||||
let query: URLSearchParams = new URLSearchParams(<any>formData);
|
||||
url = "http://localhost:8100" + "/" + "mongo" + "/" + "orders" + "/" + "insertEntry" + "/" + "?" + query.toString();
|
||||
await fetch(url);
|
||||
}*/
|
||||
|
||||
async function confirmOrder(): Promise<void> {
|
||||
let formData: FormData = new FormData(document.forms[0]);
|
||||
let url: string = "";
|
||||
//tslint:disable-next-line: no-any
|
||||
let query: URLSearchParams = new URLSearchParams(<any>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<number> {
|
||||
let response: Response = await fetch(serverUrl + "/mongo/orders/findEntry?_id=5f1a48d7a8f957baaa07cfeb");
|
||||
let orderObj: Products = await response.json();
|
||||
let orderObjNumber: number = parseFloat(<string>orderObj.orderCount);
|
||||
return orderObjNumber;
|
||||
}
|
||||
|
||||
async function addButtonListener(): Promise<void> {
|
||||
//(<HTMLElement>document.querySelector("#printOrder")).addEventListener("click", setOrder);
|
||||
(<HTMLElement>document.querySelector("#sendOrder")).addEventListener("click", confirmOrder);
|
||||
//(<HTMLElement>document.querySelector("#formButton")).addEventListener("click", saveForm);
|
||||
let elementList: NodeListOf<Element> = 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 = (<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}`);
|
||||
(<HTMLElement>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<void> {
|
||||
await setOrder();
|
||||
await addButtonListener();
|
||||
fixCartCount();
|
||||
}
|
||||
|
||||
interface Products {
|
||||
[type: string]: string | number;
|
||||
}
|
||||
|
||||
async function setOrder(): Promise<void> {
|
||||
//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 += `<span>Behälter: ${keys.name}</span><br>`;
|
||||
}
|
||||
for (const keys of contentObj)
|
||||
if (keys.category == "flavour") {
|
||||
contentString += `"flavour${countFlavour}"` + ":" + `"${keys.name}"` + ",";
|
||||
div.innerHTML += `<span>Kugel Nr. ${countFlavour}: ${keys.name}</span><br>`;
|
||||
countFlavour++;
|
||||
}
|
||||
for (const keys of contentObj)
|
||||
if (keys.category == "topping") {
|
||||
contentString += `"topping${countTopping}"` + ":" + `"${keys.name}"` + ",";
|
||||
div.innerHTML += `<span>Topping Nr. ${countTopping}: ${keys.name}</span><br>`;
|
||||
countTopping++;
|
||||
}
|
||||
for (const keys of contentObj) {
|
||||
if (keys.price != undefined) {
|
||||
orderPrice += <number>keys.price;
|
||||
countPrice += <number>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 += `<button class="removeButton" arrayIndex="${orderArray.length}" localName="${key}">Kombination Nr. ${orderArray.length + 1} entfernen</button>`;
|
||||
orderArray.push(contentString);
|
||||
(<HTMLDivElement>document.querySelector("#check")).append(div);
|
||||
//(<HTMLDivElement>document.querySelector("#check")).innerHTML += contentString + "<br><br>";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*async function saveForm(): Promise<void> {
|
||||
let formData: FormData = new FormData(document.forms[0]);
|
||||
let url: string = "";
|
||||
//tslint:disable-next-line: no-any
|
||||
let query: URLSearchParams = new URLSearchParams(<any>formData);
|
||||
url = "http://localhost:8100" + "/" + "mongo" + "/" + "orders" + "/" + "insertEntry" + "/" + "?" + query.toString();
|
||||
await fetch(url);
|
||||
}*/
|
||||
|
||||
async function confirmOrder(): Promise<void> {
|
||||
let formData: FormData = new FormData(document.forms[0]);
|
||||
let url: string = "";
|
||||
//tslint:disable-next-line: no-any
|
||||
let query: URLSearchParams = new URLSearchParams(<any>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<number> {
|
||||
let response: Response = await fetch(serverUrl + "/mongo/orders/findEntry?_id=5f34646911221b807b8df54c");
|
||||
let orderObj: Products = await response.json();
|
||||
let orderObjNumber: number = parseFloat(<string>orderObj.orderCount);
|
||||
return orderObjNumber;
|
||||
}
|
||||
|
||||
async function addButtonListener(): Promise<void> {
|
||||
//(<HTMLElement>document.querySelector("#printOrder")).addEventListener("click", setOrder);
|
||||
(<HTMLElement>document.querySelector("#sendOrder")).addEventListener("click", confirmOrder);
|
||||
//(<HTMLElement>document.querySelector("#formButton")).addEventListener("click", saveForm);
|
||||
let elementList: NodeListOf<Element> = 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 = (<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}`);
|
||||
(<HTMLElement>document.querySelector("#warenkorb span")).innerHTML = `${localStorage.CartCount}`;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue