Yarninator/toddler_shop_frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: Yarninator:basic_html
Branches Tags
Yarninator:main
Yarninator:flask
Yarninator:basic_html
Yarninator:htmx
..
compare: Yarninator:main
Branches Tags
Yarninator:flask
Yarninator:basic_html
Yarninator:htmx
Yarninator:main

No commits in common. "basic_html" and "main" have entirely different histories.
basic_html ... main

3 changed files with 0 additions and 160 deletions
Show stats Expand all files Collapse all files

96
index.html
View file

@ -1,96 +0,0 @@
<!DOCTYPE html>
<html data-theme="light">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Toddler Shop
</title>
<script src="/scripts/main.js"></script>
<link rel="stylesheet" href="style/main.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body onload="loadProducts()" style="background-color: #D9F2D0;">
<form action="" id="barcode_form">
<input id="barcode_input" type="text" autofocus>
<input type="submit" value="Submit">
</form>
<img class="product_image">
<div class="container text-center product_placeholder">
<div class="row row-cols-5">
<div class="col product_col">
<div class="card" style="width: 10rem; height: 15rem;">
<img src="" class="card-img-top product_image" alt="">
<div class="card-body">
<h5 class="card-title product_price"></h5>
</div>
</div>
</div>
<div class="col product_col">
<div class="card" style="width: 10rem; height: 15rem;">
<img src="" class="card-img-top product_image" alt="">
<div class="card-body">
<h5 class="card-title product_price"></h5>
</div>
</div>
</div>
<div class="col product_col">
<div class="card" style="width: 10rem; height: 15rem;">
<img src="" class="card-img-top product_image" alt="">
<div class="card-body">
<h5 class="card-title product_price"></h5>
</div>
</div>
</div>
<div class="col product_col">
<div class="card" style="width: 10rem; height: 15rem;">
<img src="" class="card-img-top product_image" alt="">
<div class="card-body">
<h5 class="card-title product_price"></h5>
</div>
</div>
</div>
<div class="col product_col">
<div class="card" style="width: 10rem; height: 15rem;">
<img src="" class="card-img-top product_image" alt="">
<div class="card-body">
<h5 class="card-title product_price"></h5>
</div>
</div>
</div>
</div>
<div class="row row-cols-5">
<div class="col">
<div class="card" style="width: 10rem; height: 7rem;">
<div class="container text-center product_placeholder">
<div class="row">
<div class="col">
<img src="http://127.0.0.1:8000/icons/cart" height="100rem" width="100rem" class="card-img-top" alt="">
</div>
<div class="col">
<h5 class="card-title" id="totalprice">&euro; 0</h5>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 10rem; height: 7rem;">
<img src="http://127.0.0.1:8000/icons/cash" height="100rem" width="100rem" class="card-img-top" alt="">
</div>
</div>
<div class="col">
<div class="card" style="width: 10rem; height: 7rem;">
<img src="http://127.0.0.1:8000/icons/creditcard" height="100rem" width="100rem" class="card-img-top" alt="">
</div>
</div>
</div>
</div>
</body>
</html>

61
scripts/main.js
View file

@ -1,61 +0,0 @@
var all_products
let barcodeForm
const api_url = "http://127.0.0.1:8000"
var to_fill_product_index = 0
var total_price = 0
async function makeAPIRequest(request) {
try {
const response = await fetch(request);
const result = await response.json();
return result
} catch (error) {
console.error("Error:", error);
}
}
async function loadProducts() {
const loadProductRequest = new Request(api_url + "/products")
all_products = await makeAPIRequest(loadProductRequest)
console.log("Loaded products:", all_products)
barcodeForm = document.getElementById("barcode_form");
barcodeForm.addEventListener("submit", (e) => {
e.preventDefault();
if (to_fill_product_index < 5) {
const barcode = document.getElementById('barcode_input').value
var chosen_product
for (index = 0; index < all_products.length; index++) {
if (all_products[index].barcode == barcode) {
chosen_product = all_products[index]
}
}
barcode_input.value = ""
const product_placeholders = document.getElementsByClassName('product_col')
const chosen_product_placeholder = product_placeholders[to_fill_product_index]
const image_product = chosen_product_placeholder.getElementsByClassName('product_image')[0]
const price_product = chosen_product_placeholder.getElementsByClassName('product_price')[0]
const total_price_holder = document.getElementById("totalprice")
total_price += chosen_product.price
image_product.setAttribute('src', api_url + "/icons/" + chosen_product.image_filename);
price_product.textContent = "\u20AC " + chosen_product.price
total_price_holder.textContent = "\u20AC " + total_price
to_fill_product_index += 1
}else{
barcode_input.value = ""
}
});
}

3
style/main.css
View file

@ -1,3 +0,0 @@
div.card{
background-color: #afda8e;
}