alexflorides / javascript-calculator

A simple calculator built using HTML, CSS and JavaScript

Javascript Calculator

---

A simple calculator built using vanilla HTML, CSS and JavaScript.

Controls / Functionality

• Can be controlled using either mouse / touchscreen or by using the keyboard pressing the corresponding keys.

• Decimal point can be inserted using both comma or dot key on the keyboard.

• Backspace deletes last digit.

• By keep pressing the equal operator will recalculate result based on the last operation.

• Last operation will show up above the input box every time any of the operators is selected.

Demo

Contributions

• Feel free to suggest any improvements by creating an issue.

• You can also work on an already open issue and pull request when finished, so I can review the changes and eventually merge them to the base branch.

javascript-calculator's Issues

Add x² and √ functions

The power of two (x²) and square root (√) are also part of most basic calculators and easy to implement. It would be good to have.

percent button (%) may be faulty

Behaviourally, the percent button doesn't work as it does on iOS. An issue seen when trying:

• 100 (x) 35 (%) (=) is that the calculator shows 0.35 x 0.35 = 0.1225 whereas on iOS or MacOS the same sequence of buttons will return the value "35"
• 100 (+) 35 (%) (=) will result in an output of 35 + 35 = 70 whereas on iOS or MacOS the same sequence of buttons will return the value "135"

Can i add licence MIT

Can i add the MIT licence to the project ?

Comma and dot keys should both work as decimal point

Some countries use dot, others use comma as decimal point.
Both comma and dot keys should work on the keyboard as decimal point.

Floating-point Precision errors

There were often some errors in the precision of even simple floating-point results.
For example, the application evaluated (0.2)^2 as 0.04000...01, when the application could instead simply keep it as 0.04 .

uni-code issue rendering on ipadOS

came across an issue where if server is not explicit about unicode the render will fail on an ipad - adding the below to the index.html head resolved the issue:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Screenshot of error:

Make backspace to delete the last digit

Add a button and make the backspace key to delete the last digit.

Add 1/x and +/- functions

1/x and +/- functions make any calculator much more usable and they are not hard to implement.

Enhancement Feature: Simple Complex Number Handling

Noticed that, on this application, taking the square root of -1 resulted in NaN, as JavaScript would naturally evaluate it to.

Although most simple calculator applications do this, perhaps it would be a good idea to extend the calculator's abilities to operations with imaginary & complex numbers, or at least simple operations such as square root of negative numbers and arithmetic with complex numbers.

Of course, simple arithmetic with complex numbers would require an alternative functionality that differentiates them from real numbers, such as an "i" button.

This is effectively and efficiently possible using the math.js library.

My Idea for improve and changes

I think it's width size we cn be increased for pc/desktop size and phone size is good and apply shadow for make a more interactive.

Paste number into the display field

You can already copy the result number from the output field.
It would be great if you could paste in as well (not appending to the existing number but overwriting it).

With this you can skip the implementation of the memory functions, since the clipboard can be used in almost all cases instead.

History function - Show last operation

In the Windows Calculator we have a very useful function to verify if our input was correct.
Whenever you activate an operator it puts the number and the operator above the display with smaller letters.

Even if the full history is not preserved like in Windows Calculator, just showing the last operation helps a lot to the user to see what he has calculated.

Praise

Hi Alexandros,

You have probably made this calculator to practice programming, but I can tell you that it's the best JavaScript based calculator out there. And I have checked more than 30 different ones...
It's great that the numerical keyboard is working as input, great styling, great exception handling of division by zero. Overall very nice.
I will make a few suggestions on how to improve it further if you are interested in improving it.

BRs
/Andras

History Display

The history of the operation displays outside the dashboard. For example, when I type 8 + 8, it displays outside the dashboard. Only the answer displays inside the dashboard