JSFiddle - React, Tailwind, and code Playground

by johnkpaul

HTML

Coin Input: $.74
<div>
  Expected:
  <ul>
    <li>Quarters: 2</li>
    <li>Dimes: 2</li>
    <li>Nickles: 0</li>
    <li>Pennies: 4</li>
  </ul>
</div>
<div>
  Actual:
  <ul>
    <li>Quarters: <span id="quarter"></span></li>
    <li>Dimes: <span id="dime"></span></li>
    <li>Nickles: <span id="nickle"></span></li>
    <li>Pennies: <span id="penny"></span></li>
  </ul>
</div>

CSS

ul {
  list-style: none;
}

ul li {
  list-style: none;
}

JavaScript

/*
I am a machine at a grocery store. My task is to give you the coin change for your transation. Ideally, I give the least number of coins possible; nobody likes having 99 pennies. So, if your change is 67 cents, I would give you back 2 quarters, 1 dime, 1 nickle, 2 pennies. 

So, please, use the code below and fill out the function body so that it returns me an object of 
{
	quarter: 2,
  dime: 1,
  nickle: 1,
  penny: 2
}

Empty keys should be zero - not undefined.
*/

/* SETUP */
const COINS = [{
  name: 'quarter',
  value: 25
}, {
  name: 'dime',
  value: 10
}, {
  name: 'nickle',
  value: 5
}, {
  name: 'penny',
  value: 1
}];

// Bonus, implement an inventory system for the coins so that you can fallback to a smaller denomination if the higher one is not available.

function getCoins(changeAmt) {
  	var coins = {
      quarter: 0,
      dime: 0,
      nickle: 0,
      penny: 0
    };
    
    while(changeAmt){
      if(changeAmt - 25 >= 0){
        changeAmt = changeAmt - 25;
        coins.quarter = coins.quarter + 1;
        continue;
      }
      if(changeAmt - 10 >= 0){
        changeAmt = changeAmt - 10;
        coins.dime = coins.dime + 1;
        continue;
      }
      if(changeAmt - 5 >= 0){
        changeAmt = changeAmt - 5;
        coins.nickle = coins.nickle + 1;
        continue;
      }
      if(changeAmt - 1 >= 0){
        changeAmt = changeAmt - 1;
        coins.penny = coins.penny + 1;
        continue;
      }
    }
    
    return coins;
}


// Results Testing: do not modify :)
var results = getCoins(74);
if (results) {
  COINS.forEach(function(coin) {
    document.getElementById(coin.name).innerHTML = results[coin.name];
  });
}

test();

function test() {
  var tests = [{
    change: 74,
    result: {
      quarter: 2,
      dime: 2,
      nickle: 0,
      penny: 4
    }
  },{
    change: 75,
    result: {
      quarter: 3,
      dime: 0,
      nickle: 0,
      penny: 0
    }
  },{
    change: 84,
    result: {
      quarter: 3,
     ...