Browser-based Calculator App

Can you make use of your knowledge of HTML5 and Javascript to create a simple calculator app that runs on web browers?

http://store.usbong.ph/server/calc/calc.html

Development Logs

1. Create the appearance first. Without yet interactivity.
   

2. 20260428; http://store.usbong.ph/server/calc/index20260428.html
   Add basic arithmetic: Addition, Subtraction, Multiplication, Division

3. 20260429; http://store.usbong.ph/server/calc/index20260429.html
   +added: backspace
   +fixed: equals button not correctly displayed in newer browsers
   +fixed: error when operator is added before adding any operand

4. 20260430; http://store.usbong.ph/server/calc/index20260430.html
   +fixed: backspace error when there's only a digit left after doing an operation; "sCurrOperand" incorrectly set to Float, instead of String
   +fixed: backspace error when the operator is backspaced, then a new operator cannot anymore be added
   +added: decimal point
   +added: max 11 digits for the resulting answer if it has a decimal point
   +added: max 13 operands and operators including the decimal point
   +added: "Clear" button which replaces the "Backspace" button after using the equals operator; then, again bring back the "Backspace" button upon entering an operand or an operator
   +updated: multiply symbol to "×"
   +updated: multiply symbol to "÷"
   +updated: equals button position to "136px;" from "136.5px;"

5. 20260501; http://store.usbong.ph/server/calc/index20260501.html
   +added: current operator can be changed at its position
   +set: temporarily input box to read-only to prevent intentional or inadvertent entering of text via keyboard

6. 20260502; http://store.usbong.ph/server/calc/index20260502.html
   +fixed: pressing equals button multiple times causes next arithmetic operation to result to zero
   +removed: reset function via pressing equals button; instead, use "Clear" button
   +fixed: certain sequences that lead to incorrect output;
   Examples: 3*/B* error, 5*60=*B==/2 error
   +added: changeable number signs
   +fixed: 3/=5; previously resulted to 05; now results to 5
   TODO: -fix: 3*-B becomes 3, instead of 3*
   TODO: -fix: -*B now removes both -*

7. 20260504; http://store.usbong.ph/server/calc/index20260504.html
   +fixed: 3*-B becomes 3, instead of 3*
   +fixed: -*B now removes both -*; -* already results to <blank>
   +fixed: -* should result to <blank>
   +fixed: backspace in 3x- incorrectly results to 3 instead of 3x
   TODO: -add: PEMDAS

8. 20260505; http://store.usbong.ph/server/calc/index20260505.html
   +added: PEMDAS without yet the parenthesis
   +tested: to output the correct answer with the following:
   6*2+1=13
1+2*6=13
3-1*6+2=-1
1-3+2=0
1*3/6=0.5
2*5/3=3.333333333
   

9. 20260506; BUGGY
   +added: work-in-progress function to process the parentheses with code for debugging purposes

10. 20260507; BUGGY
    +updated: work-in-progress function to process the parentheses with code for debugging purposes; can now prepare the input to be processed
    Example:
    input: 2*(1-(1+2*6))
    output: 1+2*6

11. 20260508; BUGGY
    +updated: function to process the parentheses; can now output correctly given the input; though not yet integrated with the rest of the code
    Example:
    input: 2×(1-(1+2×6))
    process: 2×(1-A)
    output: 2×(1-13)
    

12. 20260509; BUGGY
    +updated: function to process the parentheses; gradually getting integrated with the rest of the code;
    +noted: opted to add code that reads the input as a string of characters, which is auto-processed, identifying which are operands and which are operators, while storing them in the correct sequence;
    +noted: right now, the first set inside the parentheses from the right has to be manually identified and then put into arrayOperator and arrayOperand
    Example:
    input: 3×(1-2)
    process: 3×-1
    output (CORRECT): -3
    TODO: -reverify: with other example cases, e.g. 2×(1-(1+2×6))
    TODO: -add: 3(5) which is equal to 3×5
    

13. 20260510; http://store.usbong.ph/server/calc/index20260510.html
    +reverted: to version 20260505 with updates such as:
    +updated: to allow only one operator; due to 9/3*2; error where 9/(3*2) is done instead of (9/3)*2
    +fixed: 3*3-B3= results to error; by changing B to C ("Clear") to prevent the user from pressing backspace; other cases such as 3*3-= are already giving the correct outputs;
    

Thanks for checking out my development logs. This is what I've been able to accomplish in two weeks using my available free time. http://store.usbong.ph/server/calc/index20260510.html

NEW CALC PLUS

14. 20260512; BUGGY
    +added: auto-scaled user-interface based on whether user's device is mobile or not;
    TODO: -fix: display issues, e.g. equals button (absolute position), on iPad
    TODO: -fix: 280/(1.12) and 60*0.12 resulting to non-whole number due to approximated value caused by computer's basic characteristic of using binary representations; solution says Google AI Overview is: Integer "Cents" Trick; however, parameter 2 in toFixed(2) should be auto-adjusted based on the number of places after the decimal point
    TODO: -fix: max digits reached resulting to an incorrect answer displayed
    TODO: -add: processing of parentheses
    

15. 20260513; http://store.usbong.ph/server/calc/calc20260513.html
    +fixed: 280/(1.12) and 60*0.12 resulting to non-whole number;
    +added: a function to auto-count how many places there are after the decimal point; the count is used as parameter to toFixed(...)
    

16. 20260514; http://store.usbong.ph/server/calc/calc20260514.html
    +fixed: incorrect output when doing division; 280/(1.12) now outputs the correct answer;
    +noted: without using scientific notations like exponents, there's no way to get a result greater than 999,999,999,999 (12 digits) using at most 12 digits summing the number of digits that the two operands have;
    +fixed: display issues, e.g. equals button (absolute position), on iPad
    +noted: padding-right and padding-left have to be set to 0 to fix display issues on iPad; also used "em" instead of "px" for certain button fields;
    +updated: "BackSpace" to "BACKSPACE";
    +updated: "Clear" to "CLEAR";
    +added: browser tab icon
    

17. 20260515; http://store.usbong.ph/server/calc/calc20260515.html
    +updated: to use max available browser width and height if the user is using non-mobile or desktop;
    +updated: to identify if user is using an iPad or MacBook, and adjust the browser width or height available for use accordingly;
    +added: keyboard inputs (keys near numlock or top of keyboard)
    +added: when "=" is pressed, and "CLEAR" button is activated, perform reset();
    +updated: calc fav icon to use the transparent/alpha color;
    TODO: -add: processing of parentheses
    

18. 20260516; http://store.usbong.ph/server/calc/calc20260516.html
    +added: auto-focus on the AnswerInput so that when / is pressed on the keyboard, "Quick find" on Firefox browser isn't opened
    +added: relevant keys other than those near the numlock could be pressed, including those combined with SHIFT down
    +noted: display error when the following is used:
    <link rel="icon" type="image/x-icon" href="./assets/images/calcfavicon.png?lastmod=20260516T0953">
    instead of:
    <link rel="icon" type="image/x-icon" href="./assets/images/calcfavicon.png">
    +noted: focusing on creating a "solid" app rather than a buggy one by adding more extra features, e.g. processing of parentheses;
    +added: ESCAPE key to do a reset();
    +updated: max digits to be 14 instead of 12; though equals sign is allowed to be pressed as the 15th input
    +increased: length of AnswerInput's display to show no partly drawn characters
    +fixed: width too long for standard Android via changing it from 260px to 240px
    +updated: equals sign function to continue to process operation even when the BACKSPACE button displays "CLEAR" when there's an operator in answerInput
    +fixed: focused AnswerInput not displayed uniformly with Firefox, Chrome, Safari on Edge
    

19. 20260518; http://store.usbong.ph/server/calc/calc20260518.html
    +added: when a new operator is entered, calc performs the operation if an existing operator is already present and then adds the new operator;
    +updated: increased width of buttons, and their positions accordingly;
    +updated: ESCAPE key to reset() and then executeinputOperator("=")
    

20. 20260519; http://store.usbong.ph/server/calc/calc20260519.html
    +removed: debug-related comments, thereby reducing the file size from 55KB to 30KB;
    +removed: blinking border effect in AnswerInput whenever a button is mouse-clicked;
    +tested: calc functionality; now as usable as how I use the calculator in my day-to-day working life;
    

21. 20260520; http://store.usbong.ph/server/calc/calc20260520.html
    +updated: output to make sure that all the digits to the left of the decimal point are present;
    +opted: to keep the decimal point even if the numbers to its right aren't anymore displayed due to max length reached;

22. 20260522; http://store.usbong.ph/server/calc/calc20260522.html
    +fixed: .-6 incorrectly results to 0 instead of -6, because . (not a number) is now set to 0;
    +fixed: .6*6 incorrectly results to 3.599... instead of 3.6;
    +fixed: 1.12*100 incorrectly results to 112.00000000000001, instead of 112 by using Math.round after multiplying by the power of 10 raised to a specified number based on the input operands; didn't anymore use Number.EPSILON due to incorrect result if operand is 0;
    +fixed: 0/0=5 incorrectly results to Err5, instead of 5;
    +updated: font size to 1.7rem for Android, while the default is 1.9rem; adjusted button font size and position accordingly;
    +increased: AnswerInput width on iPad due to additional one digit accepted;
    +updated: when AnswerInput is Err as a result of 0/0, for example, pressing any of the operators (except -) results to 0; meanwhile, when - is pressed, - is immediately put instead of 0;
    +updated: 0 cannot be added to the left unless there's a .
    

Thanks for checking out my development logs. This is what I've been able to accomplish in four weeks using my available free time. http://store.usbong.ph/server/calc/calc20260522.html

Additional Bug Fixes

23. 20260605; http://store.usbong.ph/server/calc/calc20260605.html
    +updated: icon
    +noted: use of calcalphaicon20260605.png instead of calcalphaiconUpdated.png causes error in the display of × and ÷
    +fixed: 4362.75 - 4019.80 results to 342.9499999 instead of 342.95;
    +fixed: 0.2 + 0.1 results to 0.300000000 instead of 0.3; referencing Google AI Overview with question: "example binary representation accuracy with addition?"
    +fixed: . cannot be entered when CLEAR is displayed instead of BACKSPACE
    

24. 20260606; http://store.usbong.ph/server/calc/calc20260606.html
    +updated: icon to have a sense of height
    +fixed: error that still occurs in the display of × and ÷ when accessing the app via the local network by further shortening the file name of the .png file; it's now calcalphaicon3.png instead of calcalphaiconUpdated.png
    

25. 20260608; http://store.usbong.ph/server/calc/calc20260608.html
    +fixed: 4494.25 - 4367.35 results to 126.8999999 instead of 126.9 by using toFixed(...) to reduce the numbers after the decimal point based on the max that there are initially;
    +updated: also addition operation accordingly to use toFixed(...);
    

26. 20260612 (CURRENT); http://store.usbong.ph/server/calc/calc.html
    +updated: layout on Android to make it easier to press the buttons
    

Get PhilNITS Certified!

https://philnits.org/

Open Source Software License

Copyright 2026 SYSON, MICHAEL B.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

@company: USBONG
@author: SYSON, MICHAEL B.
@website address: http://www.usbong.ph