My Trainer, Mr.Vijayaragavan sir, gave me the task on a regular Tuesday. Just Basic instructions. No starter files. Just three words: build a calculator.
I nodded like I knew exactly what I was doing.
I did not.
I opened my code editor, stared at a blank HTML file for ten minutes, typed <div> and then deleted it. I did that three times. The blinking cursor felt personal. I had learned HTML. I had watched CSS tutorials. I had read about JavaScript. But the moment someone said "now go build something real," all of that evaporated.
Here is what we are going to cover:
- How CSS Grid saved me when I had no idea how to lay out those buttons
- The CSS styling tricks I picked up from forums that I had never seen in any tutorial
- The JavaScript logic that makes a calculator actually work — and why it is more interesting than it looks
1. The Layout Problem I Did Not See Coming
The first thing I tried to do was lay out the buttons. A calculator has a grid — four columns, multiple rows. Simple enough on paper.
I tried using float. The buttons went everywhere. I tried inline-block. Better, but not right. I kept adjusting margins like I was trying to balance furniture in a room with no walls.
Then someone in a forum mentioned CSS Grid.
I had heard of it. The moment I read the docs properly, I felt that specific kind of frustration that comes right before something clicks — where you understand every word individually but not what they mean together.
CSS Grid is a layout system that lets you divide a container into rows and columns, and then place elements inside those divisions exactly where you want them. Think of it like drawing a table on a piece of paper and then putting things in specific cells.
Here is the part that actually solved my problem:
/* Grid layout that creates the 4-column calculator button structure */
#calbutton {
display: grid;
grid-template-columns: auto auto auto auto;
padding: 10px;
}
What just happened: display: grid turns the container into a grid. grid-template-columns: auto auto auto auto tells the browser to create four equal columns. Every button I put inside that container automatically falls into the next available cell. No floats. No manual positioning.
But there was one more thing. A calculator's zero button spans two columns — it is wider than the others. I did not know how to handle that without breaking the whole grid.
The answer was one line of CSS I would never have found without a forum:
/* Makes the last button span 2 columns if it lands in the 3rd column position */
.button:last-child:nth-child(4n - 1) {
grid-column: span 2;
}
What just happened: this selector targets the last button only when it falls in a specific position in the grid, then stretches it across two columns. It sounds complicated. Once I read what each part meant, it was almost elegant.
That one line saved me an hour of manual adjustments.
2. The CSS Styling I Picked Up Along the Way
I want to be honest about something. When I started, I thought CSS was just colors and fonts. I had no idea it could do what I ended up using it for.
The background of my calculator uses an animated gradient — a background that slowly shifts through a range of colors. I found this on a CSS tricks forum and modified it. I did not invent it. But I understood it by the time I was done.
/* Animated gradient background that cycles through multiple colors */
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab, green, yellow);
background-size: 400% 400%;
animation: gradient 15s ease-in-out infinite;
}
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
What just happened: linear-gradient creates a gradient using six colors at a diagonal angle. background-size: 400% 400% makes the gradient much larger than the screen, so there is room for it to move. The @keyframes gradient block defines the animation — it shifts the background position slowly over 15 seconds, creating the illusion that the colors are flowing. infinite means it never stops.
The thing that surprised me most was how much CSS can feel like writing a small story. You define what something looks like, then you define how it changes over time. That felt creative in a way I did not expect from styling a webpage.
I also learned to respect border-radius. My buttons needed rounded corners to feel like a real calculator. One property, fifteen pixels, and suddenly the whole thing stopped looking like a school project.
3. The JavaScript Logic — Where Things Got Real
The layout was hard. The styling was interesting. But the JavaScript is where I actually understood what building something means.
A calculator needs to do four things: remember the first number you typed, remember the operator you chose, wait for you to type the second number, and then compute the result when you press equals. That is it. But translating that into code was not obvious to me.
Here is what I built:
// Core calculator logic — tracks operand1, operator, and operand2 across button clicks
var operand1 = 0;
var operand2 = null;
var operator = null;
function isOperator(value) {
return value == "+" || value == "-" || value == "*" || value == "/";
}
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function () {
var value = this.getAttribute('data-value');
var text = display.textContent.trim();
if (isOperator(value) == true) {
operator = value;
operand1 = parseFloat(text);
display.textContent = "";
} else if (value == "=") {
operand2 = parseFloat(text);
var result = eval(operand1 + ' ' + operator + ' ' + operand2);
if (result) {
display.textContent = result;
operand1 = result;
operand2 = null;
operator = null;
}
} else {
display.textContent += value;
}
});
}
What just happened: every button on the calculator has a data-value attribute in the HTML. When you click a button, the event listener reads that value. If the value is an operator like + or -, it stores the current number on screen as operand1, saves the operator, and clears the display so you can type the second number. When you press =, it reads the second number as operand2, builds a math expression as a string, and uses eval() to calculate it.
The eval() function takes a string like "5 + 3" and evaluates it as if it were code. It is powerful. It is also something senior developers will tell you to use carefully in real production apps — because if someone passes malicious code as input, eval will run it. For a personal project and for learning the concept, it works perfectly.
What I kept getting wrong early on was the order of operations inside my head. I kept thinking: why does the display go blank when I press plus? Because I am clearing it to make room for the second number. Once I drew that flow out on paper — first number, operator, second number, equals — everything made sense.
The One Thing I Would Tell Someone Starting This
Do not wait until you feel ready to build something. I was not ready. I got stuck in real ways. I had to ask strangers on the internet for help and sit with the embarrassment of not knowing things I thought I should already know.
But the calculator I built by struggling through it taught me more than three weeks of following along with tutorials. Not because the struggle is romantic or necessary — but because real problems force you to actually think, not just copy.
You can see the finished calculator here: https://ebenezer6374-arch.github.io/Calculator/
It is not perfect. There are things I would change now that I know more. But it works. I built it. And a week ago I was staring at a blank file wondering how to start.
What This Actually Taught Me
You now know that a JavaScript calculator is not magic. It is three variables, a loop, a few conditions, and one grid. And knowing that should change how you look at the next "simple" thing someone asks you to build — because simple is almost never simple until you have been through it once.
Pick one project this week. Something small. A to-do list, a tip calculator, a random quote generator. Build it without a tutorial. Get stuck. Go to any soure you want . Come back.
What is the project you have been putting off because you did not feel ready yet? Drop it in the comments — I want to know what you are building.
Top comments (0)