JSFiddle - React, Tailwind, and code Playground
HTML
<table id="output"></table>
<table id="basketitems"></table>
<span type="text" id="total"></span>
JavaScript
var shop = (function() {
var items = [];
var basketItems = [];
var count = 0;
return {
//Constructor to create the item
addItem: function(title, description, price) {
this.title = title;
this.description = description;
this.price = price;
this.id = count;
this.remove = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
this.quantity = title
this.html = '<tr><td>' + this.title + '</td><td>' + this.description + '</td><td>' + this.price + '</td><td><button id="' + this.id + '">Add To Basket</button></td><tr>';
this.inBasket = '<td>' + this.title + '</td><td>' + this.price + '</td><td><div id="' + this.quantity + '">1</div>' + '</td><td><button id="' + this.remove + '"> Remove </button>';
items.push(this);
count++;
},
//Sends new items to constructor
createItems: function() {
new this.addItem('Carrott', 'Lovely orange vegetable!', parseFloat(0.50).toFixed(2));
new this.addItem('Potato', 'Fresh baking potato.', parseFloat(0.75).toFixed(2));
new this.addItem('Brocolli', 'Green trees!', parseFloat(0.49).toFixed(2));
new this.addItem('Parsnip', 'Sweet tasting.', parseFloat(0.60).toFixed(2));
new this.addItem('Swede', 'Tasty fresh Swede.', parseFloat(1.00).toFixed(2));
console.log(this.items);
this.printHtml()
},
//Add's the html to the table from the item object
printHtml: function() {
var table = document.getElementById("output")
items.forEach(function(item) {
table.innerHTML += item.html;
})
this.listenerAdd()
},
//Creates a listener for adding to the basket
listenerAdd: function() {
items.forEach(function(item) {
...