Skip to content

Instantly share code, notes, and snippets.

/index.html

Created March 3, 2017 02:23
Show Gist options
  • Save anonymous/bacc2e6c7c840b4aa926c89e6ade09a1 to your computer and use it in GitHub Desktop.
Save anonymous/bacc2e6c7c840b4aa926c89e6ade09a1 to your computer and use it in GitHub Desktop.
Download ZIP
Wally's widgets // source http://jsbin.com/qiyuwagoqo
Raw
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>
Raw
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;
}
Raw
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]);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment