Upload Aufgabe 07.2

This commit is contained in:
Justin Dretvic 2020-06-14 17:45:49 +02:00
parent b425856bb2
commit 3830330d91
12 changed files with 382 additions and 58 deletions

BIN
.vs/GIS-SoSe-2020/v16/.suo Normal file

Binary file not shown.

View File

@ -0,0 +1,6 @@
{
"ExpandedNodes": [
""
],
"PreviewInSolutionExplorer": false
}

BIN
.vs/slnx.sqlite Normal file

Binary file not shown.

View File

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

View File

@ -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>

View File

@ -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

View File

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

View File

@ -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);

View File

@ -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>

View File

@ -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

View File

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

View File

@ -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);
}
}*/
}