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

Switched to Bootstrap

Browse source
This commit is contained in:
Yarne Coppens 2024-08-05 17:03:10 +02:00
parent b51a555392
commit 3304a162ef
2 changed files with 31 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
index.html
View file

@ -7,7 +7,7 @@
Toddler Shop
</title>
<script src="/scripts/main.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.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()">
@ -17,59 +17,34 @@
</form>
<img class="product_image">
<div class="columns">
<div class="column is-one-fifth product_placeholder">
<span class="icon-text">
<i><svg width="90" height="90">
<image class="product_image" xlink:href="" width="50" height="50"/>
</svg></i>
</span>
<span class="product_price"></span>
<div class="container text-center product_placeholder">
<div class="row">
<div class="col product_col">
<div class="card" style="width: 18rem;">
<img src="http://127.0.0.1:8000/icons/pizza" class="card-img-top product_image">
<div class="card-body">
<h5 class="card-title product_price">Card title</h5>
</div>
</div>
</div>
<div class="col product_col">
<div class="card" style="width: 18rem;">
<img src="http://127.0.0.1:8000/icons/banana" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
</div>
</div>
</div>
<div class="col product_col">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
</div>
</div>
</div>
</div>
<div class="column is-one-fifth product_placeholder">
<span class="icon-text">
<i><svg width="90" height="90">
<image class="product_image" xlink:href="" width="50" height="50"/>
</svg></i>
</span>
<span class="product_price"></span>
</div>
<div class="column is-one-fifth product_placeholder">
<span class="icon-text">
<i><svg width="90" height="90">
<image class="product_image" xlink:href="" width="50" height="50"/>
</svg></i>
</span>
<span class="product_price"></span>
</div>
<div class="column is-one-fifth product_placeholder">
<span class="icon-text">
<i><svg width="90" height="90">
<image class="product_image" xlink:href="" width="50" height="50"/>
</svg></i>
</span>
<span class="product_price"></span>
</div>
<div class="column is-one-fifth product_placeholder">
<span class="icon-text">
<i><svg width="90" height="90">
<image class="product_image" xlink:href="" width="50" height="50"/>
</svg></i>
</span>
<span class="product_price"></span>
</div>
</div>
<p id="totalprice">&euro; 0</p>

6
scripts/main.js
View file

@ -38,7 +38,7 @@ async function loadProducts() {
barcode_input.value = ""
const product_placeholders = document.getElementsByClassName('product_placeholder')
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]
@ -46,7 +46,9 @@ async function loadProducts() {
total_price += chosen_product.price
image_product.setAttribute('href', api_url + "/icons/" + chosen_product.image_filename);
console.log(image_product)
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