Skip to content

Commit 1a448ba

Browse files
WebDevSimplifiedWebDevSimplified
committed
Video Update
1 parent 970f6d5 commit 1a448ba

File tree

3 files changed

+67
-45
lines changed

3 files changed

+67
-45
lines changed

‎index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
77
<title>Calculator</title>
8-
<link href="style.css" rel="stylesheet">
8+
<link href="styles.css" rel="stylesheet">
99
<script src="script.js" defer></script>
1010
</head>
1111
<body>
1212
<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>
13+
<div class="output">
14+
<div data-previous-operand class="previous-operand"></div>
15+
<div data-current-operand class="current-operand"></div>
1616
</div>
1717
<button data-all-clear class="span-two">AC</button>
1818
<button data-delete>DEL</button>

‎script.js‎

Lines changed: 40 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
class Calculator {
2-
constructor(currentOperandTextElement, previousOperandTextElement) {
3-
this.currentOperandTextElement = currentOperandTextElement
2+
constructor(previousOperandTextElement, currentOperandTextElement) {
43
this.previousOperandTextElement = previousOperandTextElement
4+
this.currentOperandTextElement = currentOperandTextElement
55
this.clear()
66
}
77

@@ -30,20 +30,11 @@ class Calculator {
3030
this.currentOperand = ''
3131
}
3232

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-
4333
compute() {
4434
let computation
4535
const prev = parseFloat(this.previousOperand)
4636
const current = parseFloat(this.currentOperand)
37+
if (isNaN(prev) || isNaN(current)) return
4738
switch (this.operation) {
4839
case '+':
4940
computation = prev + current
@@ -64,17 +55,46 @@ class Calculator {
6455
this.operation = undefined
6556
this.previousOperand = ''
6657
}
58+
59+
getDisplayNumber(number) {
60+
const stringNumber = number.toString()
61+
const integerDigits = parseFloat(stringNumber.split('.')[0])
62+
const decimalDigits = stringNumber.split('.')[1]
63+
let integerDisplay
64+
if (isNaN(integerDigits)) {
65+
integerDisplay = ''
66+
} else {
67+
integerDisplay = integerDigits.toLocaleString('en', { maximumFractionDigits: 0 })
68+
}
69+
if (decimalDigits != null) {
70+
return `${integerDisplay}.${decimalDigits}`
71+
} else {
72+
return integerDisplay
73+
}
74+
}
75+
76+
updateDisplay() {
77+
this.currentOperandTextElement.innerText =
78+
this.getDisplayNumber(this.currentOperand)
79+
if (this.operation != null) {
80+
this.previousOperandTextElement.innerText =
81+
`${this.getDisplayNumber(this.previousOperand)} ${this.operation}`
82+
} else {
83+
this.previousOperandTextElement.innerText = ''
84+
}
85+
}
6786
}
6887

69-
const currentOperandTextElement = document.querySelector('[data-current-operand]')
70-
const previousOperandTextElement = document.querySelector('[data-previous-operand]')
71-
const calculator = new Calculator(currentOperandTextElement, previousOperandTextElement)
7288

7389
const numberButtons = document.querySelectorAll('[data-number]')
74-
const operationButton = document.querySelectorAll('[data-operation]')
90+
const operationButtons = document.querySelectorAll('[data-operation]')
7591
const equalsButton = document.querySelector('[data-equals]')
7692
const deleteButton = document.querySelector('[data-delete]')
7793
const allClearButton = document.querySelector('[data-all-clear]')
94+
const previousOperandTextElement = document.querySelector('[data-previous-operand]')
95+
const currentOperandTextElement = document.querySelector('[data-current-operand]')
96+
97+
const calculator = new Calculator(previousOperandTextElement, currentOperandTextElement)
7898

7999
numberButtons.forEach(button => {
80100
button.addEventListener('click', () => {
@@ -83,24 +103,24 @@ numberButtons.forEach(button => {
83103
})
84104
})
85105

86-
operationButton.forEach(button => {
106+
operationButtons.forEach(button => {
87107
button.addEventListener('click', () => {
88108
calculator.chooseOperation(button.innerText)
89109
calculator.updateDisplay()
90110
})
91111
})
92112

93-
equalsButton.addEventListener('click', () => {
113+
equalsButton.addEventListener('click', button => {
94114
calculator.compute()
95115
calculator.updateDisplay()
96116
})
97117

98-
allClearButton.addEventListener('click', () => {
118+
allClearButton.addEventListener('click', button => {
99119
calculator.clear()
100120
calculator.updateDisplay()
101121
})
102122

103-
deleteButton.addEventListener('click', () => {
123+
deleteButton.addEventListener('click', button => {
104124
calculator.delete()
105125
calculator.updateDisplay()
106126
})

‎style.css‎ renamed to ‎styles.css‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,50 @@
11
*, *::before, *::after {
22
box-sizing: border-box;
3-
font-family: 'Gotham Rounded', sans-serif;
3+
font-family: Gotham Rounded, sans-serif;
44
font-weight: normal;
55
}
66

7-
html, body {
8-
background: linear-gradient(to right, #00AAFF, #00FF6C);
7+
body {
98
padding: 0;
109
margin: 0;
10+
background: linear-gradient(to right, #00AAFF, #00FF6C);
1111
}
1212

1313
.calculator-grid {
1414
display: grid;
1515
justify-content: center;
1616
align-content: center;
17+
min-height: 100vh;
1718
grid-template-columns: repeat(4, 100px);
1819
grid-template-rows: minmax(120px, auto) repeat(5, 100px);
19-
min-height: 100vh;
20+
}
21+
22+
.calculator-grid > button {
23+
cursor: pointer;
24+
font-size: 2rem;
25+
border: 1px solid white;
26+
outline: none;
27+
background-color: rgba(255, 255, 255, .75);
28+
}
29+
30+
.calculator-grid > button:hover {
31+
background-color: rgba(255, 255, 255, .9);
32+
}
33+
34+
.span-two {
35+
grid-column: span 2;
2036
}
2137

2238
.output {
2339
grid-column: 1 / -1;
2440
background-color: rgba(0, 0, 0, .75);
25-
padding: 10px;
2641
display: flex;
2742
align-items: flex-end;
2843
justify-content: space-around;
2944
flex-direction: column;
45+
padding: 10px;
46+
word-wrap: break-word;
47+
word-break: break-all;
3048
}
3149

3250
.output .previous-operand {
@@ -37,20 +55,4 @@ html, body {
3755
.output .current-operand {
3856
color: white;
3957
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;
5658
}

0 commit comments

Comments
 (0)