Embedded Files
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>←</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$("•",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$ = ""waitb1:if d$ = "0" then d$ = "1" else d$ = d$ + "1"refreshreturnb2:if d$ = "0" then d$ = "2" else d$ = d$ + "2"refreshreturnb3:if d$ = "0" then d$ = "3" else d$ = d$ + "3"refreshreturnb4:if d$ = "0" then d$ = "4" else d$ = d$ + "4"refreshreturnb5:if d$ = "0" then d$ = "5" else d$ = d$ + "5"refreshreturnb6:if d$ = "0" then d$ = "6" else d$ = d$ + "6"refreshreturnb7:if d$ = "0" then d$ = "7" else d$ = d$ + "7"refreshreturnb8:if d$ = "0" then d$ = "8" else d$ = d$ + "8"refreshreturnb9:if d$ = "0" then d$ = "9" else d$ = d$ + "9"refreshreturnb0:if d$ = "0" then d$ = "0" else d$ = d$ + "0"refreshreturnbdot:if d$ = "0" then d$ = "." else d$ = d$ + "."refreshreturnbm:if d$ = "0" then d$ = "*" else d$ = d$ + "*"refreshreturnbd:if d$ = "0" then d$ = "/" else d$ = d$ + "/"refreshreturnba:if d$ = "0" then d$ = "+" else d$ = d$ + "+"refreshreturnbs:if d$ = "0" then d$ = "-" else d$ = d$ + "-"refreshreturnbsp:d$ = left$(d$,len(d$) - 1)refreshreturnbclear:d$ = "0"refreshreturnlbrkt:if d$ = "0" then d$ = "(" else d$ = d$ + "("refreshreturnrbrkt:if d$ = "0" then d$ = ")" else d$ = d$ + ")"refreshreturnbeq: ' evaluate the expressionCOMMAND "d=" + d$d$ = str$(d)refreshreturn'------------- End -----------------
Page updated
Google Sites
Report abuse