My Journey of Building a Functional Calculator: How I Overcame My JavaScript Struggles
Hello everyone, Welcome back to Mayur's Tech Journey.
When I started my engineering journey, I always wanted to create something practical. Many students focus only on theory, but I believe that true learning happens when we build projects. Today, I am very happy to share my first web development project: A simple Calculator.
The Initial Struggle with JavaScript :
To be honest, learning JavaScript was not easy for me at first. I was in learning syntax, but the logic felt like a big threat. There were times when I sat in front of my tablet for hours, trying to understand how to connect a button click to a mathematical operation. It felt like I was stuck in a loop.
However, I did not give up. I realized that to be a good engineer, I needed to neutralize these technical fears. I started breaking down the problem into small parts: first the design, then the display, and finally the logic.
How I Built the Project :
I used the three pillars of web development to complete this project: HTML, CSS, and JavaScript.
1. Designing with HTML and CSS :
I wanted the calculator to look professional and work on mobile phones.
- HTML Structure: I used a clean setup where every button has a specific 'onclick' function. I even added a special MTJ (Mayur’s Tech Journey) button that links back to my blog.
- CSS Grid: To make the buttons look perfectly aligned, I used the CSS Grid property. I set up four columns so that the layout stays symmetric on every screen size.
- Visuals: I chose a white background with a nice orange-themed accent color for the important buttons. This makes the UI very user-friendly.
2. The Logic with JavaScript :
This is where I really leveled up my skills. I wrote functions to handle the input and the final calculation.
- Handling Input: I created a function called appendToDisplay that takes whatever button you press and adds it to the screen.
- Solving the Expression: I used the eval() function to calculate the result.
- Handling Errors: This was a very important step. I used try...catch blocks. If a user enters something wrong (like two plus signs together), the calculator does not crash. Instead, it shows a message: "Error. Incorrect expression." This makes the app robust and professional.
function calculate(){
try {
display.value = eval(display.value);
} catch (e) {
display.value = "Error. Incorrect expression.";
}
}
![]() |
| Desktop interface of Calculator |
![]() |
| Mobile interface of Calculator |
![]() |
| Tablet interface of Calculator |
Why this Project Matter :
Building this calculator taught me more than any textbook could. It taught me that it is okay to struggle with code as long as you keep trying. I have moved from being an "average" student to someone who can build working software.
For my 376 global readers, I want to say: Don't be afraid of the "hated questions" or the difficult subjects. Just start building. Once you see your code working, all the struggle feels worth it.
Check out my Calculator : Calculator
Github: https://github.com/engineermayur-07/Calculator-using-JS
I am now 100% ready for the challenges of 2026!
Signing off,
M. B. Gund
Also read :
The Boy Behind the Percentile: A Memory of 12:07 AM
Mayur’s Tech Journey ; From Village to Virtual: My Code for Change
Fueling the Code: New Milestones and the Power of Pride



Comments
Post a Comment