From fbfa1a0d69497db3a6e095cd888eb759e14a3f22 Mon Sep 17 00:00:00 2001 From: Marius Date: Sun, 19 Mar 2023 16:21:13 +0200 Subject: [PATCH] restyled the overall calculator view by making everything look smaller and better looking overall and also took care of the fact that on clicking a previous calculation from history, if it had decimals it was not getting formatted to fit the results bar but as of now the issue is solved --- src/App.js | 4 ++-- src/App.scss | 37 +++++++++++++++++++++---------------- src/Calculator.js | 26 ++++++++++++++++---------- src/constants/constants.js | 4 ++-- src/utils/helpers.js | 8 ++++---- 5 files changed, 45 insertions(+), 34 deletions(-) diff --git a/src/App.js b/src/App.js index 2c71ea4..cb35642 100644 --- a/src/App.js +++ b/src/App.js @@ -116,8 +116,8 @@ export default class App { const { result } = event.target.dataset; if (!result) return; - this.calculator.tempField.innerHTML = `${event.target.innerHTML} =`; - this.calculator.initValues().handleNumberType(result); + this.calculator.initValues().updateDisplay(+result); + this.calculator.setCurrentInput(+result); this.transitionViewSwitch(); }); diff --git a/src/App.scss b/src/App.scss index c1ea0ae..56fa2f7 100644 --- a/src/App.scss +++ b/src/App.scss @@ -10,7 +10,7 @@ flex-direction: column; gap: 2rem; width: 100%; - max-width: 540px; + max-width: 300px; margin: 1rem; &__header { @@ -37,12 +37,12 @@ } &__result-bar { - height: 152px; + height: 110px; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; border-radius: 10px; - padding: 1.5rem; + padding: 1rem; background-color: #181f33; color: white; box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px; @@ -57,7 +57,7 @@ justify-self: flex-start; padding: 0.5rem; border-radius: 10px; - font-size: 22px; + font-size: 18px; button { background-color: #181f33; @@ -83,26 +83,30 @@ } .header--s { - height: 32px; + height: 26px; } .header--m { - font-size: 46px; + font-size: 36px; } .header--l { - font-size: 56px; + font-size: 46px; } } &__main { - height: 480px; - padding: 2rem; + height: 310px; + padding: 1.5rem; border-radius: 10px; background-color: #242d44; box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px; transition: opacity 0.3s ease-in-out, transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35); + .button:active { + transform: translateY(2px); + } + li { width: 100%; height: 100%; @@ -171,7 +175,7 @@ &--beige { background-color: #eae3dc; color: #434a59; - font-size: 40px; + font-size: 36px; &:hover { background-color: #fffffe; @@ -179,9 +183,10 @@ } &--grey { + padding-top: 5px; background-color: #647198; color: white; - font-size: 28px; + font-size: 22px; grid-column: 3/4; &:hover { @@ -192,7 +197,7 @@ &--orange { background-color: #d03f2f; color: white; - font-size: 28px; + font-size: 22px; &:hover { background-color: #f96b5b; @@ -209,10 +214,10 @@ .main-grid { display: grid; grid-template-columns: repeat(4, 1fr); - gap: 1.5rem; + gap: 1rem; .button { - padding: 10px 0; + border-radius: 10px; } } @@ -224,7 +229,7 @@ ul { display: flex; flex-direction: column; - gap: 1rem; + gap: 1.2rem; max-width: 250px; width: 100%; } @@ -243,7 +248,7 @@ button { width: 100%; height: 100%; - padding: 1rem 0; + padding: 0.5rem 0; letter-spacing: 5px; } } diff --git a/src/Calculator.js b/src/Calculator.js index 7e3b15e..2a2445d 100644 --- a/src/Calculator.js +++ b/src/Calculator.js @@ -1,4 +1,5 @@ import { setMaxDecimals } from './utils'; +import MAX_RESULT_LENGTH from './constants/constants'; export default class Calculator { constructor() { @@ -19,13 +20,17 @@ export default class Calculator { return this; } + setCurrentInput(value) { + this.currentInput = value; + } + handleNumberType = value => { - if (this.currentInput.length > 10) { + if (this.currentInput.length > 8) { this.resultField.classList.remove('header--l'); this.resultField.classList.add('header--m'); } - if (this.currentInput.length > 14) return; + if (this.currentInput.length > MAX_RESULT_LENGTH) return; if (value !== '.' || (value === '.' && !this.currentInput.includes('.'))) { this.currentInput += value; @@ -44,11 +49,10 @@ export default class Calculator { this.currentOperation = value; this.operate(+this.prevInput, +this.currentInput, this.prevOperation); + this.updateDisplay(this.result, this.currentOperation); this.prevOperation = this.currentOperation; this.currentInput = ''; - - this.updateDisplay(); }; handleActionType = value => { @@ -59,7 +63,7 @@ export default class Calculator { } if (value === 'DEL') { - if (this.currentInput.length < 10) { + if (this.currentInput.length < 8) { this.resultField.classList.remove('header--m'); this.resultField.classList.add('header--l'); } @@ -112,7 +116,7 @@ export default class Calculator { this.result = firstOperand; } - if (operation !== '=') { + if (secondOperand !== 0 && operation !== '=') { this.saveHistory(operation, firstOperand, secondOperand, this.result); } @@ -120,7 +124,7 @@ export default class Calculator { } saveHistory(operation, firstOperand, secondOperand) { - this.history = this.history.length > 6 ? this.history.slice(1) : this.history; + this.history = this.history.length > 5 ? this.history.slice(1) : this.history; this.history = [ ...this.history, { @@ -132,9 +136,11 @@ export default class Calculator { ]; } - updateDisplay() { - this.resultField.innerHTML = setMaxDecimals(this.result); - this.tempField.innerHTML = `${setMaxDecimals(this.result)} ${this.currentOperation}`; + updateDisplay(input, operation = '=') { + const result = setMaxDecimals(input); + + this.resultField.innerHTML = result; + this.tempField.innerHTML = `${result} ${operation}`; } run = () => { diff --git a/src/constants/constants.js b/src/constants/constants.js index 0560896..63e8d53 100644 --- a/src/constants/constants.js +++ b/src/constants/constants.js @@ -1,3 +1,3 @@ -const MAX_DECIMALS = 10; +const MAX_RESULT_LENGTH = 10; -export default MAX_DECIMALS; +export default MAX_RESULT_LENGTH; diff --git a/src/utils/helpers.js b/src/utils/helpers.js index 0b39af0..e1b53dc 100644 --- a/src/utils/helpers.js +++ b/src/utils/helpers.js @@ -1,10 +1,10 @@ -import MAX_DECIMALS from '@constants/constants'; +import MAX_RESULT_LENGTH from '@constants/constants'; export const setMaxDecimals = number => { if (!Number.isInteger(number)) { - const { length } = number.toString(); - const result = length > MAX_DECIMALS ? number.toFixed(MAX_DECIMALS) : number; - return result; + const index = number.toString().indexOf('.'); + + return number.toFixed(MAX_RESULT_LENGTH - index); } return number; };