/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Wally's widgets</title>

  <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style id="jsbin-css">
body, html {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

#container {
  padding: 10px 30px;
  margin: 20px auto;
  width: 100%;
  max-width: 300px;
  min-height: 300px;
  background: white;
  box-shadow: 0 0 2px rgba(0,0,0,0.12),0 2px 2px rgba(0,0,0,0.26);
}

h1 {
  font-size: 24px;
  font-weight: 300;
}

button {
  padding: 8px 24px;
  margin: 20px 0;
  display: block;
  background-color: #2c3e50;
  color: white;
  border: none;
  font-weight: bold;
  cursor: pointer;
}

button:hover {
  opacity: 0.92;
}

input {
  padding: 6px;
}
</style>
</head>
<body>

  <div id="container">
    <h1>Wally's Widgets</h1>
    Order <input id='order-no' type="number" value=0 min=0>
    <button id='order'>Place order</button>

    Your order:
    <div id="order-result"></div>
  </div>

<script id="jsbin-javascript">
/**
 * Fit number in closest range
 * @param  {number} num - target number to find
 * @param  {number[]} ranges - range to find in
 * @returns {number} matched range
 */
'use strict';

var fitInRange = function fitInRange(num, ranges) {
  // eliminate the obvious case when under the smallest range
  if (num <= ranges[0]) {
    return ranges[0];
  }

  // start with the largest range we can fit
  for (var i = ranges.length - 1; i > 0; i--) {
    var range = ranges[i];

    if (num + ranges[0] > range) {
      return range;
    }
  }

  // default to smallest range
  return ranges[0];
};

/**
 * Returns optimal widget packs for given order
 * @param  {number} order - order number
 * @param  {number[]} packs - available widget packs
 * @returns {Object} result - object containing packs
 */
var wallysWidget = function wallysWidget(order, packs) {
  if (typeof order !== 'number' || order <= 0) {
    throw new Error('First argument must be a positive number');
  }
  if (!Array.isArray(packs)) {
    throw new Error('Second argument must be of type array');
  }

  var result = {};

  while (order > 0) {
    var pack = fitInRange(order, packs);

    result[pack] = (result[pack] || 0) + 1;
    order -= pack;
  }

  return result;
};

// code to show order
// uses jQuery for brevity

var packs = [250, 500, 1000, 2000, 5000];

var $order = $('#order-no');
var $btn = $('#order');
var $result = $('#order-result');

$btn.on('click', function () {
  var order = parseInt($order.val(), 10);
  var result = wallysWidget(order, packs);

  console.log(result);
  $result.empty();

  for (var pack in result) {
    $result.append('<p>' + pack + ' x ' + result[pack]);
  }
});
</script>


<script id="jsbin-source-css" type="text/css">body, html {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

#container {
  padding: 10px 30px;
  margin: 20px auto;
  width: 100%;
  max-width: 300px;
  min-height: 300px;
  background: white;
  box-shadow: 0 0 2px rgba(0,0,0,0.12),0 2px 2px rgba(0,0,0,0.26);
}

h1 {
  font-size: 24px;
  font-weight: 300;
}

button {
  padding: 8px 24px;
  margin: 20px 0;
  display: block;
  background-color: #2c3e50;
  color: white;
  border: none;
  font-weight: bold;
  cursor: pointer;
}

button:hover {
  opacity: 0.92;
}

input {
  padding: 6px;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">/**
 * Fit number in closest range
 * @param  {number} num - target number to find
 * @param  {number[]} ranges - range to find in
 * @returns {number} matched range
 */
const fitInRange = (num, ranges) => {
  // eliminate the obvious case when under the smallest range
  if (num <= ranges[0]) {
    return ranges[0];
  }

  // start with the largest range we can fit
  for (let i = ranges.length - 1; i > 0; i--) {
    const range = ranges[i];

    if (num + ranges[0] > range) {
      return range;
    }
  }

  // default to smallest range
  return ranges[0];
};


/**
 * Returns optimal widget packs for given order
 * @param  {number} order - order number
 * @param  {number[]} packs - available widget packs
 * @returns {Object} result - object containing packs
 */
const wallysWidget = (order, packs) => {
  if (typeof order !== 'number' || order <= 0) {
    throw new Error('First argument must be a positive number');
  }
  if (!Array.isArray(packs)) {
    throw new Error('Second argument must be of type array');
  }

  const result = {};

  while (order > 0) {
    const pack = fitInRange(order, packs);

    result[pack] = (result[pack] || 0) + 1;
    order -= pack;
  }

  return result;
};

// code to show order
// uses jQuery for brevity

const packs = [ 250, 500, 1000, 2000, 5000 ];

const $order = $('#order-no');
const $btn = $('#order');
const $result = $('#order-result');


$btn.on('click', () => {
  const order = parseInt($order.val(), 10);
  const result = wallysWidget(order, packs);

  console.log(result);
  $result.empty();

  for (const pack in result) {
    $result.append('<p>' + pack + ' x ' + result[pack]);
  }
});


</script></body>
</html>

## jsbin.qiyuwagoqo.css
body, html {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

#container {
  padding: 10px 30px;
  margin: 20px auto;
  width: 100%;
  max-width: 300px;
  min-height: 300px;
  background: white;
  box-shadow: 0 0 2px rgba(0,0,0,0.12),0 2px 2px rgba(0,0,0,0.26);
}

h1 {
  font-size: 24px;
  font-weight: 300;
}

button {
  padding: 8px 24px;
  margin: 20px 0;
  display: block;
  background-color: #2c3e50;
  color: white;
  border: none;
  font-weight: bold;
  cursor: pointer;
}

button:hover {
  opacity: 0.92;
}

input {
  padding: 6px;
}

## jsbin.qiyuwagoqo.js
/**
 * Fit number in closest range
 * @param  {number} num - target number to find
 * @param  {number[]} ranges - range to find in
 * @returns {number} matched range
 */
'use strict';

var fitInRange = function fitInRange(num, ranges) {
  // eliminate the obvious case when under the smallest range
  if (num <= ranges[0]) {
    return ranges[0];
  }

  // start with the largest range we can fit
  for (var i = ranges.length - 1; i > 0; i--) {
    var range = ranges[i];

    if (num + ranges[0] > range) {
      return range;
    }
  }

  // default to smallest range
  return ranges[0];
};

/**
 * Returns optimal widget packs for given order
 * @param  {number} order - order number
 * @param  {number[]} packs - available widget packs
 * @returns {Object} result - object containing packs
 */
var wallysWidget = function wallysWidget(order, packs) {
  if (typeof order !== 'number' || order <= 0) {
    throw new Error('First argument must be a positive number');
  }
  if (!Array.isArray(packs)) {
    throw new Error('Second argument must be of type array');
  }

  var result = {};

  while (order > 0) {
    var pack = fitInRange(order, packs);

    result[pack] = (result[pack] || 0) + 1;
    order -= pack;
  }

  return result;
};

// code to show order
// uses jQuery for brevity

var packs = [250, 500, 1000, 2000, 5000];

var $order = $('#order-no');
var $btn = $('#order');
var $result = $('#order-result');

$btn.on('click', function () {
  var order = parseInt($order.val(), 10);
  var result = wallysWidget(order, packs);

  console.log(result);
  $result.empty();

  for (var pack in result) {
    $result.append('<p>' + pack + ' x ' + result[pack]);
  }
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Wally's widgets</title>

	<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
	<style id="jsbin-css">
	body, html {
	width: 100%;
	height: 100%;
	background-color: #f5f5f5;
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
	}

	#container {
	padding: 10px 30px;
	margin: 20px auto;
	width: 100%;
	max-width: 300px;
	min-height: 300px;
	background: white;
	box-shadow: 0 0 2px rgba(0,0,0,0.12),0 2px 2px rgba(0,0,0,0.26);
	}

	h1 {
	font-size: 24px;
	font-weight: 300;
	}

	button {
	padding: 8px 24px;
	margin: 20px 0;
	display: block;
	background-color: #2c3e50;
	color: white;
	border: none;
	font-weight: bold;
	cursor: pointer;
	}

	button:hover {
	opacity: 0.92;
	}

	input {
	padding: 6px;
	}
	</style>
	</head>
	<body>

	<div id="container">
	<h1>Wally's Widgets</h1>
	Order <input id='order-no' type="number" value=0 min=0>
	<button id='order'>Place order</button>

	Your order:
	<div id="order-result"></div>
	</div>

	<script id="jsbin-javascript">
	/**
	* Fit number in closest range
	* @param {number} num - target number to find
	* @param {number[]} ranges - range to find in
	* @returns {number} matched range
	*/
	'use strict';

	var fitInRange = function fitInRange(num, ranges) {
	// eliminate the obvious case when under the smallest range
	if (num <= ranges[0]) {
	return ranges[0];
	}

	// start with the largest range we can fit
	for (var i = ranges.length - 1; i > 0; i--) {
	var range = ranges[i];

	if (num + ranges[0] > range) {
	return range;
	}
	}

	// default to smallest range
	return ranges[0];
	};

	/**
	* Returns optimal widget packs for given order
	* @param {number} order - order number
	* @param {number[]} packs - available widget packs
	* @returns {Object} result - object containing packs
	*/
	var wallysWidget = function wallysWidget(order, packs) {
	if (typeof order !== 'number' \|\| order <= 0) {
	throw new Error('First argument must be a positive number');
	}
	if (!Array.isArray(packs)) {
	throw new Error('Second argument must be of type array');
	}

	var result = {};

	while (order > 0) {
	var pack = fitInRange(order, packs);

	result[pack] = (result[pack] \|\| 0) + 1;
	order -= pack;
	}

	return result;
	};

	// code to show order
	// uses jQuery for brevity

	var packs = [250, 500, 1000, 2000, 5000];

	var $order = $('#order-no');
	var $btn = $('#order');
	var $result = $('#order-result');

	$btn.on('click', function () {
	var order = parseInt($order.val(), 10);
	var result = wallysWidget(order, packs);

	console.log(result);
	$result.empty();

	for (var pack in result) {
	$result.append('<p>' + pack + ' x ' + result[pack]);
	}
	});
	</script>


	<script id="jsbin-source-css" type="text/css">body, html {
	width: 100%;
	height: 100%;
	background-color: #f5f5f5;
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
	}

	#container {
	padding: 10px 30px;
	margin: 20px auto;
	width: 100%;
	max-width: 300px;
	min-height: 300px;
	background: white;
	box-shadow: 0 0 2px rgba(0,0,0,0.12),0 2px 2px rgba(0,0,0,0.26);
	}

	h1 {
	font-size: 24px;
	font-weight: 300;
	}

	button {
	padding: 8px 24px;
	margin: 20px 0;
	display: block;
	background-color: #2c3e50;
	color: white;
	border: none;
	font-weight: bold;
	cursor: pointer;
	}

	button:hover {
	opacity: 0.92;
	}

	input {
	padding: 6px;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">/**
	* Fit number in closest range
	* @param {number} num - target number to find
	* @param {number[]} ranges - range to find in
	* @returns {number} matched range
	*/
	const fitInRange = (num, ranges) => {
	// eliminate the obvious case when under the smallest range
	if (num <= ranges[0]) {
	return ranges[0];
	}

	// start with the largest range we can fit
	for (let i = ranges.length - 1; i > 0; i--) {
	const range = ranges[i];

	if (num + ranges[0] > range) {
	return range;
	}
	}

	// default to smallest range
	return ranges[0];
	};


	/**
	* Returns optimal widget packs for given order
	* @param {number} order - order number
	* @param {number[]} packs - available widget packs
	* @returns {Object} result - object containing packs
	*/
	const wallysWidget = (order, packs) => {
	if (typeof order !== 'number' \|\| order <= 0) {
	throw new Error('First argument must be a positive number');
	}
	if (!Array.isArray(packs)) {
	throw new Error('Second argument must be of type array');
	}

	const result = {};

	while (order > 0) {
	const pack = fitInRange(order, packs);

	result[pack] = (result[pack] \|\| 0) + 1;
	order -= pack;
	}

	return result;
	};

	// code to show order
	// uses jQuery for brevity

	const packs = [ 250, 500, 1000, 2000, 5000 ];

	const $order = $('#order-no');
	const $btn = $('#order');
	const $result = $('#order-result');


	$btn.on('click', () => {
	const order = parseInt($order.val(), 10);
	const result = wallysWidget(order, packs);

	console.log(result);
	$result.empty();

	for (const pack in result) {
	$result.append('<p>' + pack + ' x ' + result[pack]);
	}
	});







	</script></body>
	</html>