• Home
• Tutorials
• Forums
• Reference
• Developers
• Advertise
• About Us

Advanced Calculator

Advanced Calculator

I have posted a "Basic Calculator" tutorial here. That was more like a representation of how you would calculate with a paper and a pencil. You provide INPUT A then a MATHEMATICAL OPERATION like a "+" or a "-" and then an INPUT B.

This is more a representation of how you would use a regular hand-held calculator complete with buttons for NUMBERS, OPERATIONS and CLEAR TEXT.

---

<!--- As usual, declare all your variables here. "calc_txt" is for variables coming in from previous form, "calc_btn" are variables coming in from pressing those buttons and "resolve" is the "equal to" command variable
Sorry, I have a wierd naming convention
--->

<cfparam name="calc_txt" default="">
<cfparam name="calc_btn" default="">
<cfparam name="resolve" default="">

<!--- Remember........ there are people out there who would still expect to see a result when they divide by zero.
Thus the "cftry" tag and "cfcatch" tag can handle this error --->

<cftry>
    <!--- code cfform that redirects to itself --->
    <cfform action="calc.cfm" method="POST" enablecab="Yes">

    <!--- declare conditional variables. --->
    <cfset expression="#calc_txt##calc_btn#">
    <cfif resolve eq "C">
        <cfset expression="">
    <cfelseif resolve eq "=">
        <cfset expression="#evaluate(expression)#">
    </cfif>

    <!--- This is where the fun begins. --->

    <table border="1">
        <tr>
            <td colspan="2" align="center">
                <cfinput type="Text" name="calc_txt" value="#expression#" required="No">
            </td>
        </tr>
        <tr>
            <td>
            <!--- Because the #expression# was set-up as the conditional variable, it will either return a string or nothing--->
            <!--- __________________________________________________________________________________--->
   
            <table border="1">
                <tr>
                    <!--- Use this loop to create characters from 0 to 9 --->
                    <cfloop index="calc_btn" from="48" to="57">
                    <cfset chr_btn="#chr(calc_btn)#">
                    <!--- this is a just a formatting condition. if 0, button width used by the stylesheet is 85px, else use 25px. --->
                    <cfif chr_btn eq '0'>
                        <cfset wide="85px">
                        <cfset col_spn="3">
                    <cfelse>
                        <cfset wide="25px">
                        <cfset col_spn="1">
                    </cfif>
                    <td colspan="<cfoutput>#col_spn#</cfoutput>" align="center">
                        <input type="submit" name="calc_btn" value="<cfoutput>#chr_btn#</cfoutput>" style="width:<cfoutput>#wide#</cfoutput>;height;25px;">
                        <!--- Again just a formatting condition within a cell. If there are 3 buttons, go to next row --->
        <cfif calc_btn mod 3 eq 0>
                </td>
            </tr>
        </cfif>
        </td>
        </cfloop>
        <!--- __________________________________________________________________________________--->
   
        <!--- __________________________________________________________________________________--->
        </tr>
        </table>
        </td>
        <td>
            <table>
                <tr>
                    <!--- This is the second loop to create characters like + - * / squares, roots, etc. all these charates fall within the range chr(40) to chr(47). Of course a , (comma) fall under this range too. So if we come across a comma use ^ (exponential or exp) instead. Simple ? --->
                    <cfloop index="calc_btn" from="40" to="47">
                        <cfset chr_btn="#chr(calc_btn)#">
                        <cfif chr_btn eq ','>
                            <cfset chr_btn="^">
                        </cfif>
                        <td>
                            <!--- Again the same formatting IF statements. if we have two buttons in a row, use second row. --->
                            <input type="submit" name="calc_btn" value="<cfoutput>#chr_btn#</cfoutput>" style="width:25px;height;25px;">
                    <cfif calc_btn mod 2 neq 0>
                        </td>
                    </tr>
                    </cfif>
                </td>
                </cfloop>
                <!--- __________________________________________________________________________________--->
           
            </tr>
        </table>
        <!--- __________________________________________________________________________________--->
        </td>
    </tr>
    <tr>
    <!--- Once we have an expression ready, we need to resolve it. So you can either ask for a result or "cacnel it". If you cancel it, it will clear the text box above. If you ask for a result, it will 'try' to evaluate the expression --->
        <td colspan="2" align="center">
            <input type="submit" name="resolve" value="=" style="width:75px;">
            <input type="submit" name="resolve" value="C" style="width:75px;">
        </td>
    </tr>
</table>
</cfform>
<!--- __________________________________________________________________________________--->
<cfcatch type="Any">
    <!--- and ofcourse if you ask it to do something wierd, you can relocate the user to a blank calculator for. You could also direct your user to a page that says "are u crazy, didn't you go to school. Don't you know you cannot divide by zero."--->

    <cflocation url="calc.cfm">
</cfcatch>
</cftry>
<!--- End all tags here --->
<!--- __________________________________________________________________________________--->