Upload Aufgabe 07.1

( + Added White Color to Steckbrief )

Aufgaben/Aufgabe_07_2020-06-10/myJSON.json

@@ -0,0 +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."
+            }
+        ]
+    }
+]

Aufgaben/Aufgabe_07_2020-06-10/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_07_2020-06-10/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_07_2020-06-10/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_07_2020-06-10/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_07_2020-06-10/script.js

@@ -0,0 +1,140 @@
+"use strict";
+// Datensammlung für Produkte
+var Aufgabe06;
+(function (Aufgabe06) {
+    let shoppingPrice = 0;
+    let shoppingCount = 0;
+    communicate("http://127.0.0.1:5500/Aufgaben/Aufgabe_07_2020-06-10/myJSON.json");
+    async function communicate(_url) {
+        let response = await fetch(_url);
+        let jsonObj = await response.json();
+        console.log("Response", response);
+        printProducts(100, jsonObj);
+        /*console.log(jsonObj);
+        console.log(jsonObj[0].products[2].price);
+        console.log(jsonObj[1].products[3].title);*/
+        document.querySelector("#special_a").addEventListener("click", drawSpecial);
+        function drawSpecial() {
+            printProducts(0, jsonObj);
+        }
+        document.querySelector("#bunt_a").addEventListener("click", drawBunt);
+        function drawBunt() {
+            printProducts(1, jsonObj);
+        }
+        document.querySelector("#grün_a").addEventListener("click", drawGrün);
+        function drawGrün() {
+            printProducts(2, jsonObj);
+        }
+        document.querySelector("#all_a").addEventListener("click", drawAll);
+        function drawAll() {
+            printProducts(100, jsonObj);
+        }
+    }
+    Aufgabe06.communicate = communicate;
+    //printProducts(100);
+    //console.log(jsonObj[1].products[3].title);
+    //create Structure;
+    function printProducts(_catNumber, _jsonObj) {
+        clearProducts(_jsonObj);
+        let catCheck = false;
+        if (_catNumber != 100)
+            catCheck = true;
+        else
+            _catNumber = 0;
+        for (let nummer = _catNumber; nummer < _jsonObj.length; nummer++) {
+            let heading = document.createElement("h1");
+            heading.setAttribute("id", _jsonObj[nummer].id);
+            heading.innerHTML = `${_jsonObj[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 < _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" productPrice="${_jsonObj[nummer].products[index].price}">+</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(_jsonObj) {
+        console.log("Ich wurde geklickt");
+        for (let nummer = 0; nummer < _jsonObj.length; nummer++) {
+            let alles = document.querySelector("#übersicht");
+            alles.innerHTML = "";
+        }
+    }
+    function money(_event) {
+        let target = _event.target;
+        let price = parseFloat(target.getAttribute("productPrice"));
+        console.log("Artikel-Preis: " + price + " ¥");
+        shoppingPrice += price;
+        console.log("Shopping-Cart-Preis: " + shoppingPrice + " ¥");
+        shoppingCount++;
+        document.querySelector("#shoppingCartNumber").innerHTML = shoppingCount.toLocaleString();
+    }
+    function addShoppingFunction() {
+        const buttons = document.getElementsByClassName("addProduct");
+        for (const button of buttons) {
+            button.addEventListener("click", money);
+        }
+    }
+})(Aufgabe06 || (Aufgabe06 = {}));
+// 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);
+*/ 
+//# sourceMappingURL=script.js.map

Aufgaben/Aufgabe_07_2020-06-10/script.js.map

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

Aufgaben/Aufgabe_07_2020-06-10/script.ts

@@ -0,0 +1,173 @@
+// Datensammlung für Produkte
+
+namespace Aufgabe06 {
+
+    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[];
+    }
+
+    communicate("http://127.0.0.1:5500/Aufgaben/Aufgabe_07_2020-06-10/myJSON.json");
+
+    export async function communicate(_url: RequestInfo): Promise<void> {
+        let response: Response = await fetch(_url);
+        let jsonObj: Category[] = await response.json();
+        console.log("Response", response);
+        printProducts(100, jsonObj);
+
+        /*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, jsonObj);
+        }
+        (<HTMLLIElement>document.querySelector("#bunt_a")).addEventListener("click", drawBunt);
+        function drawBunt(): void {
+            printProducts(1, jsonObj);
+        }
+        (<HTMLLIElement>document.querySelector("#grün_a")).addEventListener("click", drawGrün);
+        function drawGrün(): void {
+            printProducts(2, jsonObj);
+        }
+        (<HTMLLIElement>document.querySelector("#all_a")).addEventListener("click", drawAll);
+        function drawAll(): void {
+            printProducts(100, jsonObj);
+        }
+    }
+
+    //printProducts(100);
+    //console.log(jsonObj[1].products[3].title);
+
+    //create Structure;
+
+    function printProducts(_catNumber: number, _jsonObj: Category[]): void {
+
+        clearProducts(_jsonObj);
+
+        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" productPrice="${_jsonObj[nummer].products[index].price}">+</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(_jsonObj: Category[]): void {
+        console.log("Ich wurde geklickt");
+        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")!);
+        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>
+*/
+
+/* 
+let myJSON: string = JSON.stringify(categories);
+JSON.stringify(categories);
+console.log(myJSON);
+*/

Aufgaben/Aufgabe_07_2020-06-10/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: 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;
+}

Aufgaben/Aufgabe_07_2020-06-10/shop.html

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

Steckbrief/steckbrief.htm

@@ -7,13 +7,14 @@
 body {
 	font-family: arial;
 	font-size: small;
-	background: #eeeee
+	background: #FFFFFF;
 }
 </style>
 </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" target="_blank">										 	Github Reposiroty → Issues 	<br> </a>
+	<a href="https://yamidesu.github.io/GIS-SoSe-2020/Aufgaben/Aufgabe_07_2020-06-10/shop.html" target="_blank">  		Aufgabe_07_2020-06-10 <br> </a>
 	<a href="https://yamidesu.github.io/GIS-SoSe-2020/Aufgaben/Aufgabe_06_2020-06-03/shop.html" target="_blank"> 		Aufgabe_06_2020-06-03 		<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_04_2020-05-20/shop.html" target="_blank"> 		Aufgabe_04_2020-05-20 		<br> </a>