The project this time is a simple jQuery-based calculator. It's not a big deal—just 4 functions and a memory feature, along with the ability to journal all the entries. This is what is looks like:
As usual, it's organized by HTML, CSS, and JavaScript. Let's start by looking at the HTML:
<html> <head> <title>jQuery Calculator</title> <link type="text/css" rel="stylesheet" href="calc.css" /> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript" src="calc.js"></script> </head> <body> <h1>jQuery Calculator</h1> <table id="calculator"> <tr> <td colspan="4" id="display"> </td> </tr> <tr> <td class="btnOp">+</td> <td class="btnOp">-</td> <td class="btnOp">*</td> <td class="btnOp">/</td> </tr> <tr> <td class="btnNum">7</td> <td class="btnNum">8</td> <td class="btnNum">9</td> <td class="btnMem" id="memClear">MC</td> </tr> <tr> <td class="btnNum">4</td> <td class="btnNum">5</td> <td class="btnNum">6</td> <td class="btnMem" id="memPlus">M+</td> </tr> <tr> <td class="btnNum">1</td> <td class="btnNum">2</td> <td class="btnNum">3</td> <td class="btnMem" id="memRecall">MR</td> </tr> <tr> <td class="btnNum">0</td> <td class="btnNum">.</td> <td class="btnFunc" id="clear">C</td> <td class="btnEq" id="equals">=</td> </tr> <tr><td colspan="4"><div id="tape"></div></td></tr> </table> </body> </html>
Here's the CSS:
body {
text-align: center;
font-family: Verdana, Helvetica, sans-serif;
font-size: 1em;
}
h1 {
font-size: 100%;
}
table {
border: 1px solid black;
}
#display {
border: 1px solid black;
height: 30px;
color: blue;
font: Courier New, Courier, fixed;
text-align: right;
}
.button {
font-weight: bold;
height: 30px;
width: 30px;
text-align: center;
vertical-align: center;
}
.btnNum {
background-color: silver;
}
.btnFunc {
background-color: blue;
color: white;
}
.btnMem {
background-color: blue;
color: white;
}
.btnMemFull {
background-color: green;
}
.btnOp {
background-color: blue;
color: white;
}
.btnEq {
background-color: maroon;
color: white;
}
#tape {
width: 200px;
height: auto;
border: 1px solid black;
color: black;
font: Courier New, Courier, fixed;
text-align: right;
}
And here's the JavaScript:
var buffer = "0"; var expr = "0"; var mem = 0; function appendBuffer(s){ buffer = buffer == "0" ? "" : buffer; buffer += s; } function clearBuffer(){ buffer = "0"; } function appendExpression(s){ expr += s; } function clearExpression(){ expr = ""; } function showBuffer(){ $("#display").html(buffer); } function appendToTape(s){ $("#tape").append(s); $("#tape").append("
"); } $(document).ready(function(){ $(".btnNum,.btnFunc,.btnMem,.btnMemFull,.btnOp,.btnEq").addClass("button"); $("#calculator").attr("align","center"); showBuffer(); $(".btnNum").click(function(){ appendBuffer($(this).text()); appendExpression($(this).text()); showBuffer(); }); $("#clear").click(function(){ clearBuffer(); clearExpression(); showBuffer(); }); $(".btnOp").click(function(){ if(expr > ""){ $("#equals").click(); } appendExpression($(this).text()); clearBuffer(); }); $("#equals").click(function(){ appendToTape(expr); buffer = eval(expr); expr = buffer; showBuffer(); }); $("#memPlus").click(function(){ mem += buffer * 1; $(".btnMem").addClass("btnMemFull"); }); $("#memRecall").click(function(){ buffer = mem; appendExpression(mem); showBuffer(); }); $("#memClear").click(function(){ mem = 0; $(".btnMem").removeClass("btnMemFull"); }); });
Next time: the deconstruction.
Posts
No comments:
Post a Comment