projects_college
/
GIS-2020-SoSe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Upload Aufgabe 06.2

This commit is contained in:
Justin Dretvic 2020-06-07 14:14:20 +02:00
parent c1197fa69e
commit 46ba572a6d
5 changed files with 76 additions and 283 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
Aufgaben/Aufgabe_06_2020-06-03/script.js
View File

@ -2,6 +2,8 @@
// Datensammlung für Produkte
var Aufgabe06;
(function (Aufgabe06) {
let shoppingPrice = 0;
let shoppingCount = 0;
let categories = [
{
title: "Special Offers!",
@ -154,9 +156,9 @@ var Aufgabe06;
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>
<span class="price"> ${categories[nummer].products[index].price.toFixed(2).toLocaleString()} ¥</span>
<button class="addProduct" productPrice="${categories[nummer].products[index].price}">+</button>
<button class="removeProduct">-</button>
</div>
<img src="files/${categories[nummer].products[index].imgName}" alt="Product" />
<p class="size"> Size: ${categories[nummer].products[index].size}</p>
@ -168,24 +170,72 @@ var Aufgabe06;
}
}
}
function myFunction() {
function drawCategory(_catNumber) {
clearProducts();
let heading = document.createElement("h1");
heading.setAttribute("id", categories[_catNumber].id);
heading.innerHTML = `${categories[_catNumber].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[_catNumber].products.length; index++) {
let product = document.createElement("div");
product.classList.add("product");
product.innerHTML = `
<h3 class="title"> ${categories[_catNumber].products[index].title} </h3>
<div class=shopIn>
<span class="price"> ${categories[_catNumber].products[index].price} ¥</span>
<button class="addProduct" productPrice="${categories[_catNumber].products[index].price}">+</button>
<button class="removeProduct">-</button>
</div>
<img src="files/${categories[_catNumber].products[index].imgName}" alt="Product" />
<p class="size"> Size: ${categories[_catNumber].products[index].size}</p>
<div class="description">
<p> ${categories[_catNumber].products[index].description}</p>
</div>
`;
//product.querySelector("button")!.setAttribute("productPrice", "${categories[catNumber].products[index].price}");
container.appendChild(product);
}
}
function clearProducts() {
console.log("Ich wurde geklickt");
for (let nummer = 0; nummer < categories.length; nummer++) {
let heading = document.querySelector(`#${categories[nummer].id}`);
document.querySelector("#übersicht").removeChild(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 = "";
container.appendChild(product);
} */
let alles = document.querySelector("#übersicht");
alles.innerHTML = "";
}
}
document.querySelector("#special_a").addEventListener("click", myFunction);
document.querySelector("#special_a").addEventListener("click", drawSpecial);
document.querySelector("#bunt_a").addEventListener("click", drawBunt);
document.querySelector("#grün_a").addEventListener("click", drawGrün);
document.querySelector("#all_a").addEventListener("click", drawAll);
function drawSpecial() {
drawCategory(0);
}
function drawBunt() {
drawCategory(1);
}
function drawGrün() {
drawCategory(2);
}
function drawAll() {
clearProducts();
printProducts();
}
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();
}
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

2
Aufgaben/Aufgabe_06_2020-06-03/script.js.map
View File

File diff suppressed because one or more lines are too long

258
Aufgaben/Aufgabe_06_2020-06-03/script.ts
View File

@ -1,258 +0,0 @@
// Datensammlung für Produkte
namespace Aufgabe06 {
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);
}
}
}
function myFunction(): void {
console.log("Ich wurde geklickt");
for (let nummer: number = 0; nummer < categories.length; nummer++) {
let heading: HTMLHeadingElement = (<HTMLHeadingElement>document.querySelector(`#${categories[nummer].id}`));
(<HTMLDivElement>document.querySelector("#übersicht")).removeChild(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 = "";
container.appendChild(product);
} */
}
}
(<HTMLLIElement>document.querySelector("#special_a")).addEventListener("click", myFunction);
}
// 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>
*/

2
Aufgaben/Aufgabe_06_2020-06-03/shop.css
View File

@ -56,7 +56,7 @@ header #shopping_cart {
border-radius: 40px;
margin: 10px 5px 0px 5px;
padding: 10px 0px;
width: 60px;
width: 100px;
height: 30px;
}

9
Aufgaben/Aufgabe_06_2020-06-03/shop.html
View File

@ -25,13 +25,14 @@
<div class="dropdown">
<span>Categories</span>
<ul class="dropdown-content">
<li id="special_a"><a href="">~ Special Offers ~</a></li>
<li id="bunt_a"><a href="#bunt">~ Colored Grass ~</a></li>
<li id="grün_a"><a href="#grün">~ Green-Tones ~</a></li>
<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=""><i class="fas fa-shopping-cart" style='font-size:24px'></i></a>
<a href=""><span id=shoppingCartNumber> </span><i class="fas fa-shopping-cart" style='font-size:24px'> </i></a>
</div>
</div>
</header>