Svelte Calculator

The aim is to have a simple basic calculator working, while, and for brevity, rules that can break the evaluation of the calculation, are not included.

1. Create markup and styles

<main>
	<div class="calculator">
		<div class="display">123</div>
		<div class="digits">
			<button class="clear span-3">C</button>
			<button class="operator divide">/</button>
			<button class="number">1</button>
			<button class="number">2</button>
			<button class="number">3</button>
			<button class="operator multiply">*</button>
			<button class="number">4</button>
			<button class="number">5</button>
			<button class="number">6</button>
			<button class="operator subtract">-</button>
			<button class="number">7</button>
			<button class="number">8</button>
			<button class="number">9</button>
			<button class="operator add">+</button>
			<button class="number span-2">0</button>
			<button class="dot">.</button>
			<button class="operator equal">=</button>
		</div>
	</div>
</main>

.calculator {
	width: 100%;
}
.display {
	display: flex;
	align-items: center;
	justify-content: end;
	padding-right: 0.4rem;
	width: 100%;
	height: 4rem;
	font-size: 2rem;
	font-weight: bold;
	letter-spacing: 0.2rem;
	background-color: lightslategrey;
	color: white;
	border-radius: 12px;
	margin-bottom: 1rem;
}
.digits {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}
.span-2 {
	grid-column: span 2;
}
.span-3 {
	grid-column: span 3;
}
button {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 4rem;
	font-size: 2rem;
	border: 2px solid black;
	border-radius: 12px;
}
.operator {
	font-size: 3rem;
	font-weight: bold;
	background-color: orange;
}

2. Iterate over numbers with each

const numbers_1_3 = ['1', '2', '3'];
const numbers_4_6 = ['4', '5', '6'];
const numbers_7_9 = ['7', '8', '9'];

{#each numbers_1_3 as number}
	<button class="number" id="{number}">{number}</button>
{/each}

3. Handle calculator state and input

This handles correct evaluation of the calculation with operator precedence.

By binding buttonDivide and buttonMultiply to a variable of type HTMLButtonElement one could enforce rules that i.e. do not allow having a calculation that starts with ** or //.

const numbers_1_3 = ['1', '2', '3'];
const numbers_4_6 = ['4', '5', '6'];
const numbers_7_9 = ['7', '8', '9'];

let selectedOperator = '';
let display: string = '';
let displayArray: string[] = [];

let buttonDivide: HTMLButtonElement;
let buttonMultiply: HTMLButtonElement;

const handleClear = () => {
	console.log('clear');
	displayArray = [];
	display = '';
	selectedOperator = '';
};

const handleNumber = (number: string) => {
	console.log('number : ', number);

	displayArray.push(number);
	display = displayArray.join('');
};

const handleOperator = (operator: string) => {
	console.log('operator : ', operator);
	selectedOperator = operator;

	displayArray.push(operator);
	console.log(displayArray);

	display = displayArray.join('');
	console.log(display);

	if (operator === '=') {
		// remove "=" from array
		displayArray.pop();
		console.log('displayArray : ', displayArray);

		let numbers: number[] = [];

		interface Calc {
			numbers: number[];
			operators: string[];
			math: (number | string)[];
		}

		let calc: Calc = { numbers: [], operators: [], math: [] };
		let numbersIndex: number = 0;
		let operatorsIndex: number = 0;

		displayArray.forEach((element, index, array) => {
			// if string element is a number
			if (!isNaN(parseInt(element))) {
				numbers.push(parseInt(element));
				calc.numbers[numbersIndex] = +numbers.join('');

				// if the last element in the displayArray is iterated
				if (index === array.length - 1) {
					calc.math.push(calc.numbers[calc.numbers.length - 1]);
				}
			}
			// if string element is an operator
			if (isNaN(parseInt(element))) {
				calc.operators[operatorsIndex] = element;

				calc.math.push(calc.numbers[calc.numbers.length - 1]);
				calc.math.push(calc.operators[calc.operators.length - 1]);

				operatorsIndex++;
				numbersIndex++;
				numbers = [];
			}
		});
		console.log('numbers : ', numbers);
		console.log('calc : ', calc);

		let calculationString = Object.values(calc.math).join('');
		console.log('calculationString : ', calculationString);

		let result = eval(calculationString);
		console.log('result : ', result);

		display = result;
	}
};

const handleDot = (dot: string) => {
	console.log('dot : ', dot);
	displayArray.push(dot);
};

<div class="calculator">
	<div class="display">{display}</div>
	<div class="digits">
		<button class="clear span-3" on:click="{()" ="">handleClear()}>C</button>
		<button
			bind:this="{buttonDivide}"
			class="operator divide {selectedOperator === '/' ? 'op-active' : ''}"
			on:click="{()"
			=""
		>
			handleOperator('/')}>/
		</button>
		{#each numbers_1_3 as number}
		<button class="number" on:click="{()" ="">handleNumber(number)}>{number}</button>
		{/each}
		<button
			bind:this="{buttonMultiply}"
			class="operator multiply {selectedOperator === '*' ? 'op-active' : ''}"
			on:click="{()"
			=""
		>
			handleOperator('*')}>*
		</button>
		{#each numbers_4_6 as number}
		<button class="number" on:click="{()" ="">handleNumber(number)}>{number}</button>
		{/each}
		<button
			class="operator subtract {selectedOperator === '-' ? 'op-active' : ''}"
			on:click="{()"
			=""
		>
			handleOperator('-')}>-
		</button>
		{#each numbers_7_9 as number}
		<button class="number" on:click="{()" ="">handleNumber(number)}>{number}</button>
		{/each}
		<button class="operator add {selectedOperator === '+' ? 'op-active' : ''}" on:click="{()" ="">
			handleOperator('+')}>+
		</button>
		<button class="number span-2" on:click="{()" ="">handleNumber('0')}>0</button>
		<button class="dot" on:click="{()" ="">handleDot('.')}>.</button>
		<button class="operator equal {selectedOperator === '=' ? 'op-active' : ''}" on:click="{()" ="">
			handleOperator('=')}>=
		</button>
	</div>
</div>

Reference

https://stackoverflow.com/questions/175739/how-can-i-check-if-a-string-is-a-valid-number

https://stackoverflow.com/questions/2276021/evaluating-a-string-as-a-mathematical-expression-in-javascript

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_precedence