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>
Advertisements

2 Responses to “A CSS and Javascript Calculator”


  1. 1 rajee December 24, 2010 at 11:31 am

    Please change the title of the post.

    It’s Calculator not Calendar 🙂

  2. 2 movefirstblog December 24, 2010 at 12:20 pm

    Wow! Sorry about that!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




Blog Stats

  • 222,709 hits

Counter

ClustrMap


%d bloggers like this: