This project documents the journey of building a functional web-based calculator, evolving through three distinct versions of design and logic.
The final iteration features a sleek, dark-themed UI with a modern circular button layout and advanced JavaScript logic.
- Floating Point Correction: Fixes binary rounding errors (e.g.,
1.1 - 1 = 0.1). - Chain Calculations: Allows continuing math operations on previous results.
- Smart Operator Input: Prevents consecutive operators (e.g.,
+++) by replacing the last one entered. - State Management: Intelligently clears the screen when starting a new calculation after a result.
A transitional phase focusing on a cleaner grid layout and improved color contrast using a table-based structure.
The initial prototype exploring basic HTML structure, table layouts, and core CSS styling.
- HTML5: Structured semantic markup.
- CSS3: Custom layouts, Flexbox, and Google Fonts integration.
- JavaScript (ES6+): Event delegation, string manipulation, and mathematical evaluation.
calc_v[1-3].html: The entry points for each version.style_v[1-3].css: The evolution of the visual design.script.js: Core logic shared and improved across versions.