diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/filler.png b/Aufgaben/Aufgabe_07_2020-06-10/files/filler.png new file mode 100644 index 0000000..c01cba8 Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/filler.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/grass-black.png b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-black.png new file mode 100644 index 0000000..a001d67 Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-black.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/grass-blue.png b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-blue.png new file mode 100644 index 0000000..fb7299a Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-blue.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/grass-green-chess-square.png b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-green-chess-square.png new file mode 100644 index 0000000..975209c Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-green-chess-square.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/grass-green-dark-1.png b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-green-dark-1.png new file mode 100644 index 0000000..c0c73e6 Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-green-dark-1.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/grass-green-dark-2.png b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-green-dark-2.png new file mode 100644 index 0000000..af89a6c Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-green-dark-2.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/grass-green-dark-3.png b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-green-dark-3.png new file mode 100644 index 0000000..a70def1 Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-green-dark-3.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/grass-green-light-1.png b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-green-light-1.png new file mode 100644 index 0000000..3a4e110 Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-green-light-1.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/grass-green-light-2.png b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-green-light-2.png new file mode 100644 index 0000000..b1269d1 Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-green-light-2.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/grass-green-light-3.png b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-green-light-3.png new file mode 100644 index 0000000..2ca3be3 Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-green-light-3.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/grass-green-murica.png b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-green-murica.png new file mode 100644 index 0000000..aa3bd10 Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-green-murica.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/grass-green.jpg b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-green.jpg new file mode 100644 index 0000000..6cb0e67 Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-green.jpg differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/grass-green.png b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-green.png new file mode 100644 index 0000000..6119d71 Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-green.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/grass-orange.png b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-orange.png new file mode 100644 index 0000000..3951eb3 Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-orange.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/grass-pink.png b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-pink.png new file mode 100644 index 0000000..a9b4dd4 Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-pink.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/grass-purple.png b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-purple.png new file mode 100644 index 0000000..b81eb87 Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-purple.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/grass-rainbow-square.png b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-rainbow-square.png new file mode 100644 index 0000000..294f948 Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-rainbow-square.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/grass-red.png b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-red.png new file mode 100644 index 0000000..a922a36 Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-red.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/grass-white.png b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-white.png new file mode 100644 index 0000000..211516d Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-white.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/grass-yellow.png b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-yellow.png new file mode 100644 index 0000000..fc31309 Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/grass-yellow.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/grass_icon_left.png b/Aufgaben/Aufgabe_07_2020-06-10/files/grass_icon_left.png new file mode 100644 index 0000000..1aee3df Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/grass_icon_left.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/grass_icon_right.png b/Aufgaben/Aufgabe_07_2020-06-10/files/grass_icon_right.png new file mode 100644 index 0000000..ed73fc9 Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/grass_icon_right.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-black.png b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-black.png new file mode 100644 index 0000000..c2ae66c Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-black.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-blue.png b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-blue.png new file mode 100644 index 0000000..2a32a4f Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-blue.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-green-chess.png b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-green-chess.png new file mode 100644 index 0000000..fec817a Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-green-chess.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-green-dark-1.png b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-green-dark-1.png new file mode 100644 index 0000000..69b824f Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-green-dark-1.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-green-dark-2.png b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-green-dark-2.png new file mode 100644 index 0000000..7b49da4 Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-green-dark-2.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-green-dark-3.png b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-green-dark-3.png new file mode 100644 index 0000000..a3e0b57 Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-green-dark-3.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-green-light-1.png b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-green-light-1.png new file mode 100644 index 0000000..5a11b60 Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-green-light-1.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-green-light-2.png b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-green-light-2.png new file mode 100644 index 0000000..e21f59c Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-green-light-2.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-green-light-3.png b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-green-light-3.png new file mode 100644 index 0000000..b7a1834 Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-green-light-3.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-green-murica.png b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-green-murica.png new file mode 100644 index 0000000..179a5ce Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-green-murica.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-green.jpg b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-green.jpg new file mode 100644 index 0000000..3a9b101 Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-green.jpg differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-green.png b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-green.png new file mode 100644 index 0000000..b58fa10 Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-green.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-orange.png b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-orange.png new file mode 100644 index 0000000..cfb2d8d Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-orange.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-pink.png b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-pink.png new file mode 100644 index 0000000..a241575 Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-pink.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-purple.png b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-purple.png new file mode 100644 index 0000000..323e522 Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-purple.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-rainbow.png b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-rainbow.png new file mode 100644 index 0000000..221509a Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-rainbow.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-red.png b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-red.png new file mode 100644 index 0000000..c04d0b7 Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-red.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-white.png b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-white.png new file mode 100644 index 0000000..c719072 Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-white.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-yellow.png b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-yellow.png new file mode 100644 index 0000000..ab84021 Binary files /dev/null and b/Aufgaben/Aufgabe_07_2020-06-10/files/original/grass-yellow.png differ diff --git a/Aufgaben/Aufgabe_07_2020-06-10/myJSON.json b/Aufgaben/Aufgabe_07_2020-06-10/myJSON.json new file mode 100644 index 0000000..6ed2827 --- /dev/null +++ b/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." + } + ] + } +] \ No newline at end of file diff --git a/Aufgaben/Aufgabe_07_2020-06-10/product-big.css b/Aufgaben/Aufgabe_07_2020-06-10/product-big.css new file mode 100644 index 0000000..75c1953 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/Aufgaben/Aufgabe_07_2020-06-10/product-medium.css b/Aufgaben/Aufgabe_07_2020-06-10/product-medium.css new file mode 100644 index 0000000..a5579e6 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/Aufgaben/Aufgabe_07_2020-06-10/product-small.css b/Aufgaben/Aufgabe_07_2020-06-10/product-small.css new file mode 100644 index 0000000..3d0f2e0 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/Aufgaben/Aufgabe_07_2020-06-10/product.css b/Aufgaben/Aufgabe_07_2020-06-10/product.css new file mode 100644 index 0000000..e84906b --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/Aufgaben/Aufgabe_07_2020-06-10/script.js b/Aufgaben/Aufgabe_07_2020-06-10/script.js new file mode 100644 index 0000000..0fc74a4 --- /dev/null +++ b/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 = ` +

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

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

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

+
+

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

+
+ `; + container.appendChild(product); + } + if (catCheck) + break; + } + addShoppingFunction(); + } + function clearProducts(_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 +
tag class +

Color: Rainbow

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

Size: 4m²

tag class content +
tag class +

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

tag content +
+
+*/ +/* +let myJSON: string = JSON.stringify(categories); +JSON.stringify(categories); +console.log(myJSON); +*/ +//# sourceMappingURL=script.js.map \ No newline at end of file diff --git a/Aufgaben/Aufgabe_07_2020-06-10/script.js.map b/Aufgaben/Aufgabe_07_2020-06-10/script.js.map new file mode 100644 index 0000000..65a2af3 --- /dev/null +++ b/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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"} \ No newline at end of file diff --git a/Aufgaben/Aufgabe_07_2020-06-10/script.ts b/Aufgaben/Aufgabe_07_2020-06-10/script.ts new file mode 100644 index 0000000..08b2c50 --- /dev/null +++ b/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 { + 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);*/ + + (document.querySelector("#special_a")).addEventListener("click", drawSpecial); + function drawSpecial(): void { + printProducts(0, jsonObj); + } + (document.querySelector("#bunt_a")).addEventListener("click", drawBunt); + function drawBunt(): void { + printProducts(1, jsonObj); + } + (document.querySelector("#grün_a")).addEventListener("click", drawGrün); + function drawGrün(): void { + printProducts(2, jsonObj); + } + (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}`; + (document.querySelector("#übersicht")).appendChild(heading); + + let container: HTMLDivElement = document.createElement("div"); + container.classList.add("container"); + (document.querySelector("#übersicht")).appendChild(container); + + for (let index: number = 0; index < _jsonObj[nummer].products.length; index++) { + let product: HTMLDivElement = document.createElement("div"); + product.classList.add("product"); + product.innerHTML = ` +

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

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

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

+
+

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

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

Color: Rainbow

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

Size: 4m²

tag class content +
tag class +

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

tag content +
+
+*/ + +/* +let myJSON: string = JSON.stringify(categories); +JSON.stringify(categories); +console.log(myJSON); +*/ \ No newline at end of file diff --git a/Aufgaben/Aufgabe_07_2020-06-10/shop.css b/Aufgaben/Aufgabe_07_2020-06-10/shop.css new file mode 100644 index 0000000..e54fc54 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/Aufgaben/Aufgabe_07_2020-06-10/shop.html b/Aufgaben/Aufgabe_07_2020-06-10/shop.html new file mode 100644 index 0000000..a9b6ec4 --- /dev/null +++ b/Aufgaben/Aufgabe_07_2020-06-10/shop.html @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + green grass + + + +
+
+ grass + GREEEN GRASS + grass +
+ +
+ +
+ +
+ +
+

Disclaimer

+

This website is not used monetarily

+

Not even if things seem to be sold here!

+
+ + + \ No newline at end of file diff --git a/Steckbrief/steckbrief.htm b/Steckbrief/steckbrief.htm index 5fcd3ac..a8f17ab 100644 --- a/Steckbrief/steckbrief.htm +++ b/Steckbrief/steckbrief.htm @@ -7,13 +7,14 @@ body { font-family: arial; font-size: small; - background: #eeeee + background: #FFFFFF; } Github Reposiroty → Issues
+ Aufgabe_07_2020-06-10
Aufgabe_06_2020-06-03
Aufgabe_05_2020-05-27
Aufgabe_04_2020-05-20