Hi, I’m the first year student and because of my job it was hard for me to attend a seminar at JS, I’m facing some of the requirements 2 of which I can not do, can you help me please?
I’ve put here what I’ve done so far for JavaScript
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Produse</title>
</head>
<body>
<h2>Produse</h2>
<div class="header">
<div class="ib">
<label for="sortare">Sortare:</label>
<select name="sortare" id="sortare">
<option value="cmpNumeCrescator">Nume crescator</option>
<option value="cmpNumeDescrescator">Nume descrescator</option>
<option value="cmpPretCrescator" selected>Pret crescator</option>
<option value="cmpPretDescrescator">Pret descrescator</option>
</select>
</div>
</div>
<table id="product-template">
<thead>
<tr>
<th>Picture</th>
<th>Name</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<template id="item-basket-template">
<tr>
<td class="name"></td>
<td>
<input class="cantitate" type="number" name="cantitate" value="1" min="1">
<div class="remove" data-index="">Sterge</div>
</td>
<td class="price"></td>
<td class="total"></td>
</tr>
</template>
and Javascript
"use strict";
const data = {
items: [
{
name: "Supa",
price: 10.45,
image: "img/supa.jpg"
},
{
name: "Friptura",
price: 11.35,
image: "img/friptura.jpg"
},
{
name: "Somon",
price: 45.85,
image: "img/somon.jpg"
},
{
name: "Prajtura cu banane",
price: 12.85,
image: "img/banane.jpg"
},
{
name: "Briosa",
price: 9.55,
image: "img/briosa.jpg"
},
{
name: "Tort de fructe",
price: 32.55,
image: "img/tort.jpg"
}
]
};
// Add products to list function
function addProductsToList(data, sort) {
var products = data.items;
var productList = document.querySelector("#product-template tbody");
productList.innerHTML = '';
if(sort == 'cmpPretCrescator') {
// -- Sort by price
products.sort(function(a, b){
return a.price - b.price;
});
}
if(sort == 'cmpPretDescrescator') {
// -- Sort by price
products.sort(function(a, b){
return b.price - a.price;
});
}
if(sort == 'cmpNumeCrescator') {
// -- Sort by price
products.sort(function(a, b){
return a.name !== b.name ? a.name < b.name ? -1 : 1 : 0
});
}
if(sort == 'cmpNumeDescrescator') {
// -- Sort by price
products.sort(function(a, b){
return a.name !== b.name ? a.name > b.name ? -1 : 1 : 0
});
}
for(var item in products) {
var product = products[item];
var tr = document.createElement('tr');
var productIndex = (product.name).toLowerCase().replace(/\s+/g,'-');
tr.innerHTML = '<td><img class="image" src="'+product.image+'" alt="'+product.name+'" /></td>'+
'<td class="name">'+product.name+'</td>'+
'<td class="price">'+product.price+'</td>'+
'<td><button class="add" data-index="'+productIndex.trim()+'">Adauga in cos</button></td>';
productList.appendChild(tr);
}
}
// On load, add products to list
addProductsToList(data, 'cmpPretCrescator');
// Sort select function
var sorting = document.querySelector("#sortare");
sorting.addEventListener("change", function() {
addProductsToList(data, sorting.value);
});
and I have these requirements that I can not do
Adding products to your shopping cart is done on the event click on the add class item. If there is a product with the same name in the cart, it will increase its amount. If the product no longer exists in the shopping cart, the quantity will be 1. To add to the shopping cart, the content of the template item will be clustered with id item-basket-template. Values for cells with price and total classes will be set. Set or update the value for the input with the quantity class. The cloned element will be added to the page in the element with the item id. After adding, the date-index attribute is updated with the current index in the shopping cart
2.When clicking on the item with the remove class will delete the product from the shopping cart. You can use the data-index attribute to identify the element index.
can you help me please, I struggled until 4 in the morning and I do not get out