JSFiddle - React, Tailwind, and code Playground

by Lan Jiang

HTML

<div>
    <ul>
        <li>
            <a href="#" class="produit"></a>
        </li>
        <li>
            <a href="#" class="produit"></a>
        </li>
        <li>
            <a href="#" class="produit"></a>
        </li>
        <li>
            <a href="#" class="produit"></a>
        </li>
    </ul>
</div>

<!-- list of prix -->
<h3 class="total"></h3>
<button>apple</button>
<div class="list"></div>

CSS

*{
    list-style: none;
    text-decoration: none;
}

JavaScript

function Produit(nom, prix){
    this.nom = nom;
    this.prix = prix;
};

var apple = new Produit("apple", 0.30);
var banana = new Produit("banana", 0.03);
var pear = new Produit("pear", 0.35);
var kiwi = new Produit("kiwi", 0.40);

var produit = [apple,banana,pear,kiwi];


//show all the fruit, add the price to 'name'
for (var i = 0; i < produit.length; i++) {
    $('.produit').eq(i).html(produit[i].nom + " (" + produit[i].prix.toFixed(2) + ")" +  '<br/>').attr('name', produit[i].prix.toFixed(2)).attr('id', produit[i].nom).attr('title', '+1');
};


//new empty object, 3 tables as property
var a = {};
    a.nameArray = [];
    a.valueArray = [];
    a.prixArray = [];//the new array for prix
var myString = "";

//clik on the fruit
$('.produit').click(function(){

	//store the fruit's name by attr of id
    var itemClicked = $(this).attr('id');
    //store the fruit's prix by attr of name
    var itemClickedPrix = $(this).attr('name');
    
    //just to be clear for these long characters, but they are not useful
    var name = a.nameArray[a.nameArray.indexOf(itemClicked)];
    var quantity = a.valueArray[a.nameArray.indexOf(itemClicked)];
    var prix = a.prixArray[a.nameArray.indexOf(itemClicked)];
	
    //fill the object 'a' when click on the fruit
    if (a.nameArray.indexOf(itemClicked) == -1){
        a.nameArray.push(itemClicked);
        a.valueArray.push(1);
        a.prixArray.push(itemClickedPrix);
    }else{
    	//try to replace by 'quantity' but not working
    	a.valueArray[a.nameArray.indexOf(itemClicked)] += 1;
    };
      
	//to show the list
    myString = "";
    var lastTransaction = 0;
    var total = 0;
    for(var i=0; i<a.nameArray.length;i++){
    
    	lastTransaction = a.prixArray[i] * a.valueArray[i];
        total += lastTransaction; 
        //show the total prix
        $('.total').html('Total: ' + total.toFixed(2) + ' $');
        //show the list
        myString += a.nameArray[i] + " x " + a.valueArray[i] + "<br/>";
    };

   ...