Build a Simple JavaScript Calculator in Under 15 Minutes

Introduction

This short practice project helps beginners who are just starting to learn JavaScript to build a very simple calculator that supports addition, subtraction, multiplication, division, clear (AC), and delete (DEL) operations. The author first shares the code and then explains the reasoning so that readers can reproduce the result in less than 15 minutes.

HTML Part

The layout is built with a <table> element, and the display screen is set to disabled because it should not be directly editable.

CSS Part

The CSS simply defines width and height. It was tested in Firefox; because absolute units are used instead of percentages, the appearance may vary slightly in other browsers, but functionality remains unaffected.

JavaScript Part

Before looking at the code, the author explains the overall approach, which is divided into three parts.

Approach Explanation

The solution is split into three sections: (1) capture button values (except AC and DEL) and display them on the screen, (2) evaluate the expression shown on the screen, and (3) implement AC (clear) and DEL (backspace) functionality and debug any issues.

First Part: Capture Input to Screen

General JavaScript problem solving can be broken into three steps: obtain the element, store a reference, and then operate on it (often via iteration). The author obtains button elements and the display element, storing them in btn_txt and txt variables.

After storing the elements, event listeners are added to handle clicks.

The code distinguishes between numbers/decimal points and operators using if…else. For numbers, multiple digits can be entered, but only a single decimal point is allowed; a check ensures that a second decimal point is ignored.

When an operator is pressed, the display is cleared so the next number can be entered, while the current expression (numbers and operators) is saved in an array.

Second Part: Evaluate the Expression

When the equals sign is pressed, the stored expression array is evaluated to produce the result, and the array is cleared to prepare for the next calculation.

Third Part: Add AC and DEL Functions and Debug

The clear (AC) and backspace (DEL) buttons are obtained and stored in btn_way, then event listeners differentiate between the two actions.

A bug was discovered: pressing the decimal point as the first input should be interpreted as 0.. An additional check handles this case.

Finally, the script is wrapped in window.onload = function(){...} to ensure it runs after the page loads.

Full JavaScript Code