DEV Community

Cover image for I Built a Calculator with HTML, CSS & JS — Here's What I Learned
DHANRAJ S
DHANRAJ S

Posted on

I Built a Calculator with HTML, CSS & JS — Here's What I Learned

#javascript #beginners #css #html

Hey!

I built a calculator using HTML, CSS, and JavaScript.

It's a small project. But it taught me things that hours of tutorials didn't.

Let me walk you through what I built — and what clicked for me along the way.

1. What the Calculator Does

  • Type numbers and operators on the screen
  • Press = or Ans to get the result
  • Press C to clear everything
  • Press Del to delete the last character

Simple. Clean. And building it yourself hits different.

2. The HTML — Screen + Buttons

<input type="text" id="result">

<div class="btn">
  <button onclick="clearDisplay()">C</button>
  <button onclick="appendValue('/')">÷</button>
  <button onclick="appendValue('*')">×</button>
  <button onclick="deleteLast()">Del</button>
  <!-- number and operator buttons -->
  <button class="equal" onclick="calculate()">=</button>
</div>
Enter fullscreen mode Exit fullscreen mode

<input id="result"> → the display screen. Shows numbers and the final answer.

Every button has onclick → clicking it runs a JavaScript function.

That's the whole structure. Nothing fancy.

3. The CSS — Dark Look with Grid Layout

Background gradient:

body {
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
}
Enter fullscreen mode Exit fullscreen mode

Three colors blending together — gives that rich dark feel.

The button grid:

.btn {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
Enter fullscreen mode Exit fullscreen mode

repeat(4, 1fr) → 4 equal columns. Grid handles all the positioning automatically.

*Quick question for you *

Why does the 0 button look wider than the rest?

.zero {
  grid-column: span 2;
}
Enter fullscreen mode Exit fullscreen mode

span 2 → the zero button takes up 2 columns instead of 1. One line. That's it.

Hover effect:

button:hover {
  background: #555;
  box-shadow: 0 1px 6px rgba(174, 167, 167, 0.91);
}
Enter fullscreen mode Exit fullscreen mode

transition: 0.2s on the button makes the hover smooth — not a sudden jump. Makes the calculator feel alive.

4. The JavaScript — Just 4 Functions

const result = document.getElementById("result");

function appendValue(value) {
  result.value += value;
}

function calculate() {
  result.value = eval(result.value);
}

function clearDisplay() {
  result.value = "";
}

function deleteLast() {
  result.value = result.value.slice(0, -1);
}
Enter fullscreen mode Exit fullscreen mode

4 functions. That's the whole brain of this calculator. Let's go through each one.

5. appendValue() — Builds the Expression

function appendValue(value) {
  result.value += value;
}
Enter fullscreen mode Exit fullscreen mode

Every button click adds a character to the screen.

Press 4 → screen shows 4.
Press + → screen shows 4+.
Press 3 → screen shows 4+3.

Just adding characters one by one. Simple.

6. clearDisplay() and deleteLast()

function clearDisplay() {
  result.value = "";        // wipes everything
}

function deleteLast() {
  result.value = result.value.slice(0, -1);  // removes last character
}
Enter fullscreen mode Exit fullscreen mode

clearDisplay → sets screen to empty. Fresh start.

deleteLast → .slice(0, -1) means "keep everything except the last character."

So 123+ becomes 123. Press again → 12. That's your backspace.

7. calculate() and eval() — The Interesting One

function calculate() {
  result.value = eval(result.value);
}
Enter fullscreen mode Exit fullscreen mode

Quick question for you

If the screen shows "45+3" — that's just a string. Plain text.

How does JavaScript know it's math?

That's where eval() comes in.

eval("45+3")   // 48
eval("10*5")   // 50
eval("100/4")  // 25
Enter fullscreen mode Exit fullscreen mode

eval() takes a string and runs it as JavaScript code. So "45+3" becomes actual math — and returns 48.

One line. Whole calculator works.

One thing I learned though →

eval() is powerful but risky in real apps. If someone types harmful code, eval will run it. For a personal project like this — totally fine. For a real app — use a safer math library.

Good to know.

8. What This Project Actually Taught Me

  • CSS Grid — I always used Flexbox. This project made me finally use Grid properly.
  • grid-column: span 2 — one line to make a button wider. Didn't know this before.
  • .slice(0, -1) — negative numbers in slice. Small but useful trick.
  • eval() — what it does, why it works, and when not to use it.

You don't learn these things from tutorials. You learn them when you need them.

You can see my project here: https://dhanraj166.github.io/frontend-projects/calculator.html/

Thanks for reading! Keep building

Top comments (0)