Price Calculator (Refactor for /r/javascript)
For my answer at: http://www.reddit.com/r/javascript/comments/1jwsll/code_i_wrote_up_for_another_redditor_who_doesnt/cbjsqtw
by path411
HTML
<div id="Page">
<div id="Translate">
<h1><span id="Translation-Price">0</span> RUB for a page</h1>
<p>I want to translate a
<select id="Translation-Type"></select> text from
<select id="Translation-Language"></select> into
<select id="Translation-Available"></select>
</p>
</div>
</div>
CSS
body {
margin:0;
background:#e2e2e2;
color:#585858;
font-family:"Myriad Pro", "Arial", sans-serif;
}
#Page {
margin: 0 auto;
width:960px;
}
#Translate {
margin: 150px auto;
width: 600px;
}
h1 {
font-size:64px;
font-weight:500;
text-align:center;
}
select {
background:transparent;
border:1px solid #999;
border-radius:3px;
padding:4px 2px;
-webkit-appearance: none;
}
JavaScript
(function TranslationPricing() {
var TRANSLATION_TYPES = [
{
"name": "general",
"price": 0
},
{
"name": "technical",
"price": 90
}
];
var LANGUAGES_AVAILABLE = [
{
"name": "English",
"available": [ { "name": "Russian", "price": 290 } ]
},
{
"name": "German",
"available": [ { "name": "Russian", "price": 340 } ]
},
{
"name": "French",
"available": [ { "name": "Russian", "price": 340 } ]
},
{
"name": "Czech",
"available": [ { "name": "Russian", "price": 340 } ]
},
{
"name": "Japanese",
"available": [ { "name": "Russian", "price": 380 } ]
},
{
"name": "Russian",
"available": [
{ "name": "English", "price": 340 }
, { "name": "German", "price": 390 }
, { "name": "French", "price": 390 }
, { "name": "Czech", "price": 390 }
, { "name": "Japanese", "price": 430 }
]
}
];
function Main() {
BindEvents();
}
function BindEvents() {
var $types = document.getElementById("Translation-Type");
var $languages = document.getElementById("Translation-Language");
var $availables = document.getElementById("Translation-Available");
var $price = document.getElementById("Translation-Price");
// Store selections and default to first in lists
var selectedtype = TRANSLATION_TYPES[0];
var selectedlanguage = LANGUAGES_AVAILABLE[0];
var selectedavailable = selectedlanguage.available[0];
UpdatePrice();
// Bind translation types
...