calculator/script.js at main · pankaj485/calculator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
/*
    lightBody
    lightThemeImage
    darkThemeImage
    lightCalculator
    lightHeading
    lightResult
    lightButtons
    lightOperationButtons
*/

/* =====================================
========= THEME TOOGLE FUNCTION ========
======================================== */

document.querySelector('.themeImage').addEventListener('click', () => {
	document.querySelector('.lightThemeImage').classList.toggle('hideIt');
	document.querySelector('.darkThemeImage').classList.toggle('hideIt');

	document.body.classList.toggle('lightBody');
	document.querySelector('.calculator').classList.toggle('lightCalculator');
	document.querySelector('.heading').classList.toggle('lightHeading');
	document.querySelector('.result').classList.toggle('lightResult');
	document.querySelector('.buttons').classList.toggle('lightButtons');
	let x = document.querySelectorAll('.operationButtons');
	for (let i = 0; i < x.length; i++) {
		x[i].classList.toggle('lightOperationButtons');
	}
	document.querySelector('.resultButton').classList.toggle('lightResultButton');
});

/* ======================================
========= CALCULATOR FUNCTIONALITY =======
======================================== */

// =============== button click function =============
let screen = document.getElementById('resultScreen');
let buttons = document.querySelectorAll('button');
let outputValue = '';

for (item of buttons) {
	item.addEventListener('click', (event) => {
		let clickedButtonValue = event.target.innerHTML;
		screen.innerHTML += clickedButtonValue;

		if (clickedButtonValue === 'AC') {
			outputValue = '';
			screen.innerHTML = '&nbsp;';
		} else if (clickedButtonValue === '=') {
			screen.innerHTML = eval(outputValue);
		} else {
			outputValue += clickedButtonValue;
		}
	});
}

// =============== keydown function =============
document.addEventListener('keydown', (event) => {
	let validKeys = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '/', '*', '-', '+', '=', 'Enter', 'Escape'];
	if (validKeys.includes(event.key)) {
		let typedButtonValue = event.key;
		screen.innerHTML += typedButtonValue;

		if (typedButtonValue === 'Escape') {
			outputValue = '';
			screen.innerHTML = '&nbsp;';
		} else if (typedButtonValue === 'Enter') {
			screen.innerHTML = eval(outputValue);
		} else {
			outputValue += typedButtonValue;
		}
	}
});