JSFiddle - React, Tailwind, and code Playground

by jasonwilczak

HTML

<h1>JW Vending Co.</h1>
<p id="displayZone"></p>
<div>
  <h2>Products</h2>
  <button onclick="app.chooseProduct('coke')">Coca Cola: .25</button>
  <button onclick="app.chooseProduct('pepsi')">Pepsi: .35</button>
  <button onclick="app.chooseProduct('orange')">Orange: .45</button>
</div>
<div>
  <h2>Payment</h2>
  <button onclick="app.insertCoin(.01)">1 cent</button>
  <button onclick="app.insertCoin(.05)">5 cents</button>
  <button onclick="app.insertCoin(.10)">10 cents</button>
  <button onclick="app.insertCoin(.25)">25 cents</button>
</div>
<div style="margin-top:10px;">
  <button onclick="app.processRefund()">Refund</button>
</div>

JavaScript

//Client.js
const displayMessageCallback = function(message) {
	document.getElementById("displayZone").innerHTML = message;
}
window.app = {
	chooseProduct: function(productValue) {
		selectProduct(productValue);
	},
	processRefund: function() {
		refund();
	},
	insertCoin: function(value) {
		acceptPayment(value);
  }
}

//BusinessLogics.js
let currentPaymentAmount = 0.00;
let displayMessage = '';
let selectedProductValue = null;

function selectProduct(productValue) {
	if(productValue && products[productValue]) {  
  	selectedProductValue = products[productValue];
    updateDisplayMessage();
  }
}
function acceptPayment(amount) {
	currentPaymentAmount += amount;
  processProductSale();
}
function refund() {
  updateDisplayMessage(`Refunding ${currentPaymentAmount}`);
	resetSale();
}
function processProductSale() {
	const product = selectedProductValue;
	if(currentPaymentAmount < product.cost) {
  	updateDisplayMessage();
  	return;
  }
  let displayMessage = `Dispensing ${product.display}`;
  const leftOverChange = currentPaymentAmount - product.cost;
  if(leftOverChange > 0) displayMessage += ` and extra ${leftOverChange}`;
  resetSale();
  updateDisplayMessage(displayMessage);
}
function updateDisplayMessage(messageOverride) {
	if(messageOverride) displayMessage = messageOverride;
	else if(selectedProductValue) {
  	const paymentDue = selectedProductValue.cost - currentPaymentAmount;
  	displayMessage = `${selectedProductValue.display} selected.  Please deposit remaining ${paymentDue}`;
  } else {
  	displayMessage = 'Please select a product.';
  }
  logger(displayMessage);
  if(displayMessageCallback) displayMessageCallback(displayMessage);
}
function resetSale() {
  currentPaymentAmount = 0.00;
  selectedProductValue = null;
}
function logger(message) {
	console.log(message);
}

const products = {
  "coke": {
    display: "Coca Cola",
    value: "coke",
    cost: .25
  },
  "pepsi": {
    display: "Pepsi",
    value: "pepsi",
    cost: .35
  },
  "orange":...