Ending the foundations stage, and keep moving forward!
Before I even reached this last module, many modules way back, I already knew what I wanted to do with my calculator before I even got there! But, for that, I had to reach that point, without skipping the lessons, as it is important to understand everything. That is how the vision was planned in my mind from the start!
The calculator itself was worth the challenge! Because it is not just about math, but also about bringing all the feelings, and make it bleed, and feel with purpose. That’s why the preassigned calculator from the assignment was the guide to bring that vision come to life! Here it is about orchestrating asynchronous user inputs (the mouse, and keyboard interactions), and handling edge cases gracefully. Extras just follow the script, and move on, while I just use the base to make something of my very own!
Below is a technical breakdown of this calculator that was the finishing touch to the introduction of vanilla Javascrpt.
1/ The Frankestein numerical set up
Do I even need to explain what a calculator is for? This is just about creating a digital one. Because if you don’t have a physical one, and you don’t want a cookie-cutter calculator that you are already provided with, why don’t you make your own? Anyways, to not make the DOM CONFUSED, we have to stay everything clearly,as always.
Our structure has the following variables:
~firstNumber: Stores the initial operand or the accumulated result of a previous operation.
~currentOperator: Tracks the active mathematical operators
~secondNumber: Captures the incoming operand
~resetDisplayNext: A Boolean flag that signals wether the next digit input should clear the screen (activated immediately after an operator is selected)
~justCalculated: Prevents compounding evaluation errors immediately after hitting = . It ensures absolute precision
Javacript by default, speciallly at vanilla level, is a true test in itself. A rigurous rounding utility was implemented. A real calculator cannot fail. Why? Because that is its purpose, its meaning, if you cannot calculate as a calculator, then what are you?
The initial stage were manageable, it was in its progress that there was more to do.
Mad with the Math & Safety Layering
This can turn quickly into a horror story on how Javascript gets to handle the floating-point arithmetic. To prevent native floating-point precision errors (e.g., 0.1 + 0.2=0.30000000000000000000000000004), a custom rounding utility needs to be implemented. To escape this- by calculating the number of decimal places in the operands and applying a multiplier (e.g, multiplying by 10^n before the operation, and viding by 10^n after), the application guarantees absolute accuracy….Or at least if you code it correctly.
Syntax is also important, and always look for typos!
##3/ Ascensation towards asynchronous inputs fully
Handling user input requires strict discipline. We implemented a unified event delegation strategy, ensuring that both keyboard keydown events and mouse clicks route through the exact same validation pipeline. Half implementation of logic, and half of philosophy, like the existential crisis that I am having as I am writing this.
/Input.sanitizer: Prevents users from inputting multiple decimal points or breaking the parsing logic with overlapping operators.
/Error.handler: If a user attemps to divide by zero, the system doesn’t crash; it triggers the disgraceful ERR_DIV_ZERO state, locking the interface until a reset is initiated. It’s a foolproof containment protocol.
**
4 UI philosophy**
The visual layer must feel right, or else it breaks the mood, and the atmosphere, and this is part of making a web app fully responsive. If it doesn’t look right, it cannot feel right! That is why checking countless times is crucial in here! The perfect alignment- it is all about aligning your soul with the code. If the grid, if every line is correct, it will show.
Anyways, for the assignment, I kept purely minimal, and minimalist. In a way, the follow-up project also has this type of design, because I felt that it was important to not have distractions, and the let the focus be on our star: the calculator itself. So, it is dark, and the calculator is dark too. I personally do not want something that would hurt my eyes more! The way it is just works for me.
I am sorry- personal issues aside- I cannot explain well-enough to a cookie-cutter assignment. It does not bring the same excitement than when making something of my own. Don't get me wrong, this was an exciting project, but it feels like on another level to just follow my vision with creative pursuits.
Top comments (0)