gistlib - write a simple calculator in javascript

To write a simple calculator in JavaScript, we will also be leveraging HTML and its input element to receive user input. We will make use of the addEventListener method to capture the user’s click on the calculator buttons, and eval() to carry out the calculations.

Firstly, let’s create the HTML structure of the calculator:


index.tsx
<body>
    <h1>My Calculator</h1>
    <input type="text" id="screen" disabled>
    <div id="calculator">
        <button id="btn-clear">C</button>
        <button id="btn-backspace">CE</button>
        <button id="btn-divide">/</button>
        <button id="btn-multiply">*</button>
        <button id="btn-seven">7</button>
        <button id="btn-eight">8</button>
        <button id="btn-nine">9</button>
        <button id="btn-subtract">-</button>
        <button id="btn-four">4</button>
        <button id="btn-five">5</button>
        <button id="btn-six">6</button>
        <button id="btn-add">+</button>
        <button id="btn-one">1</button>
        <button id="btn-two">2</button>
        <button id="btn-three">3</button>
        <button id="btn-equals">=</button>
        <button id="btn-dot">.</button>
        <button id="btn-zero">0</button>
    </div>
</body>
879 chars
25 lines

Next, in our script file, let's select all the buttons and the input element:


index.tsx
const buttons = document.querySelectorAll('button');
const inputScreen = document.querySelector('#screen');
108 chars
3 lines

We will then loop through all the buttons and add an event listener to each:


index.tsx
buttons.forEach(button => {
    button.addEventListener('click', () => {
        // code to be executed when the button is clicked
    });
});
143 chars
6 lines

We will now write the code to display the user's input on the input screen:


index.tsx
buttons.forEach(button => {
    button.addEventListener('click', () => {
        inputScreen.value += button.textContent;
    });
});
134 chars
6 lines

Next, let's add the logic to clear the input field:


index.tsx
const clearBtn = document.querySelector('#btn-clear');

clearBtn.addEventListener('click', () => {
    inputScreen.value = '';
});
131 chars
6 lines

The next button we will handle is the backspace button with the id, btn-backspace. When clicked, it will remove the last character of the input screen:


index.tsx
const backspaceBtn = document.querySelector('#btn-backspace');

backspaceBtn.addEventListener('click', () => {
    inputScreen.value = inputScreen.value.slice(0, -1);
});
171 chars
6 lines

We will then add the arithmetic operators buttons with their respective logic: addition, subtraction, division, and multiplication:


index.tsx
const divideBtn = document.querySelector('#btn-divide');
const multiplyBtn = document.querySelector('#btn-multiply');
const subtractBtn = document.querySelector('#btn-subtract');
const addBtn = document.querySelector('#btn-add');

divideBtn.addEventListener('click', () => {
    inputScreen.value += '/';
});

multiplyBtn.addEventListener('click', () => {
    inputScreen.value += '*';
});

subtractBtn.addEventListener('click', () => {
    inputScreen.value += '-';
});

addBtn.addEventListener('click', () => {
    inputScreen.value += '+';
});
547 chars
21 lines

The number buttons are next. The buttons will simply add the number the user clicked to the input screen:


index.tsx
const sevenBtn = document.querySelector('#btn-seven');
const eightBtn = document.querySelector('#btn-eight');
const nineBtn = document.querySelector('#btn-nine');
const fourBtn = document.querySelector('#btn-four');
const fiveBtn = document.querySelector('#btn-five');
const sixBtn = document.querySelector('#btn-six');
const oneBtn = document.querySelector('#btn-one');
const twoBtn = document.querySelector('#btn-two');
const threeBtn = document.querySelector('#btn-three');
const zeroBtn = document.querySelector('#btn-zero');
const dotBtn = document.querySelector('#btn-dot');

sevenBtn.addEventListener('click', () => {
    inputScreen.value += '7';
});

eightBtn.addEventListener('click', () => {
    inputScreen.value += '8';
});

nineBtn.addEventListener('click', () => {
    inputScreen.value += '9';
});

fourBtn.addEventListener('click', () => {
    inputScreen.value += '4';
});

fiveBtn.addEventListener('click', () => {
    inputScreen.value += '5';
});

sixBtn.addEventListener('click', () => {
    inputScreen.value += '6';
});

oneBtn.addEventListener('click', () => {
    inputScreen.value += '1';
});

twoBtn.addEventListener('click', () => {
    inputScreen.value += '2';
});

threeBtn.addEventListener('click', () => {
    inputScreen.value += '3';
});

zeroBtn.addEventListener('click', () => {
    inputScreen.value += '0';
});

dotBtn.addEventListener('click', () => {
    inputScreen.value += '.';
});
1427 chars
56 lines

Finally, we will add the logic to evaluate the calculation when the = button is clicked:


index.tsx
const equalsBtn = document.querySelector('#btn-equals');

equalsBtn.addEventListener('click', () => {
    const result = eval(inputScreen.value);
    inputScreen.value = result;
});
182 chars
7 lines

That’s it! You have created a fully functional calculator using JavaScript!

write a simple calculator in javascript

similar javascript code snippets

related categories