JSFiddle - React, Tailwind, and code Playground

HTML

<div class = "container">
     
     <div class ="itemGrid">
     
     <div id = "itemOne">
       🍌
       </div>
   
     </div> <!--Grid -->
     </div> <!-- container -->
    
 <div class="buttons">
     <button id ="total"> Total </button>
   <p id ="displayPrice"> total price </p>
     <button id ="empty"> Empty Cart </button>
   <h1 id ="display"></h1>
    </div> <!-- buttons -->

CSS

.container{min-width: 400px; max-width:640px; background-color:black; height:100%; margin: 0 auto;}

.itemGrid{display:flex; flex-wrap: wrap; margin:0 auto;}

#itemOne {width:100px; height: 100px; border:1px solid white; margin:2%; color:white; text-align:center; font-size:65px; cursor:pointer;}

.buttons{text-align:center;}

#display{text-align:center;}

JavaScript

var shoppingCart = [];
var totalPrice = [];


document.getElementById("itemOne").addEventListener("click", function() {
  shoppingCart.push(" Bananas");
  
  totalPrice.push(0.20);
  
  document.getElementById("display").innerHTML = shoppingCart;
});


document.getElementById("total").addEventListener("click", function() {
  
  var total = 0;
  
  for (var i  = 0; i < totalPrice.length; i++);

  total  += totalPrice[i];
  document.getElementById("displayPrice").innerHTML = total;
});

document.getElementById("empty").addEventListener("click", function() {
  shoppingCart = [];
  
  document.getElementById("display").innerHTML = shoppingCart;
});