restyled the overall calculator view by making everything look smalle…

…r 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
MariusHor · Mar 19, 2023 · fbfa1a0 · fbfa1a0
1 parent 2a5fa0b
commit fbfa1a0
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 34 deletions.
diff --git 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
@@ -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,17 +175,18 @@
   &--beige {
     background-color: #eae3dc;
     color: #434a59;
-    font-size: 40px;
+    font-size: 36px;
 
     &:hover {
       background-color: #fffffe;
     }
   }
 
   &--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
@@ -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,15 +116,15 @@ export default class Calculator {
         this.result = firstOperand;
     }
 
-    if (operation !== '=') {
+    if (secondOperand !== 0 && operation !== '=') {
       this.saveHistory(operation, firstOperand, secondOperand, this.result);
     }
 
     this.prevInput = this.result;
   }
 
   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
@@ -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
@@ -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;
 };