Skip to content

Commit 970f6d5

Browse files
WebDevSimplifiedWebDevSimplified
committed
Initial Commit Without Fonts
0 parents  commit 970f6d5

File tree

3 files changed

+199
-0
lines changed

3 files changed

+199
-0
lines changed

‎index.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Calculator</title>
8+
<link href="style.css" rel="stylesheet">
9+
<script src="script.js" defer></script>
10+
</head>
11+
<body>
12+
<div class="calculator-grid">
13+
<div class="output" data-output>
14+
<div class="previous-operand" data-previous-operand></div>
15+
<div class="current-operand" data-current-operand></div>
16+
</div>
17+
<button data-all-clear class="span-two">AC</button>
18+
<button data-delete>DEL</button>
19+
<button data-operation>÷</button>
20+
<button data-number>1</button>
21+
<button data-number>2</button>
22+
<button data-number>3</button>
23+
<button data-operation>*</button>
24+
<button data-number>4</button>
25+
<button data-number>5</button>
26+
<button data-number>6</button>
27+
<button data-operation>+</button>
28+
<button data-number>7</button>
29+
<button data-number>8</button>
30+
<button data-number>9</button>
31+
<button data-operation>-</button>
32+
<button data-number>.</button>
33+
<button data-number>0</button>
34+
<button data-equals class="span-two">=</button>
35+
</div>
36+
</body>
37+
</html>

‎script.js‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
class Calculator {
2+
constructor(currentOperandTextElement, previousOperandTextElement) {
3+
this.currentOperandTextElement = currentOperandTextElement
4+
this.previousOperandTextElement = previousOperandTextElement
5+
this.clear()
6+
}
7+
8+
clear() {
9+
this.currentOperand = ''
10+
this.previousOperand = ''
11+
this.operation = undefined
12+
}
13+
14+
delete() {
15+
this.currentOperand = this.currentOperand.toString().slice(0, -1)
16+
}
17+
18+
appendNumber(number) {
19+
if (number === '.' && this.currentOperand.includes('.')) return
20+
this.currentOperand = this.currentOperand.toString() + number.toString()
21+
}
22+
23+
chooseOperation(operation) {
24+
if (this.currentOperand === '') return
25+
if (this.previousOperand !== '') {
26+
this.compute()
27+
}
28+
this.operation = operation
29+
this.previousOperand = this.currentOperand
30+
this.currentOperand = ''
31+
}
32+
33+
updateDisplay() {
34+
this.currentOperandTextElement.innerText = this.currentOperand.toLocaleString('en')
35+
if (this.operation != null) {
36+
this.previousOperandTextElement.innerText =
37+
`${this.previousOperand.toLocaleString('en')} ${this.operation}`
38+
} else {
39+
this.previousOperandTextElement.innerText = null
40+
}
41+
}
42+
43+
compute() {
44+
let computation
45+
const prev = parseFloat(this.previousOperand)
46+
const current = parseFloat(this.currentOperand)
47+
switch (this.operation) {
48+
case '+':
49+
computation = prev + current
50+
break
51+
case '-':
52+
computation = prev - current
53+
break
54+
case '*':
55+
computation = prev * current
56+
break
57+
case '÷':
58+
computation = prev / current
59+
break
60+
default:
61+
return
62+
}
63+
this.currentOperand = computation
64+
this.operation = undefined
65+
this.previousOperand = ''
66+
}
67+
}
68+
69+
const currentOperandTextElement = document.querySelector('[data-current-operand]')
70+
const previousOperandTextElement = document.querySelector('[data-previous-operand]')
71+
const calculator = new Calculator(currentOperandTextElement, previousOperandTextElement)
72+
73+
const numberButtons = document.querySelectorAll('[data-number]')
74+
const operationButton = document.querySelectorAll('[data-operation]')
75+
const equalsButton = document.querySelector('[data-equals]')
76+
const deleteButton = document.querySelector('[data-delete]')
77+
const allClearButton = document.querySelector('[data-all-clear]')
78+
79+
numberButtons.forEach(button => {
80+
button.addEventListener('click', () => {
81+
calculator.appendNumber(button.innerText)
82+
calculator.updateDisplay()
83+
})
84+
})
85+
86+
operationButton.forEach(button => {
87+
button.addEventListener('click', () => {
88+
calculator.chooseOperation(button.innerText)
89+
calculator.updateDisplay()
90+
})
91+
})
92+
93+
equalsButton.addEventListener('click', () => {
94+
calculator.compute()
95+
calculator.updateDisplay()
96+
})
97+
98+
allClearButton.addEventListener('click', () => {
99+
calculator.clear()
100+
calculator.updateDisplay()
101+
})
102+
103+
deleteButton.addEventListener('click', () => {
104+
calculator.delete()
105+
calculator.updateDisplay()
106+
})

‎style.css‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
*, *::before, *::after {
2+
box-sizing: border-box;
3+
font-family: 'Gotham Rounded', sans-serif;
4+
font-weight: normal;
5+
}
6+
7+
html, body {
8+
background: linear-gradient(to right, #00AAFF, #00FF6C);
9+
padding: 0;
10+
margin: 0;
11+
}
12+
13+
.calculator-grid {
14+
display: grid;
15+
justify-content: center;
16+
align-content: center;
17+
grid-template-columns: repeat(4, 100px);
18+
grid-template-rows: minmax(120px, auto) repeat(5, 100px);
19+
min-height: 100vh;
20+
}
21+
22+
.output {
23+
grid-column: 1 / -1;
24+
background-color: rgba(0, 0, 0, .75);
25+
padding: 10px;
26+
display: flex;
27+
align-items: flex-end;
28+
justify-content: space-around;
29+
flex-direction: column;
30+
}
31+
32+
.output .previous-operand {
33+
color: rgba(255, 255, 255, .75);
34+
font-size: 1.5rem;
35+
}
36+
37+
.output .current-operand {
38+
color: white;
39+
font-size: 2.5rem;
40+
}
41+
42+
.calculator-grid > button {
43+
cursor: pointer;
44+
font-size: 2rem;
45+
border: 1px solid white;
46+
outline: none;
47+
background-color: rgba(255, 255, 255, .75);
48+
}
49+
50+
.calculator-grid > button:hover {
51+
background-color: rgba(255, 255, 255, .9);
52+
}
53+
54+
.span-two {
55+
grid-column: span 2;
56+
}

0 commit comments

Comments
 (0)