<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Deal Or No Deal Fair Offer Calculator</title>
<style type="text/css">
* {
color: #fff;
background: #000;
}
.disabled { color: #555; }
#last { color: #f55; }
.disabled#last { color: #a00; }
#fair, #change, #cases>div {
font-size: 4em;
text-align: center;
border: 1px solid #555;
}
#cases {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#cases>div {
cursor: pointer;
flex-grow: 1;
width: 30%;
}
</style>
</head>
<body>
<table>
<div id="fair"></div>
<div id="change"></div>
<div id="cases"></div>
</div>
<script type="text/javascript">
document.onselectionchange = function () {
if (window.getSelection) { window.getSelection().removeAllRanges(); }
else if (document.selection) { document.selection.empty(); }
return false;
}
document.body.onselectstart = function () { return false; }
var cases = [
.01, 1, 5, 10, 25, 50, 75, 100, 200, 300, 400, 500, 750, 1000, 5000, 10000,
25000, 50000, 75000, 100000, 200000, 300000, 400000, 500000, 750000, 1000000
];
var query = (''+location).split('?')[1];
if (query && query > 0) {
for (var i = 0; i < query; i++) cases.pop();
for (var i = 0; i < query; i++) cases.push(1000000)
}
var casesLength = cases.length;
var fairDiv = document.querySelector("#fair");
var changeDiv = document.querySelector("#change");
var casesDiv = document.querySelector("#cases");
var old = cases.reduce(function (a, b) { return a + b; }) / casesLength;
function calculateFairOffer () {
var avg = cases.reduce(function (a, b) { return a + b; }) / casesLength;
fairDiv.textContent = "Fair offer: " + avg.toLocaleString(undefined, { style: "currency", currency: "USD" });
changeDiv.textContent = "Change: " + (avg - old).toLocaleString(undefined, { style: "currency", currency: "USd" });
old = avg;
}
function toggle (amount, index, div) {
var last = document.querySelector("#last");
if (last) last.id = "";
div.id = "last";
if (cases[index]) {
div.classList.add("disabled");
cases[index] = 0;
casesLength--;
} else {
div.classList.remove("disabled");
cases[index] = amount;
casesLength++;
}
calculateFairOffer();
}
for (var i in cases) {
var div = document.createElement("div");
div.className = "case";
div.textContent = "$" + cases[i].toLocaleString();
div.onclick = (function (amount, index, div) { return function () { toggle(amount, index, div); }; })(cases[i], i, div);
casesDiv.appendChild(div);
}
calculateFairOffer();
</script>
</body>
</html>