A Walkthrough of one of my first projects: Building a calculator with HTML, CSS, and JavaScript:

Published in

Strategio

5 min readJan 12, 2023

Making a web calculator is a great project to do if you’re new to JavaScript. It is easy enough for people of all skill levels to complete it. The focus of this project is on user interface interactions and key JavaScript methods.

Perquisites:

A good text editor is necessary for any budding web developer. I used visual studio code (VS Code).
A basic understanding of CSS, JavaScript, and HTML are required.

Designing the calculator:

This article will go over a calculator project that was built with JavaScript classes and styled with CSS and HTML.

The project is comprised of a simple calculator capable of performing basic arithmetic operations such as addition, subtraction, multiplication, division, etc. The calculator includes a text input field where the user can enter an arithmetic expression, as well as a button that evaluates the expression and displays the result.

The calculator’s HTML consists of a form element with an input field and a button and a div element with an output field. The form and output fields are assigned unique identifiers so that they can be accessed from JavaScript code.

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator-grid">
        <div class="output">
            <div data-previous-operand class="previous-operand"></div>
            <div data-current-operand class="current-operand"></div>
        </div>
        <button data-all-clear class="span-two">AC</button> <!--gave it a span of two cause its a button that take two spaces in the calculator-->
        <button data-delete>DEL</button>
        <button data-operation>÷</button>
        <button data-number>1</button>
        <button data-number>2</button>
        <button data-number>3</button>
        <button data-operation>*</button>
        <button data-number>4</button>
        <button data-number>5</button>
        <button data-number>6</button>
        <button data-operation>+</button>
        <button data-number>7</button>
        <button data-number>8</button>
        <button data-number>9</button>
        <button data-operation>-</button>
        <button data-number>.</button>
        <button data-number>0</button>
        <button data-equals class="span-two">=</button>
    </div>
<script src="app.js"></script>
</body>
</html>

The calculator’s CSS styles the form and output fields to give them a consistent look and feel. It also gives the elements some basic layout and spacing.

CSS Code:

/*  '*' is universal selectors, meaning it allows us to select all content in an html page */
*, *::before, *::after{
    box-sizing: border-box;
    font-family: Helvetica, sans-serif;
    font-weight: normal;
}

body {
    padding: 0px;
    margin: 0px;
    background: linear-gradient(to right, rgb(169, 105, 247), rgb(0, 238, 255))
}.calculator-grid {
    display: grid;
    justify-content: center;
    align-content: center;
    min-height: 100vh;
    grid-template-columns: repeat(4, 100px);
    grid-template-rows: minmax(120px, auto) repeat(5, 100px);
}/* '>' targets DIRECT children of a particular element*/
.calculator-grid > button {
    cursor: pointer;
    font-size: 2rem;
    border: 1px solid white;
    outline: none;
    background-color: rgb(255, 255, 255, .7);
}.calculator-grid > button:hover {
    background-color: rgba(255, 255, 255, .9);
}.span-two {
    grid-column: span 2;
}.output {
    grid-column: 1 / -1; /* this means span from column 1 to -1 column,which is essentially the last column */
    background-color: rgba(0, 0, 0, .7);
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    flex-direction: column;
    padding: 10px;
    word-wrap: break-word;
    word-break: break-all;
}.output .previous-operand {
    color: rgba(255, 255, 255, .7);
    font-size: 1.5rem;
}.output .current-operand {
    color: white;
    font-size: 2.5rem;
}

Write the JavaScript code for the calculator. You can use JavaScript classes to organize the code and make it easier to understand and maintain. You can create a Calculator class that defines the behavior of the calculator, and a set of helper classes for various math functions. The Calculator class should have a constructor method that initializes the calculator and sets up the event listeners for the buttons. It should also have methods for performing various math operations, such as addition, subtraction, multiplication, etc.

The Calculator class’s code using JavaScript is as follows:

const numberButtons = document.querySelectorAll('[data-number]');
const operationButtons = document.querySelectorAll('[data-operation]');
const equalsButton = document.querySelector('[data-equals]');
const deleteButton = document.querySelector('[data-delete]');
const allClearButton = document.querySelector('[data-all-clear]');
const previousOperandTextElement = document.querySelector('[data-previous-operand]');
const currentOperandTextElement = document.querySelector('[data-current-operand]');

class Calculator {
    constructor(previousOperandTextElement, currentOperandTextElement) {
        this.previousOperandTextElement = previousOperandTextElement;
        this.currentOperandTextElement = currentOperandTextElement;
        this.clear();
    }    clear() {
        this.currentOperand = '';
        this.previousOperand = '';
        this.operation = undefined;
    }    delete() {
        this.currentOperand = this.currentOperand.toString().slice(0, -1);
    }    appendNumber(number) {
        if (number === '.' && this.currentOperand.includes('.')) {
            return;
        }
        this.currentOperand = this.currentOperand.toString() + number.toString();
    }    chooseOperation(operation) {
        if (this.currentOperand === '') {
            return;
        }
        if (this.previousOperand !== '') {
            this.compute()
        }
        this.operation = operation;
        this.previousOperand = this.currentOperand;
        this.currentOperand = '';
    }    compute() {
        let computation;
        const prev = parseFloat(this.previousOperand); // converts str to a num
        const current = parseFloat(this.currentOperand); // converts str to a num
        if (isNaN(prev) || isNaN(current)) {
            return;
        }
        if (this.operation === '+') {
            computation = prev + current;
            // break;
        } else if (this.operation === '-') {
            computation = prev - current;
            // break;
        } else if (this.operation === '*') {
            computation = prev * current;
            // break;
        } else if (this.operation === '÷') {
            computation = prev / current;
            // break;
        } else {
            return;
        }
        this.currentOperand = computation;
        this.operation = undefined;
        this.previousOperand = '';
    }    getDisplayNumber(number) {
        const stringNumber = number.toString();
        const integerDigits = parseFloat(stringNumber.split('.')[0]) // give numbers before the period
        const decimalDigits = stringNumber.split('.')[1] // gives number after the period
        let integerDisplay;
        if(isNaN(integerDigits)) {
            integerDisplay = '';
        } else {
            integerDisplay =  integerDigits.toLocaleString('en', {maximumFractionDigits: 0 })
        }
        if (decimalDigits != null) {
            return `${integerDisplay}.${decimalDigits}`
        } else {
            return integerDisplay;
        }
    }    updateDisplay() {
        this.currentOperandTextElement.innerText = this.getDisplayNumber(this.currentOperand);
        if (this.operation != null) {
            this.previousOperandTextElement.innerText = `${this.getDisplayNumber(this.previousOperand)} ${this.operation}`;
        } else {
            this.previousOperandTextElement.innerText = ''
        }
    }
}const calculator = new Calculator(previousOperandTextElement, currentOperandTextElement);numberButtons.forEach(button => {
    button.addEventListener('click', () => {
        calculator.appendNumber(button.innerText);
        calculator.updateDisplay()
    })
})operationButtons.forEach(button => {
    button.addEventListener('click', () => {
        calculator.chooseOperation(button.innerText);
        calculator.updateDisplay()
    })
})equalsButton.addEventListener('click', button => {
    calculator.compute();
    calculator.updateDisplay();
})allClearButton.addEventListener('click', button => {
    calculator.clear();
    calculator.updateDisplay();
})deleteButton.addEventListener('click', button => {
    calculator.delete();
    calculator.updateDisplay();
})

The Calculator class also includes a reset method that clears both the input and output fields, as well as a clear method that only clears the input field. The event listeners for the corresponding buttons call these methods.

Conclusion:

Overall, the calculator project demonstrates how to create a simple interactive application using JavaScript classes. The use of classes aids in the organization of code, making it easier to understand and maintain. It also enables reuse.