Color Calculator

dabblet.css

/**
 * Color Calculator
 */



.center {
     top:50%;
     left:50%;
}

.field {
	text-align: center; 
	background: #00f; 
	border: none;
	color: white;
	height: 30px; 
	width: 130px
}

.field:hover {
	border-width: 1px;
	border-style: solid;
	border-color: #333;
}

.plain {
	color: white;
	width: 30px;
	height: 30px;
	border: none;
	margin: 0;
	padding: 0;
	background: #f0f; 
}

.plain:hover {
	border-width: 1px;
	border-style: solid;
	border-color: #333;
}

dabblet.html

<br>
<br>
<br>
<br>
<br>
<br>

<center>

<div>
<form name="calculator">  
 <input type="text" class="field" disabled id="total">  
</form> 
</div>

<div> 
<table> 
 <tr>  
  <td><input type="button" class="plain" value="C" onclick="calculator.total.value = ''"></td>  
  <td><input type="button" class="plain" value="/" onclick="calculator.total.value += '/'"></td>  
  <td><input type="button" class="plain" value="X" onclick="calculator.total.value += '*'"></td>  
  <td><input type="button" class="plain" value="-" onclick="calculator.total.value += '-'" ></td>  
 </tr>  
 <tr>  
  <td><input type="button" class="plain" value="7" onclick="calculator.total.value += '7'"></td>  
  <td><input type="button" class="plain" value="8" onclick="calculator.total.value += '8'"></td>  
  <td><input type="button" class="plain" value="9" onclick="calculator.total.value += '9'"></td>  
  <td rowspan="2"><input type="button" class="plain" style="width: 30px" onclick="calculator.total.value += '+'" value ="+"></td>  
 </tr>  
 <tr>  
  <td><input type="button" value="4" class="plain" onclick="calculator.total.value += '4'"></td>  
  <td><input type="button" value="5" class="plain" onclick="calculator.total.value += '5'"></td>  
  <td><input type="button" value="6" class="plain" onclick="calculator.total.value += '6'"></td>  
 </tr>  
 <tr>  
  <td><input type="button" value="1" class="plain" onclick="calculator.total.value += '1'"></td>  
  <td><input type="button" value="2" class="plain" onclick="calculator.total.value += '2'"></td>  
  <td><input type="button" value="3" class="plain" onclick="calculator.total.value += '3'"></td>  
  <td rowspan="2"><input type="button" class="plain" style="width: 30px" onclick="calculator.total.value = eval(calculator.total.value)" value ="="></td>  
 </tr>  
 <tr>  
  <td colspan="2"><input type="button" value="0" class="plain" style="width: 64px" onclick="calculator.total.value += '0'"></td>  
  <td><input type="button" value="."  class="plain" onclick="calculator.total.value += '.' "></td>  
 </tr>  
</table>  
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}