Hello everyone,
Welcome to my inaugural project of 2025: a basic arithmetic calculator. This article will provide a comprehensive overview of the project’s construction and thought process, from conception to completion.
As a preface, I dedicated the last two and a half months of 2024 to deepening my understanding of JavaScript. After completing a course to familiarize myself with its fundamentals, I embarked on a personal project to validate my acquired knowledge. This endeavor presented a suitable challenge, allowing me to gradually acclimate to the complexities of the language without feeling overwhelmed.
Having the project idea solidified, I began the construction phase.
The build
To initiate the development process, I outlined the functionalities I desired for the calculator. In my case, it should perform basic arithmetic operations: addition, subtraction, multiplication, and division. Based on this requirement, I identified the essential keys required for these operations: the numbers 0-9, mathematical operators, and a key to clear the calculation once initiated.
Next, I started implementing the vision into code, beginning with the structural HTML. This involved creating four rows of four buttons and the “clear” button in a separate row. Subsequently, based on the HTML layout, I added classes to the elements and applied styles using CSS to give the calculator a visually appealing design.
With the calculator component’s layout finalized, it was time to focus on implementing its functionality.
Adding JS
To begin adding functionality to the page, I started documenting the logic required to complete the tasks I needed the calculator to perform. These tasks included the ability to add numbers, perform a mathematical operation on those numbers, and then display the output of that operation.
The main JavaScript function of the calculator is to update the calculator. Let me explain how it works.
This function takes an input parameter. When the calculator was created, before adding event listeners to the page, each element had an onclick attribute that called this function and passed the button’s value as an argument.
To start, the function grabs the calculation variable. It starts as an empty string or whatever was stored in local storage. For this explanation, let’s assume it’s empty.
Next, the function checks the input. If it’s an equal sign, it evaluates the calculation using eval(calculation) to solve the math. If it’s not an equal sign, it checks the next if statement.
The second if statement checks if the input is a clear button. If it is, it clears the calculation and resets it to an empty string. If it doesn’t pass the test, it checks the third if statement.
The third if statement checks if the button input is a delete button. If it is a delete button, the update calculation function removes the last character of the calculation string each time it’s pressed. If it’s not a delete button, the function finally moves on to its else statement.
The else statement works if any other button on the calculator is pressed. It adds whatever number or operation sign is sent as the input to the calculation string. Then, it calls the next function I’ll be explaining to display the calculation and save it to local storage.
The second main function of the calculator is to show the calculation variable on the screen. To do this, we use the DOM query selector method to grab a paragraph element from the HTML. Then, we set the inner HTML of that element to display the value of the calculation variable. Finally, we make the variable visible on the screen using HTML.
The third and final function in the calculator app is to adjust the font size. This was one of the last things I added to the calculator project after all the testing and adding event listeners. I didn’t think of it initially. When I decided to add really big numbers for some reason, the calculations couldn’t fit on the screen and it became a mess. To fix it, I added a function that dynamically adjusts the font to fit inside its parent element.
The function starts by getting the width of the parent element of the element storing that width value in the max width variable.
Next, the function sets the font size to 30, which is the initial font size of the calculation window.
Next, the function enters a while loop that decreases the font size by 1px while the scroll width of the element is greater than the max width variable and while the font size is still greater than 10 px. It then resets the element font size to the new fitted size.
Once the first two main functions were done and everything was working smoothly, it was time to remove the onclick attributes from the HTML and add event listeners. I wanted this calculator to be usable with both the keyboard and the mouse, so I added both event listeners for click and keydown events. To get the value of the button when clicked, I replaced the onclick attributes with data-value attributes.
Challenges
The biggest challenge I faced with this project was the third function I mentioned earlier: reducing font size. I wasn’t sure how to do it, but knowing what I wanted to achieve was a great starting point to solve this problem. After searching Google, changing some CSS, writing a few (more than a few, let’s be honest), failing functions, and trying some AI suggestions, I finally got my font issue sorted.
Future modifications
I plan to come back to this project and add some new features. One idea I have is to add a button that lets you switch between the current state and a scientific mode. This mode would give you access to more buttons and advanced formulas and functions.
Conclusion
Overall, I had a great time learning and building this project. It’s always rewarding to see a finished, working, real-world project that you’ve created yourself. I always encourage people to keep learning and growing, both inside and outside their field. Challenge yourself with projects or goals that push you outside your comfort zone, and don’t forget to have fun! Learning, growing, and developing skills is a blessing, and you should enjoy the process, the challenges, and the progress you make.
Thanks for taking the time to look, cheers!
Top comments (1)
Good job!