Upload Aufgabe 05

Aufgaben/Aufgabe_04_2020-05-20/.vs/VSWorkspaceState.json

@@ -1,6 +0,0 @@
-{
-  "ExpandedNodes": [
-    ""
-  ],
-  "PreviewInSolutionExplorer": false
-}

Aufgaben/Aufgabe_05_2020-05-27/product-big.css

@@ -0,0 +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;
+}

Aufgaben/Aufgabe_05_2020-05-27/product-medium.css

@@ -0,0 +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;
+}

Aufgaben/Aufgabe_05_2020-05-27/product-small.css

@@ -0,0 +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;
+}

Aufgaben/Aufgabe_05_2020-05-27/product.css

@@ -0,0 +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;
+}

Aufgaben/Aufgabe_05_2020-05-27/script.js

@@ -0,0 +1,206 @@
+"use strict";
+// Datensammlung für Produkte
+let categories = [
+    {
+        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() {
+    for (let nummer = 0; nummer < categories.length; nummer++) {
+        let heading = document.createElement("h1");
+        heading.setAttribute("id", categories[nummer].id);
+        heading.innerHTML = `${categories[nummer].title}`;
+        document.querySelector("#übersicht").appendChild(heading);
+        let container = document.createElement("div");
+        container.classList.add("container");
+        document.querySelector("#übersicht").appendChild(container);
+        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>
+            `;
+            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>
+*/ 
+//# sourceMappingURL=script.js.map

Aufgaben/Aufgabe_05_2020-05-27/script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"script.js","sourceRoot":"","sources":["script.ts"],"names":[],"mappings":"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"}

Aufgaben/Aufgabe_05_2020-05-27/script.ts

@@ -0,0 +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>
+*/

Aufgaben/Aufgabe_05_2020-05-27/shop.css

@@ -0,0 +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;
+}

Aufgaben/Aufgabe_05_2020-05-27/shop.html

@@ -0,0 +1,48 @@
+<!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" />
+
+    <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>

Steckbrief/steckbrief.htm

@@ -13,13 +13,13 @@ body {
 </head>
 <body>
 	<!-- Hier die Links zu den gelösten Aufgaben einstellen, aktuelle oben, alte stehen lassen! Format: Aufgabenbezeichnung, Datum -->
-	<a href="https://github.com/YamiDesu/GIS-SoSe-2020/issues" taget="_blank">										 Github Reposiroty → Issues <br> </a>
+	<a href="https://github.com/YamiDesu/GIS-SoSe-2020/issues" taget="_blank">										 	Github Reposiroty → Issues 	<br> </a>
-	<a href="https://yamidesu.github.io/GIS-SoSe-2020/Aufgaben/Aufgabe_04_2020-05-20/shop.html" target="_blank"> 		Aufgabe_04_2020-05-20 	<br> </a>
+	<a href="https://yamidesu.github.io/GIS-SoSe-2020/Aufgaben/Aufgabe_05_2020-05-27/shop.html" target="_blank">  		Aufgabe_05_2020-05-27 		<br> </a>
-	<a href="https://yamidesu.github.io/GIS-SoSe-2020/Aufgaben/Aufgabe_03_2020-05-13/portfolio.html" target="_blank"> 	Aufgabe_03_2020-05-13 	<br> </a>
+	<a href="https://yamidesu.github.io/GIS-SoSe-2020/Aufgaben/Aufgabe_04_2020-05-20/shop.html" target="_blank"> 		Aufgabe_04_2020-05-20 		<br> </a>
-	<a href="https://yamidesu.github.io/GIS-SoSe-2020/Aufgaben/Aufgabe_02_2020-05-06/portfolio.html" target="_blank"> 	Aufgabe_02_2020-05-06 		 </a> &
+	<a href="https://yamidesu.github.io/GIS-SoSe-2020/Aufgaben/Aufgabe_03_2020-05-13/portfolio.html" target="_blank"> 	Aufgabe_03_2020-05-13 		<br> </a>
-	<a href="https://yamidesu.github.io/GIS-SoSe-2020/Aufgaben/Aufgabe_02_2020-05-06/tags_used.html" target="_blank"> 	tags_used 				<br> </a>
+	<a href="https://yamidesu.github.io/GIS-SoSe-2020/Aufgaben/Aufgabe_02_2020-05-06/portfolio.html" target="_blank"> 	Aufgabe_02_2020-05-06 		 	 </a> &
-	<a href="https://yamidesu.github.io/GIS-SoSe-2020/Aufgaben/Aufgabe_01_2020-04-29/index.html" target="_blank"> 		Aufgabe_01_2020-04-29 	<br> </a>
+	<a href="https://yamidesu.github.io/GIS-SoSe-2020/Aufgaben/Aufgabe_02_2020-05-06/tags_used.html" target="_blank"> 	tags_used 					<br> </a>
-	<a href="https://yamidesu.github.io/GIS-SoSe-2020/Aufgaben/Aufgabe_00_2020-04-22/index.html" target="_blank"> 		Aufgabe_00_2020-04-22 	<br> </a>
+	<a href="https://yamidesu.github.io/GIS-SoSe-2020/Aufgaben/Aufgabe_01_2020-04-29/index.html" target="_blank"> 		Aufgabe_01_2020-04-29 		<br> </a>
-	
+	<a href="https://yamidesu.github.io/GIS-SoSe-2020/Aufgaben/Aufgabe_00_2020-04-22/index.html" target="_blank"> 		Aufgabe_00_2020-04-22 		<br> </a>
 </body>
 </html>

tsconfig.json

@@ -0,0 +1,61 @@
+{
+  "compilerOptions": {
+    /* Basic Options */
+    "target": "ESNEXT", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+    "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    // "lib": [],                             /* Specify library files to be included in the compilation. */
+    // "allowJs": true,                       /* Allow javascript files to be compiled. */
+    // "checkJs": true,                       /* Report errors in .js files. */
+    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    "sourceMap": true,                        /* Generates corresponding '.map' file. */
+    //"outFile": "./build/EngineTest.js",     /* Concatenate and emit output to single file. */
+    // "outDir": "../build",                  /* Redirect output structure to the directory. */
+    // "sourceRoot": "./src/",
+    // "rootDir": "./src/",                   /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "composite": true,                     /* Enable project compilation */
+    "removeComments": false, /* Do not emit comments to output. */
+    // "noEmit": true,                        /* Do not emit outputs. */
+    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+    
+    /* Strict Type-Checking Options */
+    //"strict": true,                      /* Enable all strict type-checking options. */
+    "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    "strictNullChecks": true,              /* Enable strict null checks. */
+    "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+    
+    /* Additional Checks */
+    "noUnusedLocals": true,                /* Report errors on unused locals. */
+    "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    "noFallthroughCasesInSwitch": false,   /* Report errors for fallthrough cases in switch statement. */
+
+    /* Module Resolution Options */
+    "moduleResolution": "node"  /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [],                       /* List of folders to include type definitions from. */
+    // "types": [],                           /* Type declaration files to be included in compilation. */
+    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    //"esModuleInterop": true                 /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+
+    /* Source Map Options */
+    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+    
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+  }
+}

tslint.json

@@ -0,0 +1,60 @@
+{
+	"rules": {
+		"align": [true, "parameters", "arguments", "statements"],
+		"ban": false,
+		"class-name": true,
+		"comment-format": [false, "check-space", "check-lowercase"],
+		"curly": false,
+		"eofline": false,
+		"forin": false,
+		"indent": [true, "spaces", 2],
+		"interface-name": false,
+		"jsdoc-format": false,
+		"label-position": true,
+		"max-line-length": [false, 140],
+		"member-ordering": [true, {"order": "fields-first"}],
+		"no-any": true,
+		"no-arg": true,
+		"no-bitwise": false,
+		"no-console": [false, "debug", "info", "time", "timeEnd", "trace"],
+		"no-construct": true,
+		"no-parameter-properties": true,
+		"no-debugger": false,
+		"no-duplicate-variable": true,
+		"no-empty": true,
+		"no-eval": true,
+		"no-string-literal": false,
+		"no-switch-case-fall-through": false,
+		"trailing-comma": [true, {
+				"singleline": "never",
+				"multiline": "never"
+			}
+		],
+		"no-trailing-whitespace": false,
+		"no-unused-expression": true,
+		"no-unused-variable": true,
+		"no-use-before-declare": true,
+		"no-var-requires": false,
+		"no-conditional-assignment": true,
+		"no-shadowed-variable": false,
+		"one-line": [true, "check-open-brace", "check-catch", "check-whitespace"],
+		"quotemark": [true, "double"],
+		"radix": false,
+		"semicolon": true,
+		"switch-default": false,
+		"triple-equals": [false, "allow-null-check"],
+		"typedef": [true, "call-signature", "parameter", "property-declaration", "variable-declaration", "member-variable-declaration"],
+		"typedef-whitespace": [true, {
+				"call-signature": "nospace",
+				"index-signature": "nospace",
+				"parameter": "nospace",
+				"property-declaration": "nospace",
+				"variable-declaration": "nospace"
+			}
+		],
+		"use-strict": [false, "check-module", "check-function"],
+		"variable-name": [true, "check-format", "allow-leading-underscore"],
+		"whitespace": [true, "check-branch", "check-decl", "check-operator", "check-separator", "check-type"],
+		"file-header": [false, ""]
+	}
+}