Upload Aufgabe 07.2
This commit is contained in:
parent
b425856bb2
commit
3830330d91
Binary file not shown.
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"ExpandedNodes": [
|
||||
""
|
||||
],
|
||||
"PreviewInSolutionExplorer": false
|
||||
}
|
Binary file not shown.
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"script.js","sourceRoot":"","sources":["script.ts"],"names":[],"mappings":"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"}
|
|
@ -3,12 +3,12 @@
|
|||
|
||||
<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 SameSite="Secure" 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>
|
||||
<script src="shop.js" defer></script>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>green grass</title>
|
||||
|
@ -32,7 +32,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
<div id="shopping_cart">
|
||||
<a href=""><span id=shoppingCartNumber> </span><i class="fas fa-shopping-cart" style='font-size:24px'> </i></a>
|
||||
<a href="shoppingCart.html"><span id=shoppingCartNumber> </span><i class="fas fa-shopping-cart" style='font-size:24px'> </i></a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
@ -1,68 +1,76 @@
|
|||
"use strict";
|
||||
// Datensammlung für Produkte
|
||||
var Aufgabe06;
|
||||
(function (Aufgabe06) {
|
||||
var Aufgabe07;
|
||||
(function (Aufgabe07) {
|
||||
let shoppingPrice = 0;
|
||||
let shoppingCount = 0;
|
||||
let shoppingCount = localStorage.length;
|
||||
if (localStorage.length > 0)
|
||||
shoppingCount--;
|
||||
document.querySelector("#shoppingCartNumber").innerHTML = shoppingCount.toLocaleString();
|
||||
let jsonObj;
|
||||
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();
|
||||
jsonObj = await response.json();
|
||||
console.log("Response", response);
|
||||
printProducts(100, jsonObj);
|
||||
printProducts(100);
|
||||
/*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);
|
||||
printProducts(0);
|
||||
}
|
||||
document.querySelector("#bunt_a").addEventListener("click", drawBunt);
|
||||
function drawBunt() {
|
||||
printProducts(1, jsonObj);
|
||||
printProducts(1);
|
||||
}
|
||||
document.querySelector("#grün_a").addEventListener("click", drawGrün);
|
||||
function drawGrün() {
|
||||
printProducts(2, jsonObj);
|
||||
printProducts(2);
|
||||
}
|
||||
document.querySelector("#all_a").addEventListener("click", drawAll);
|
||||
function drawAll() {
|
||||
printProducts(100, jsonObj);
|
||||
printProducts(100);
|
||||
}
|
||||
}
|
||||
Aufgabe06.communicate = communicate;
|
||||
Aufgabe07.communicate = communicate;
|
||||
updateShoppingCount();
|
||||
function updateShoppingCount() {
|
||||
shoppingCount = localStorage.length - 1;
|
||||
}
|
||||
//printProducts(100);
|
||||
//console.log(jsonObj[1].products[3].title);
|
||||
//create Structure;
|
||||
function printProducts(_catNumber, _jsonObj) {
|
||||
clearProducts(_jsonObj);
|
||||
function printProducts(_catNumber) {
|
||||
clearProducts();
|
||||
let catCheck = false;
|
||||
if (_catNumber != 100)
|
||||
catCheck = true;
|
||||
else
|
||||
_catNumber = 0;
|
||||
for (let nummer = _catNumber; nummer < _jsonObj.length; nummer++) {
|
||||
for (let nummer = _catNumber; nummer < jsonObj.length; nummer++) {
|
||||
let heading = document.createElement("h1");
|
||||
heading.setAttribute("id", _jsonObj[nummer].id);
|
||||
heading.innerHTML = `${_jsonObj[nummer].title}`;
|
||||
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++) {
|
||||
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>
|
||||
<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>
|
||||
<span class="price"> ${jsonObj[nummer].products[index].price.toFixed(2).toLocaleString()} ¥</span>
|
||||
<button class="addProduct" CategoryNumber="${nummer}" productIndex="${index}">+</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>
|
||||
<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>
|
||||
<p> ${jsonObj[nummer].products[index].description}</p>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(product);
|
||||
|
@ -72,29 +80,41 @@ var Aufgabe06;
|
|||
}
|
||||
addShoppingFunction();
|
||||
}
|
||||
function clearProducts(_jsonObj) {
|
||||
console.log("Ich wurde geklickt");
|
||||
for (let nummer = 0; nummer < _jsonObj.length; nummer++) {
|
||||
function clearProducts() {
|
||||
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"));
|
||||
//let price: number = parseFloat(target.getAttribute("productPrice")!);
|
||||
let price = jsonObj[parseInt(target.getAttribute("categoryNumber"))].products[parseInt(target.getAttribute("productIndex"))].price;
|
||||
console.log("Artikel-Preis: " + price + " ¥");
|
||||
shoppingPrice += price;
|
||||
console.log("Shopping-Cart-Preis: " + shoppingPrice + " ¥");
|
||||
shoppingCount++;
|
||||
document.querySelector("#shoppingCartNumber").innerHTML = shoppingCount.toLocaleString();
|
||||
}
|
||||
function addLocal(_event) {
|
||||
if (localStorage.shoppingCount) {
|
||||
localStorage.shoppingCount = Number(localStorage.shoppingCount) + 1;
|
||||
}
|
||||
else {
|
||||
localStorage.shoppingCount = 1;
|
||||
}
|
||||
let target = _event.target;
|
||||
let shoppingProduct = jsonObj[parseInt(target.getAttribute("categoryNumber"))].products[parseInt(target.getAttribute("productIndex"))];
|
||||
localStorage.setItem(`${shoppingProduct.title}`, JSON.stringify(shoppingProduct));
|
||||
}
|
||||
function addShoppingFunction() {
|
||||
const buttons = document.getElementsByClassName("addProduct");
|
||||
for (const button of buttons) {
|
||||
button.addEventListener("click", money);
|
||||
button.addEventListener("click", addLocal);
|
||||
}
|
||||
}
|
||||
})(Aufgabe06 || (Aufgabe06 = {}));
|
||||
})(Aufgabe07 || (Aufgabe07 = {}));
|
||||
// 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
|
||||
/*
|
||||
|
@ -137,4 +157,4 @@ let myJSON: string = JSON.stringify(categories);
|
|||
JSON.stringify(categories);
|
||||
console.log(myJSON);
|
||||
*/
|
||||
//# sourceMappingURL=script.js.map
|
||||
//# sourceMappingURL=shop.js.map
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"shop.js","sourceRoot":"","sources":["shop.ts"],"names":[],"mappings":"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"}
|
|
@ -1,9 +1,15 @@
|
|||
// Datensammlung für Produkte
|
||||
|
||||
namespace Aufgabe06 {
|
||||
namespace Aufgabe07 {
|
||||
|
||||
let shoppingPrice: number = 0;
|
||||
let shoppingCount: number = 0;
|
||||
let shoppingCount: number = localStorage.length;
|
||||
if ( localStorage.length > 0)
|
||||
shoppingCount --;
|
||||
|
||||
(<HTMLLIElement>document.querySelector("#shoppingCartNumber")).innerHTML = shoppingCount.toLocaleString();
|
||||
|
||||
let jsonObj: Category[];
|
||||
|
||||
export interface Product {
|
||||
title: string;
|
||||
|
@ -23,9 +29,9 @@ namespace Aufgabe06 {
|
|||
|
||||
export async function communicate(_url: RequestInfo): Promise<void> {
|
||||
let response: Response = await fetch(_url);
|
||||
let jsonObj: Category[] = await response.json();
|
||||
jsonObj = await response.json();
|
||||
console.log("Response", response);
|
||||
printProducts(100, jsonObj);
|
||||
printProducts(100);
|
||||
|
||||
/*console.log(jsonObj);
|
||||
console.log(jsonObj[0].products[2].price);
|
||||
|
@ -33,62 +39,68 @@ namespace Aufgabe06 {
|
|||
|
||||
(<HTMLLIElement>document.querySelector("#special_a")).addEventListener("click", drawSpecial);
|
||||
function drawSpecial(): void {
|
||||
printProducts(0, jsonObj);
|
||||
printProducts(0);
|
||||
}
|
||||
(<HTMLLIElement>document.querySelector("#bunt_a")).addEventListener("click", drawBunt);
|
||||
function drawBunt(): void {
|
||||
printProducts(1, jsonObj);
|
||||
printProducts(1);
|
||||
}
|
||||
(<HTMLLIElement>document.querySelector("#grün_a")).addEventListener("click", drawGrün);
|
||||
function drawGrün(): void {
|
||||
printProducts(2, jsonObj);
|
||||
printProducts(2);
|
||||
}
|
||||
(<HTMLLIElement>document.querySelector("#all_a")).addEventListener("click", drawAll);
|
||||
function drawAll(): void {
|
||||
printProducts(100, jsonObj);
|
||||
printProducts(100);
|
||||
}
|
||||
}
|
||||
|
||||
updateShoppingCount();
|
||||
|
||||
function updateShoppingCount(): void {
|
||||
shoppingCount = localStorage.length - 1;
|
||||
}
|
||||
|
||||
//printProducts(100);
|
||||
//console.log(jsonObj[1].products[3].title);
|
||||
|
||||
//create Structure;
|
||||
|
||||
function printProducts(_catNumber: number, _jsonObj: Category[]): void {
|
||||
function printProducts(_catNumber: number): void {
|
||||
|
||||
clearProducts(_jsonObj);
|
||||
clearProducts();
|
||||
|
||||
let catCheck: boolean = false;
|
||||
if (_catNumber != 100)
|
||||
catCheck = true;
|
||||
else
|
||||
else
|
||||
_catNumber = 0;
|
||||
|
||||
for (let nummer: number = _catNumber; nummer < _jsonObj.length; nummer++) {
|
||||
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}`;
|
||||
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++) {
|
||||
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>
|
||||
<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>
|
||||
<span class="price"> ${jsonObj[nummer].products[index].price.toFixed(2).toLocaleString()} ¥</span>
|
||||
<button class="addProduct" CategoryNumber="${nummer}" productIndex="${index}">+</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>
|
||||
<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>
|
||||
<p> ${jsonObj[nummer].products[index].description}</p>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(product);
|
||||
|
@ -99,9 +111,8 @@ namespace Aufgabe06 {
|
|||
addShoppingFunction();
|
||||
}
|
||||
|
||||
function clearProducts(_jsonObj: Category[]): void {
|
||||
console.log("Ich wurde geklickt");
|
||||
for (let nummer: number = 0; nummer < _jsonObj.length; nummer++) {
|
||||
function clearProducts(): void {
|
||||
for (let nummer: number = 0; nummer < jsonObj.length; nummer++) {
|
||||
let alles: HTMLDivElement = (<HTMLDivElement>document.querySelector("#übersicht"));
|
||||
alles.innerHTML = "";
|
||||
}
|
||||
|
@ -109,7 +120,8 @@ namespace Aufgabe06 {
|
|||
|
||||
function money(_event: Event): void {
|
||||
let target: HTMLElement = (<HTMLElement>_event.target);
|
||||
let price: number = parseFloat(target.getAttribute("productPrice")!);
|
||||
//let price: number = parseFloat(target.getAttribute("productPrice")!);
|
||||
let price: number = jsonObj[parseInt(target.getAttribute("categoryNumber")!)].products[parseInt(target.getAttribute("productIndex")!)].price;
|
||||
console.log("Artikel-Preis: " + price + " ¥");
|
||||
shoppingPrice += price;
|
||||
console.log("Shopping-Cart-Preis: " + shoppingPrice + " ¥");
|
||||
|
@ -117,10 +129,22 @@ namespace Aufgabe06 {
|
|||
(<HTMLLIElement>document.querySelector("#shoppingCartNumber")).innerHTML = shoppingCount.toLocaleString();
|
||||
}
|
||||
|
||||
function addLocal(_event: Event): void {
|
||||
if (localStorage.shoppingCount) {
|
||||
localStorage.shoppingCount = Number(localStorage.shoppingCount) + 1;
|
||||
} else {
|
||||
localStorage.shoppingCount = 1;
|
||||
}
|
||||
let target: HTMLElement = (<HTMLElement>_event.target);
|
||||
let shoppingProduct: Product = jsonObj[parseInt(target.getAttribute("categoryNumber")!)].products[parseInt(target.getAttribute("productIndex")!)];
|
||||
localStorage.setItem(`${shoppingProduct.title}`, JSON.stringify(shoppingProduct) );
|
||||
}
|
||||
|
||||
function addShoppingFunction(): void {
|
||||
const buttons: HTMLCollectionOf<Element> = document.getElementsByClassName("addProduct");
|
||||
for (const button of buttons) {
|
||||
button.addEventListener("click", money);
|
||||
button.addEventListener("click", addLocal);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -166,7 +190,7 @@ console.log(theName);
|
|||
</div>
|
||||
*/
|
||||
|
||||
/*
|
||||
/*
|
||||
let myJSON: string = JSON.stringify(categories);
|
||||
JSON.stringify(categories);
|
||||
console.log(myJSON);
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
|
||||
<link SameSite="Secure" 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="shoppingCart.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><a href="shop.html" style="text-decoration: none;color:#b8d5cd">GREEN GRASS</a></span>
|
||||
<img src="files/grass_icon_right.png" alt="grass" />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="übersicht">
|
||||
|
||||
</div>
|
||||
<button style="text-align: center" id="removeAllItems">Remove All</button>
|
||||
<div>
|
||||
<span style="margin-left: 10px;"> Current Price: </span>
|
||||
<span style="margin-left: 10px;" id="showPrice">Hello</span>
|
||||
</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>
|
|
@ -0,0 +1,99 @@
|
|||
"use strict";
|
||||
var Aufgabe07;
|
||||
(function (Aufgabe07) {
|
||||
let shoppingPrice = 0;
|
||||
if (localStorage.length > 0)
|
||||
printProducts();
|
||||
//showPrice();
|
||||
//printProducts(100);
|
||||
//console.log(jsonObj[1].products[3].title);
|
||||
//create Structure;
|
||||
function printProducts() {
|
||||
//clearProducts();
|
||||
shoppingPrice = 0;
|
||||
let container = document.createElement("div");
|
||||
container.classList.add("container");
|
||||
document.querySelector("#übersicht").appendChild(container);
|
||||
for (let iterator = 0; iterator < localStorage.length; iterator++) {
|
||||
if (localStorage.key(iterator) == "shoppingCount")
|
||||
continue;
|
||||
let zeug = JSON.parse(localStorage.getItem(localStorage.key(iterator)));
|
||||
let product = document.createElement("div");
|
||||
product.classList.add("product");
|
||||
product.innerHTML = `
|
||||
<h3 class="title"> ${zeug.title} </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> ${zeug.price} ¥</span>
|
||||
<button class="removeProduct" itemIndex="${iterator}">-</button>
|
||||
</div>
|
||||
<img src="files/${zeug.imgName}" alt="Product" />
|
||||
<p class="size"> Size: ${zeug.size}</p>
|
||||
<div class="description">
|
||||
<p> ${zeug.description}</p>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(product);
|
||||
/*let shoppingPrice: HTMLSpanElement = (<HTMLDivElement>document.querySelector("#showPrice"));
|
||||
myPrice += zeug.price;
|
||||
shoppingPrice.innerHTML = myPrice.toLocaleString() + " ¥";
|
||||
//alles.innerHTML = "";*/
|
||||
fixPrice(zeug.price);
|
||||
}
|
||||
document.querySelector("#removeAllItems").addEventListener("click", clearLocalStorage);
|
||||
addRemoveFunction();
|
||||
} // zeug.price.toFixed(2).toLocaleString()
|
||||
//addShoppingFunction();
|
||||
function clearLocalStorage() {
|
||||
localStorage.clear();
|
||||
document.querySelector("#übersicht").innerHTML = "";
|
||||
}
|
||||
function removeItem(_event) {
|
||||
let target = _event.target;
|
||||
//let price: number = parseFloat(target.getAttribute("productPrice")!);
|
||||
//let price: number = jsonObj[parseInt(target.getAttribute("categoryNumber")!)].products[parseInt(target.getAttribute("productIndex")!)].price;
|
||||
localStorage.removeItem(`${localStorage.key(parseInt(target.getAttribute("itemIndex")))}`);
|
||||
document.querySelector("#übersicht").innerHTML = "";
|
||||
printProducts();
|
||||
}
|
||||
function addRemoveFunction() {
|
||||
const buttons = document.getElementsByClassName("removeProduct");
|
||||
for (const button of buttons) {
|
||||
button.addEventListener("click", removeItem);
|
||||
}
|
||||
}
|
||||
function fixPrice(_price) {
|
||||
shoppingPrice += _price;
|
||||
let shoppingPriceEle = document.querySelector("#showPrice");
|
||||
shoppingPriceEle.innerHTML = shoppingPrice.toLocaleString() + " ¥";
|
||||
}
|
||||
/*function money(_event: Event): void {
|
||||
let target: HTMLElement = (<HTMLElement>_event.target);
|
||||
//let price: number = parseFloat(target.getAttribute("productPrice")!);
|
||||
let price: number = jsonObj[parseInt(target.getAttribute("categoryNumber")!)].products[parseInt(target.getAttribute("productIndex")!)].price;
|
||||
console.log("Artikel-Preis: " + price + " ¥");
|
||||
shoppingPrice += price;
|
||||
console.log("Shopping-Cart-Preis: " + shoppingPrice + " ¥");
|
||||
shoppingCount++;
|
||||
(<HTMLLIElement>document.querySelector("#shoppingCartNumber")).innerHTML = shoppingCount.toLocaleString();
|
||||
}
|
||||
|
||||
function removeLocal(_event: Event): void {
|
||||
if (localStorage.shoppingCount) {
|
||||
localStorage.shoppingCount = Number(localStorage.shoppingCount) + 1;
|
||||
} else {
|
||||
localStorage.shoppingCount = 1;
|
||||
}
|
||||
let target: HTMLElement = (<HTMLElement>_event.target);
|
||||
let shoppingProduct: Product = jsonObj[parseInt(target.getAttribute("categoryNumber")!)].products[parseInt(target.getAttribute("productIndex")!)];
|
||||
localStorage.setItem(`${shoppingProduct.title}`, JSON.stringify(shoppingProduct));
|
||||
}
|
||||
|
||||
function addShoppingFunction(): void {
|
||||
const buttons: HTMLCollectionOf<Element> = document.getElementsByClassName("addProduct");
|
||||
for (const button of buttons) {
|
||||
button.addEventListener("click", money);
|
||||
button.addEventListener("click", removeLocal);
|
||||
}
|
||||
}*/
|
||||
})(Aufgabe07 || (Aufgabe07 = {}));
|
||||
//# sourceMappingURL=shoppingCart.js.map
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"shoppingCart.js","sourceRoot":"","sources":["shoppingCart.ts"],"names":[],"mappings":"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"}
|
|
@ -0,0 +1,130 @@
|
|||
|
||||
namespace Aufgabe07 {
|
||||
|
||||
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[];
|
||||
}
|
||||
|
||||
if (localStorage.length > 0)
|
||||
printProducts();
|
||||
//showPrice();
|
||||
|
||||
//printProducts(100);
|
||||
//console.log(jsonObj[1].products[3].title);
|
||||
|
||||
//create Structure;
|
||||
|
||||
function printProducts(): void {
|
||||
|
||||
//clearProducts();
|
||||
shoppingPrice = 0;
|
||||
|
||||
let container: HTMLDivElement = document.createElement("div");
|
||||
container.classList.add("container");
|
||||
(<HTMLDivElement>document.querySelector("#übersicht")).appendChild(container);
|
||||
|
||||
for (let iterator: number = 0; iterator < localStorage.length; iterator++) {
|
||||
if (localStorage.key(iterator)! == "shoppingCount")
|
||||
continue;
|
||||
let zeug: Product = JSON.parse(localStorage.getItem(localStorage.key(iterator)!)!);
|
||||
let product: HTMLDivElement = document.createElement("div");
|
||||
product.classList.add("product");
|
||||
product.innerHTML = `
|
||||
<h3 class="title"> ${zeug.title} </h3>
|
||||
<div class=shopIn>
|
||||
<span class="price"> ${zeug.price} ¥</span>
|
||||
<button class="removeProduct" itemIndex="${iterator}">-</button>
|
||||
</div>
|
||||
<img src="files/${zeug.imgName}" alt="Product" />
|
||||
<p class="size"> Size: ${zeug.size}</p>
|
||||
<div class="description">
|
||||
<p> ${zeug.description}</p>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(product);
|
||||
|
||||
/*let shoppingPrice: HTMLSpanElement = (<HTMLDivElement>document.querySelector("#showPrice"));
|
||||
myPrice += zeug.price;
|
||||
shoppingPrice.innerHTML = myPrice.toLocaleString() + " ¥";
|
||||
//alles.innerHTML = "";*/
|
||||
fixPrice(zeug.price);
|
||||
}
|
||||
(<HTMLButtonElement>document.querySelector("#removeAllItems")).addEventListener("click", clearLocalStorage);
|
||||
addRemoveFunction();
|
||||
} // zeug.price.toFixed(2).toLocaleString()
|
||||
//addShoppingFunction();
|
||||
|
||||
function clearLocalStorage(): void {
|
||||
localStorage.clear();
|
||||
(<HTMLDivElement>document.querySelector("#übersicht")).innerHTML = "";
|
||||
}
|
||||
|
||||
function removeItem(_event: Event): void {
|
||||
let target: HTMLElement = (<HTMLElement>_event.target);
|
||||
//let price: number = parseFloat(target.getAttribute("productPrice")!);
|
||||
//let price: number = jsonObj[parseInt(target.getAttribute("categoryNumber")!)].products[parseInt(target.getAttribute("productIndex")!)].price;
|
||||
localStorage.removeItem(`${localStorage.key(parseInt(target.getAttribute("itemIndex")!)!)}`);
|
||||
(<HTMLDivElement>document.querySelector("#übersicht")).innerHTML = "";
|
||||
printProducts();
|
||||
}
|
||||
|
||||
function addRemoveFunction(): void {
|
||||
const buttons: HTMLCollectionOf<Element> = document.getElementsByClassName("removeProduct");
|
||||
for (const button of buttons) {
|
||||
button.addEventListener("click", removeItem);
|
||||
}
|
||||
}
|
||||
|
||||
function fixPrice(_price: number): void {
|
||||
shoppingPrice += _price;
|
||||
let shoppingPriceEle: HTMLSpanElement = (<HTMLDivElement>document.querySelector("#showPrice"));
|
||||
shoppingPriceEle.innerHTML = shoppingPrice.toLocaleString() + " ¥";
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*function money(_event: Event): void {
|
||||
let target: HTMLElement = (<HTMLElement>_event.target);
|
||||
//let price: number = parseFloat(target.getAttribute("productPrice")!);
|
||||
let price: number = jsonObj[parseInt(target.getAttribute("categoryNumber")!)].products[parseInt(target.getAttribute("productIndex")!)].price;
|
||||
console.log("Artikel-Preis: " + price + " ¥");
|
||||
shoppingPrice += price;
|
||||
console.log("Shopping-Cart-Preis: " + shoppingPrice + " ¥");
|
||||
shoppingCount++;
|
||||
(<HTMLLIElement>document.querySelector("#shoppingCartNumber")).innerHTML = shoppingCount.toLocaleString();
|
||||
}
|
||||
|
||||
function removeLocal(_event: Event): void {
|
||||
if (localStorage.shoppingCount) {
|
||||
localStorage.shoppingCount = Number(localStorage.shoppingCount) + 1;
|
||||
} else {
|
||||
localStorage.shoppingCount = 1;
|
||||
}
|
||||
let target: HTMLElement = (<HTMLElement>_event.target);
|
||||
let shoppingProduct: Product = jsonObj[parseInt(target.getAttribute("categoryNumber")!)].products[parseInt(target.getAttribute("productIndex")!)];
|
||||
localStorage.setItem(`${shoppingProduct.title}`, JSON.stringify(shoppingProduct));
|
||||
}
|
||||
|
||||
function addShoppingFunction(): void {
|
||||
const buttons: HTMLCollectionOf<Element> = document.getElementsByClassName("addProduct");
|
||||
for (const button of buttons) {
|
||||
button.addEventListener("click", money);
|
||||
button.addEventListener("click", removeLocal);
|
||||
}
|
||||
}*/
|
||||
}
|
Loading…
Reference in New Issue