Project: Simple Calculator

Day 1 - Idea and HTML

I wanted to make something simple that actually works. I made a basic layout with a div calculator, a h1 and an input with readonly as display. Then I made 20 buttons inside a div buttons. I used onclick="appendValue()" for all number buttons so I don’t have to write many functions. I also added AC, backspace ⌫, % and Copy button at the end.

Day 2 - CSS

For styling I used flex to center the calculator in body, background #111827. Calculator box is #1f2937 with 340px width and border-radius 20px.
The main part is .buttons { display: grid; grid-template-columns: repeat(4, 1fr); } - this made 4 columns. I gave height 60px to all buttons.
For colors I used nth-child - first 2 buttons red #ef4444 for AC and backspace, every 4th, 8th, 12th, 16th yellow #fbbf24 for operators, 20th green #34d399 for Copy, and rest gray #6b7280. The hover is just opacity 0.85. I know nth-child is messy but it worked.

Day 3 - JavaScript Logic

This was the main part.

const display = document.getElementById("display") - I got the input.
appendValue(value) - just does display.value += value. Very simple.
clearDisplay() - makes it empty string.
backspace() - I used slice(0, -1) to remove last character. I learned this from MDN.
percentage() - I did Number(display.value) / 100. Wrapped in try catch so if error shows “Error”.
calculate() - This was tricky. My buttons show ÷ and × but JS eval() needs / and _. So I did expression.replace(/÷/g, "/").replace(/×/g, "_") before eval. I know eval is not safe but for small calculator project it’s okay. Also added try catch.
copyResult() - Used navigator.clipboard.writeText(display.value) and then alert “Copied!”. This only works on https but GitHub pages is https so it’s fine.

Problems I faced:

When I clicked ÷ it showed ÷ in display and eval was failing. Fixed with replace.
Copy button was giving error in VS Code live server because clipboard needs secure context.
My CSS nth-child selector was becoming long, especially the last one :not(:nth-child(1))... but I kept it.

What I learned:

How grid works, how to handle display as string and evaluate it, how slice works for backspace, and how clipboard API works.

Time: Around 6-7 hours total in 3 days.

Live Link: http://princekumar189344-netizen.github.io/Simple-Calculator/

This is my own code, I didn’t use any AI template for UI, I picked colors myself.

1 devlog
5h

Try project → See source code →

Open comments for this post

@princekumar on Simple Calculator · about 21 hours ago

4h 50m 13s logged

Devlog - Simple Calculator by @princekumar

What I built:

A simple web calculator. It can do +, -, x, ÷, percentage and has AC, backspace and a copy button. I made it with just HTML, CSS and JS. Link: http://princekumar189344-netizen.github.io/Simple-Calculator/

Why I built it:

I wanted to make something useful that I use daily. Also I was tired of making only games, so I thought a calculator would be a good small project to understand DOM manipulation properly. I started with just basic buttons and then added extra features.

How I built it:

The HTML is just a div with an input as display and buttons in a grid. In CSS I used display: grid with 4 columns for the buttons. I gave different colors - red for AC/backspace, yellow for operators, green for copy.

In JS, the logic is very simple:

appendValue() adds numbers/symbols to the display value.
clearDisplay() clears everything.
backspace() uses slice(0, -1) to remove last char.
For calculate(), I had a problem because my buttons show ÷ and × but JS needs / and *. So I used .replace(/÷/g, “/”) before using eval(). I know eval is not best practice but for this small project it was easiest.
percentage() just divides by 100.
copyResult() uses navigator.clipboard.writeText and shows an alert.

Challenges:

The display was showing 79266-9 type values when I clicked operators fast, I fixed it by making sure values just append.
Copy button was not working on http, it needs https, but GitHub pages is https so it works now.
I first used a lot of nth-child in CSS which became confusing, next time I will give classes to buttons.

What I learned:

How grid works, how to handle button clicks without making 20 functions, and how clipboard API works. Also learned that readonly input is better than div for display.