WebCalculator

This is a Progressive Web App (PWA) for a simple calculator built using vanilla JavaScript. It includes several advanced features:

1. Offline Functionality: Operates seamlessly offline, leveraging Service Workers for caching.
2. Auto Completion: easily complete long expressions using auto complete for brackets
3. Calculation History: Tracks and displays a history of past calculations.
4. Dark and Light Mode: Provides a toggle between dark and light themes for enhanced usability in different lighting conditions.

The app is designed to be fast, responsive, and user-friendly, making it a versatile tool for quick calculations on the go.

Experience the demo, by clicking here

Examples

laptop.mp4

ipad.mp4

iphone.mp4

---

Working of the calculator

The calculator implements a parser and evaluater built from scratch. Hence, this section is aimed at giving an overview of the parser and evaluator.

Workflow of calculator

1. Perform translation
2. Perform Pre checks
3. Remove all syntax sugars
4. Perform Post checks
5. Make the data structure by analyzing characters left to right and inside-out
6. Iteratively computing the DS with a depth first approach

Translation

1. changes the symbol of multiplication and division to simple form ✅
2. Removes any commas ✅

Pre Check

1. check that % operator is not followed by a number ✅

Syntax sugars

1. Exact string . represents 0
2. +- becomes - ✅
3. a bracket right after a number has implicit multiplication ✅
4. ---.. becomes + or - depending on count and +++... becomes + ✅
5. Add implicit 0 before + and - if a number is missing ✅
6. % becomes *0.01 called as expanding the percent symbol ✅
7. add brackets to follow BODMAS rule (indstead modified evaluation rules) ✅
8. decimal point should have numbers on both side (js can handle vague decimal cases) ✅

Post Check

1. check that each operator has two operands except (% should be followed by *) ✅
2. check that no two operators are consecutive ✅ Solved by the first check

Evaluator

The evaluator is quite complex but it does the following steps in the given order

1. Generate an intermediate data structure to represent the expression. This data structure is comprises of various data types such as numbers, strings for operators and nested arrays for brackets
2. The evaluator iteratively evaluates the the expression from left to right for each operator as specified by the BODMAS rule.
3. Whenever a Array(brackets) is encountered, it recursively first evaluates the sub expression insider the array(brackets)
4. The intermediate data structure is worked on repeatedly until it contains only a single number, the answer or is error.

Attributions:

I highly recommend checking out the following resources:

1. favicon Flaticon-keys

Future TODOs

1. Add Commas according to international system of counting only for visual component

TODOs

1. Test Fetures and styling on different devices
2. Fix Error and Nan situations
3. Fix Solving algorithm
4. Polish the PWA Features
5. Handle case where many digits are displayed
6. Add 2 themes only, dark and light [partially done]
7. Refactor Code
8. Decrease font size for output if large number needs to be displayed
9. Last number should not be displayed on the screen
10. single decimal point gives Nan
11. ~~Add syntax sugar for + as -- ~~
12. Fix Styling for History tab
13. Make the app a PWA
14. Add more themes Scraped for only two themes
15. Add Keyboard Support for the calculator
16. Add dark mode option for background only
17. clicking on a history cell copies the answer to clipboard
18. clicking equals and then calculating should copy the value from previous answer
19. Add logic to pick random color pallete from group of palletes
20. CSS polishing
21. Copy the latest answer to clipboard when equals is clicked
22. Add togglable Dark Theme Scrapped
23. Design portrait friendly css as part of Mobile-first design
24. add JS to deal with history tab in different orientations
25. Design Landscape css
26. Use decimal.js for floating point arithmetic
27. debug the issue of (1)-(1)
28. Add cursor, so that the user can edit mistakes inbetween the expression Scrapped
29. Formula in the history tab should have space beside operators for better visibility
30. recheck the evaluation rule of %
31. Add History
32. adding opening bracket at the start leads to NaN
33. Add % and power operators
34. Add Auto Compute feature
35. CSS pending
36. Add Syntax Sugars
37. Add checks
38. Add Floating Point numbers
39. Add modulo operators