Project - Calculator

This project shows how to create a matrix of buttons to use as a calculator.

A later project will use a similar matrix of buttons as an Infra-Red Remote Controller.

A style declaration assigns a standard style to all buttons, and also a 'hover' style.
In addition, buttons can also be uniquely styled as wished, in this case with different coloured 'group' lettering.

The backspace button deletes the last character, the C button clears everything.
It would be easy to add other buttons to include eg: scientific functions.
Each button has it's own branch to jump to, which can do whatever you make it do.

In this case all button branches merely add the pressed character to the accumulating display variable, except for the = button, which uses COMMAND to evaluate the d$ var.

Note the use of 'entities' for the backspace and decimal-point characters - see here:

Here is a link to a code pen 'table' snippet:  https://codepen.io/chriscoyier/pen/fixJg
And here's a link to a more thorough explanation of tables:  https://css-tricks.com/complete-guide-table-element/

Basic:
'calculator
option.lowram 12000
cls
d$ = "0"
d = val(d$)
a$ = ""
a$ = a$ + |<style>|
a$ = a$ + | #mytable { background-color:lightSteelBlue; |
a$ = a$ + |border-radius:2em;padding:1.2em;|
a$ = a$ + |border: .15em solid red;}|
a$ = a$ + |#mytable button {width:2.7em;background: dimgray;font:2em/1em arial; border-radius: .5em;padding:.1em;}|
a$ = a$ + |#mytable button:hover {background: dimgray;background:radial-gradient(#999999,#666666);}|
a$ = a$ + |</style>|
a$ = a$ + |<br><br><br><br>|
a$ = a$ + |<div id="mytable" style='display: table; margin-right: auto; margin-left: auto;' > |
a$ = a$ + |<table style="text-align: center; " border1="1"|
a$ = a$ + | cellpadding="3" cellspacing="5">|
a$ = a$ + |  <tbody>|
a$ = a$ + |    <tr>|
a$ = a$ + |<td colspan="4" style=";">|
a$ = a$ + textbox$(d$,"dcss") + |</td>|
a$ = a$ + cssid$("dcss","width:8em;font:3em/1em arial;padding:.2em .5em .2em .5em; color:dimgray;background:linear-gradient(lightcyan,lightyellow);border-radius: .2em;text-align:right;")
a$ = a$ + |  </tr>|
a$ = a$ + |    <tr>|
a$ = a$ + cssid$("bred","color:tomato;")
a$ = a$ + cssid$("bblue","color:lightblue;")
a$ = a$ + cssid$("bgray","color:lightgray;")
a$ = a$ + cssid$("bwhite","color:white;")
a$ = a$ + cssid$("byellow","color:yellow;")
a$ = a$ + |<td>| + button$("<b>&larr;</b>",bsp,"bred") + |</td>|
a$ = a$ + |<td>| + button$("C",bclear,"bred") + |</td>|
a$ = a$ + |<td>| + button$("(",lbrkt,"bgray") + |</td>|
a$ = a$ + |<td>| + button$(")",rbrkt,"bgray") + |</td>|
a$ = a$ + |    </tr>|
a$ = a$ + |    <tr>|
a$ = a$ + |<td>| + button$("7",b7,"byellow") + |</td>|
a$ = a$ + |<td>| + button$("8",b8,"byellow") + |</td>|
a$ = a$ + |<td>| + button$("9",b9,"byellow") + |</td>|
a$ = a$ + |<td>| + button$("/",bd,"bblue") + |</td>|
a$ = a$ + |    </tr>|
a$ = a$ + |    <tr>|
a$ = a$ + |<td>| + button$("4",b4,"byellow") + |</td>|
a$ = a$ + |<td>| + button$("5",b5,"byellow") + |</td>|
a$ = a$ + |<td>| + button$("6",b6,"byellow") + |</td>|
a$ = a$ + |<td>| + button$("*",bm,"bblue") + |</td>|
a$ = a$ + |    </tr>|
a$ = a$ + |    <tr>|
a$ = a$ + |<td>| + button$("1",b1,"byellow") + |</td>|
a$ = a$ + |<td>| + button$("2",b2,"byellow") + |</td>|
a$ = a$ + |<td>| + button$("3",b3,"byellow") + |</td>|
a$ = a$ + |<td>| + button$("-",bs,"bblue") + |</td>|
a$ = a$ + |    </tr>|
a$ = a$ + |    <tr>|
a$ = a$ + |<td>| + button$("&bull;",bdot,"byellow") + |</td>|
a$ = a$ + |<td>| + button$("0",b0,"byellow") + |</td>|
a$ = a$ + |<td>| + button$("=",beq,"bwhite") + |</td>|
a$ = a$ + |<td>| + button$("+",ba,"bblue") + |</td>|
a$ = a$ + |    </tr>|
a$ = a$ + |  </tbody>|
a$ = a$ + |</table>|
a$ = a$ + |</div>|
html a$
a$ = ""
wait

b1:
if d$ = "0"  then d$ = "1" else d$ = d$ + "1"
refresh
return

b2:
if d$ = "0"  then d$ = "2" else d$ = d$ + "2"
refresh
return

b3:
if d$ = "0"  then d$ = "3" else d$ = d$ + "3"
refresh
return

b4:
if d$ = "0"  then d$ = "4" else d$ = d$ + "4"
refresh
return

b5:
if d$ = "0"  then d$ = "5" else d$ = d$ + "5"
refresh
return

b6:
if d$ = "0"  then d$ = "6" else d$ = d$ + "6"
refresh
return

b7:
if d$ = "0"  then d$ = "7" else d$ = d$ + "7"
refresh
return

b8:
if d$ = "0"  then d$ = "8" else d$ = d$ + "8"
refresh
return

b9:
if d$ = "0"  then d$ = "9" else d$ = d$ + "9"
refresh
return

b0:
if d$ = "0"  then d$ = "0" else d$ = d$ + "0"
refresh
return

bdot:
if d$ = "0"  then d$ = "." else d$ = d$ + "."

refresh
return

bm:
if d$ = "0"  then d$ = "*" else d$ = d$ + "*"
refresh
return

bd:
if d$ = "0"  then d$ = "/" else d$ = d$ + "/"
refresh
return

ba:
if d$ = "0"  then d$ = "+" else d$ = d$ + "+"
refresh
return

bs:
if d$ = "0"  then d$ = "-" else d$ = d$ + "-"
refresh
return

bsp:
d$ = left$(d$,len(d$) - 1)
refresh
return

bclear:
d$ = "0"
refresh
return

lbrkt:
if d$ = "0"  then d$ = "(" else d$ = d$ + "("
refresh
return

rbrkt:
if d$ = "0"  then d$ = ")" else d$ = d$ + ")"
refresh
return

beq:   
' evaluate the expression
COMMAND "d=" + d$
d$ = str$(d)
refresh
return

'------------- End -----------------






ca5.jpg
(26k)
Margaret Baker,
Dec 29, 2017, 4:03 PM
v.1
Robin Baker,
Apr 6, 2019, 10:34 AM
v.2