Posts Tagged 'gradient'

A CSS and Javascript Calculator

I was doodling this afternoon on the computer and created this calculator.

It’s created using CSS and Javascript.

The CSS is drawn from http://css-tricks.com/examples/ButtonMaker/# and the javascript from http://www.code-sucks.com/code/javascript/template.php?tutorial=calculator.php.

I can’t embed the calendar on here but it looks like this:

Calendar Using Javascript and CSS

It’s nothing particularly clever but should allow you to put a simple calculator on a web page. You can change the CSS to change the gradient colour of the buttons.

Please post any comments on how you could improve the code or functionallity of the calculator.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>

<style>

.button {
 cursor: pointer;
 margin: 10px;
 float: left;
 width: 25px;
 text-align: center;
 border-top: 1px solid #96d1f8;
 background: #65a9d7;
 background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
 background: -moz-linear-gradient(top, #3e779d, #65a9d7);
 padding: 5px 10px;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;
 -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
 -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
 box-shadow: rgba(0,0,0,1) 0 1px 0;
 text-shadow: rgba(0,0,0,.4) 0 1px 0;
 color: white;
 font-size: 14px;
 font-family: Helvetica, Arial, Sans-Serif;
 text-decoration: none;
 vertical-align: middle;
 }
.button:hover {
 border-top-color: #28597a;
 background: #28597a;
 color: #ccc;
 }
.button:active {
 border-top-color: #1b435e;
 background: #1b435e;
 }

.button_big {
 cursor: pointer;
 margin: 10px;
 float: left;
 width: 95px;
 text-align: center;
 border-top: 1px solid #96d1f8;
 background: #65a9d7;
 background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
 background: -moz-linear-gradient(top, #3e779d, #65a9d7);
 padding: 5px 10px;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;
 -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
 -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
 box-shadow: rgba(0,0,0,1) 0 1px 0;
 text-shadow: rgba(0,0,0,.4) 0 1px 0;
 color: white;
 font-size: 14px;
 font-family: Helvetica, Arial, Sans-Serif;
 text-decoration: none;
 vertical-align: middle;
 }
.button_big:hover {
 border-top-color: #28597a;
 background: #28597a;
 color: #ccc;
 }
.button_big:active {
 border-top-color: #1b435e;
 background: #1b435e;
 }

</style>

</head>

<body>

<table border="1" style="border-collapse: collapse" bgcolor="#999999" cellpadding="0" bordercolor="#808080">
 <tr>
 <td colspan="4">
 <form name="calculator">
 <input type="text" disabled id="total" style="text-align: right; background: white; width:98%; font-family:Courier New; font-size:18pt; font-weight:bold" size="1" name="total">
 </form>

 </td>
 </tr>
 <tr>
 <td><div onclick="calculator.total.value += '7'">7</div></td>
 <td><div onclick="calculator.total.value += '8'">8</div></td>
 <td><div onclick="calculator.total.value += '9'">9</div></td>
 <td><div onclick="calculator.total.value += '/'">/</div></td>

 </tr>
 <tr>
 <td><div onclick="calculator.total.value += '4'">4</div></td>
 <td><div onclick="calculator.total.value += '5'">5</div></td>
 <td><div onclick="calculator.total.value += '6'">6</div></td>
 <td><div onclick="calculator.total.value += '*'">*</div></td>

 </tr>
 <tr>
 <td><div onclick="calculator.total.value += '1'">1</div></td>
 <td><div onclick="calculator.total.value += '2'">2</div></td>
 <td><div onclick="calculator.total.value += '3'">3</div></td>
 <td><div onclick="calculator.total.value += '-'">-</div></td>

 </tr>
 <tr>
 <td colspan="2" align="center"><div onclick="calculator.total.value += '0'">0</div></td>
 <td><div onclick="calculator.total.value += '.'">.</div></td>
 <td><div onclick="calculator.total.value += '+'">+</div></td>

 </tr>
 <tr>
 <td><div onclick="calculator.total.value = ''">C</div></td>
 <td>&nbsp;</td>
 <td colspan="2"><div onclick="calculator.total.value = eval(calculator.total.value)">=</div></td>

 </tr>

</table>

</body>

Blog Stats

  • 222,048 hits

Counter

ClustrMap