What you're actually building
A calculator you make yourself is a program that takes numbers you type in, performs math on them, and shows you the answer. The simplest version adds two numbers together. A more complete one handles addition, subtraction, multiplication, and division. You can build one in a few hours using free tools that run in your web browser — no special software to download, no coding experience required.
The three parts you need are a display (where the answer shows up), buttons (where you click the numbers and operations), and the logic underneath (the code that actually does the math). You'll write this using HTML for the buttons and display, CSS to make it look decent, and JavaScript to make it work.
Key Takeaways
- A basic calculator needs three components: a display screen, number and operation buttons, and JavaScript code that performs the math.
- You can build a working calculator in HTML, CSS, and JavaScript using only a text editor and a web browser.
- Start with addition and subtraction, then add multiplication and division once the basic structure works.
- Test each button as you build it so you catch mistakes early instead of debugging a broken calculator at the end.
Setting up your workspace
Open a text editor — Notepad on Windows, TextEdit on Mac, or any free editor like Visual Studio Code. Create a new file and save it as calculator.html. This single file will hold your HTML, CSS, and JavaScript all together.
At the top of the file, type the basic HTML structure that every webpage needs. This tells the browser what it's looking at and where to find the styling and code:
<!DOCTYPE html> <html> <head> <title>My Calculator</title> </head> <body> </body> </html>
Save the file. Now open it in your web browser by dragging it into a browser window or right-clicking and choosing "Open With". You should see a blank page with "My Calculator" in the tab. This is your starting point.
Building the display and buttons
Between the <body> tags, add a container that holds everything. Inside that, add a display box where the numbers and answer will show, then add rows of buttons for the numbers 0 through 9 and the operations:
<div id="calculator"> <input type="text" id="display" readonly> <button onclick="appendNumber('7')">7</button> <button onclick="appendNumber('8')">8</button> <button onclick="appendNumber('9')">9</button> <button onclick="setOperation('+')">+</button> </div>
The input tag creates the display box. The readonly attribute stops the user from typing directly into it — they can only click buttons. Each button has an onclick attribute that tells the browser what to do when someone clicks it. Right now those functions don't exist yet, but you'll write them next.
Add all the number buttons (0 through 9) and operation buttons (+, −, ×, ÷). Also add a button for the equals sign and one to clear the display. This gets repetitive, but each button is identical except for the number or symbol it shows.
Making it look like a calculator
Between the <head> tags, add a <style> section. This CSS code makes your buttons look like a real calculator instead of a plain list:
<style> #calculator { width: 300px; margin: 50px auto; } #display { width: 100%; font-size: 24px; padding: 10px; margin-bottom: 10px; } button { width: 70px; height: 70px; font-size: 18px; margin: 5px; } </style>
This centers your calculator on the page, makes the display box wide and readable, and arranges the buttons in a grid. Adjust the numbers if you want bigger or smaller buttons. Save the file and refresh your browser to see the changes.
Writing the code that does the math
Between the </body> and </html> tags, add a <script> section. This is where the JavaScript goes that actually makes the calculator work:
<script> let display = document.getElementById('display'); let currentNumber = ''; let previousNumber = ''; let operation = null; function appendNumber(num) { currentNumber += num; display.value = currentNumber; } function setOperation(op) { if (currentNumber === '') return; previousNumber = currentNumber; currentNumber = ''; operation = op; } function calculate() { if (operation === null || currentNumber === '') return; let result; if (operation === '+') result = parseFloat(previousNumber) + parseFloat(currentNumber); if (operation === '−') result = parseFloat(previousNumber) − parseFloat(currentNumber); if (operation === '×') result = parseFloat(previousNumber) * parseFloat(currentNumber); if (operation === '÷') result = parseFloat(previousNumber) / parseFloat(currentNumber); display.value = result; currentNumber = result; operation = null; } function clearDisplay() { currentNumber = ''; previousNumber = ''; operation = null; display.value = ''; } </script>
Here's what each function does: appendNumber adds a digit to the number you're typing. setOperation saves the first number and remembers which operation you chose. calculate does the actual math using the two numbers and the operation. clearDisplay wipes everything and starts over.
Update your equals button to call the calculate function and your clear button to call clearDisplay. Save and test by clicking buttons in your browser. Type 5 + 3 and press equals — you should see 8.
Testing and fixing problems
Click through each button and write down what happens. Does 7 + 2 = 9? Does 10 − 3 = 7? Does the clear button wipe the display? If a button doesn't work, check that the function name in the onclick attribute matches the function name in your script section exactly.
A common mistake is forgetting to add a button for decimal points. If you want to calculate 3.5 + 2.1, add a button that appends a period: <button onclick="appendNumber('.')">.</button>. Another common issue is division by zero — your calculator will show "Infinity" if someone divides by 0. You can add a check in the calculate function to prevent this, but for a first version it's fine to leave as is.
If your calculator stops working after you change something, undo that change and test again. This is how you find which line broke it. Save frequently so you always have a working version to go back to.
Making it your own
Once the basic math works, you can add features. Change the button colors in the CSS by adding background-color: blue; to the button style. Make the display bigger or add a dark mode by changing the background color of the body. Add a square root button that calls a new function using Math.sqrt().
You can also change how it looks completely — make it round, add a dark theme, arrange buttons differently. The math part stays the same; only the HTML and CSS change. This is the advantage of building it yourself: you control every part.
Frequently Asked Questions
Can I save my calculator and use it later?
Yes. Your calculator.html file is just a text file. Keep it anywhere on your computer and open it in your browser anytime. You can email it to someone else and they can open it too — no installation needed.
What if I want to add more operations like square root or percentage?
Add a button with onclick="appendNumber(Math.sqrt(currentNumber))" for square root, or write a new function for percentage. The pattern is the same: create a button, write a function, and connect them with onclick.
Why does my calculator show weird decimals like 0.30000000000000004?
This is how computers store decimal numbers — it's a limitation of how they work, not your code. To fix it, round the result to fewer decimal places using result.toFixed(2) to show only two decimals.
Can I make it work on my phone?
Yes. Email the calculator.html file to yourself, download it on your phone, and open it in your phone's browser. It works the same way. For a better phone experience, add <meta name="viewport" content="width=device-width"> in the head section so it sizes itself to your screen.
What if I want to add a history of past calculations?
You would need to store each calculation in a list and display it on the page. This requires more JavaScript, but the idea is the same: create a function that saves each result, then loop through the list to show them. Start with a working calculator first, then add this feature later.