` ````
<p>
<input type="number" value="12" class="number-input number-input--a" />
<select class="operator-select">
<option value="add">+</option>
<option value="subtract">-</option>
<option value="multiply">×</option>
<option value="divide">÷</option>
</select>
<input type="number" value="4" class="number-input number-input--b" />
</p>
<p class="result"></p>
```

` ````
body {
background: #EEE;
font-family: sans-serif;
}
input, select {
font-size: 20px;
}
input {
width: 100px;
text-align: right;
}
.result {
padding: 10px;
font-size: 36px;
background: #19F;
color: white;
text-align: right;
max-width: 240px;
border-radius: 5px;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
}
```

` ````
var $numberInputs = $('.number-input');
var $inputA = $('.number-input--a');
var $inputB = $('.number-input--b');
var $operatorSelect = $('.operator-select');
var $result = $('.result');
var operations = {
add: function( a, b ) {
return a + b;
},
subtract: function( a, b ) {
return a - b;
},
multiply: function( a, b ) {
return a * b;
},
divide: function( a, b ) {
return a / b;
},
};
function calculate() {
var a = parseInt( $inputA.val(), 10 );
var b = parseInt( $inputB.val(), 10 );
var operator = $operatorSelect.val();
var operation = operations[ operator ];
var resultNumber = operation( a, b );
$result.text( resultNumber );
}
// calculate initial value
calculate();
// calculate on change events
$numberInputs.on( 'input', calculate );
$operatorSelect.on( 'change', calculate );
```

999px

Loading
..................

Alt F
Opt F
Find & Replace

Also see: Tab Triggers