+ `;
+ container.appendChild(product);
+ }
+ }
+}
+// Folgender auskommentierter Code dient mir als Archiv für Gedankenansätze oder Verläufe.
+// Wenn dies nicht gerne gesehen ist, gebt mir kurz Bescheid und ich werde es entfernen
+/*
+function zeichnen(tagArray: Tag[]): void {
+ for (let i: number = 0; i < tagArray.length ; i++){
+ let title: HTMLElement = document.createElement(tagArray[i].tag);
+ title.innerHTML = "I bims title";
+ title.classList.add("title");
+ if (tagArray[i].image) {
+ title.setAttribute("src", "value");
+ title.setAttribute("alt", "value");
+ }
+ document.body.appendChild(title);
+ }
+}
+*/
+/*
+console.log("Hello Console");
+let theName: String = "Justin" + "Dretvic" + 20;
+console.log(theName);
+*/
+/*
+# Template für ein Produkt in HTML
+
tag class
+
Color: Rainbow
tag class content
+
tag class
+ 3279,99 ¥ tag class content
+ tag content
+ tag content
+
+ tag attribute1 attribute2
+
Size: 4m²
tag class content
+
tag class
+
If you can't choose one color, go and catch them all!
tag content
+
+
+*/
+//# sourceMappingURL=script.js.map
\ No newline at end of file
diff --git a/Aufgaben/Aufgabe_05_2020-05-27/script.js.map b/Aufgaben/Aufgabe_05_2020-05-27/script.js.map
new file mode 100644
index 0000000..9f218a5
--- /dev/null
+++ b/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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"}
\ No newline at end of file
diff --git a/Aufgaben/Aufgabe_05_2020-05-27/script.ts b/Aufgaben/Aufgabe_05_2020-05-27/script.ts
new file mode 100644
index 0000000..1d13dfa
--- /dev/null
+++ b/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}`;
+ (document.querySelector("#übersicht")).appendChild(heading);
+
+ let container: HTMLDivElement = document.createElement("div");
+ container.classList.add("container");
+ (document.querySelector("#übersicht")).appendChild(container);
+
+ for (let index: number = 0; index < categories[nummer].products.length; index++) {
+ let product: HTMLDivElement = document.createElement("div");
+ product.classList.add("product");
+ product.innerHTML = `
+
tag attribute1 attribute2
+ 
+ 
+