Merge pull request #5 from Igorcbraz/Refactor-Class-Structure

Refactor class structure

index.html

@@ -22,18 +22,18 @@
         <div class="col-12 col-md-8 col-lg-6 col-xl-4 ">
           <div class="container calc-top">
             <div class="row justify-content-end">
-              <span class="col-1">1</span>
-              <span class="col-1">2</span>
-              <span class="col-1">3</span>
+              <span class="col-1 key-selector" data-key="1">1</span>
+              <span class="col-1 key-selector" data-key="2">2</span>
+              <span class="col-1 key-selector" data-key="3">3</span>
             </div>
 
             <div class="calc-top row">
               <h3 class="col-6">calc</h3>
-              <h4 class="col-3">theme</h4>
+              <h4 class="col-3" id="reset-theme">theme</h4>
 
               <div class="col-3 toggle">
                 <div class="btn-group">
-                  <input type="range" id="btnTheme" min="1" max="3" value="1" onchange="changeThemeById(this.value);">
+                  <input type="range" id="btnTheme" min="1" max="3" value="1">
                 </div>
               </div>
             </div>
@@ -45,41 +45,40 @@ <h4 class="col-3">theme</h4>
           <div class="calc-keys">
             <div class="container">
               <div class="row">
-                <input class="col" type="button" value="7" onclick="addInputToDisplay('7')">
-                <input class="col" type="button" value="8" onclick="addInputToDisplay('8')">
-                <input class="col" type="button" value="9" onclick="addInputToDisplay('9')">
-                <input class="col" type="button" value="DEL" id="del" onclick="removeLastInput()">
+                <input class="col add-input" type="button" value="7">
+                <input class="col add-input" type="button" value="8">
+                <input class="col add-input" type="button" value="9">
+                <input class="col remove-last" type="button" value="DEL" id="del">
               </div>
               <div class="row">
-                <input class="col" type="button" value="4" onclick="addInputToDisplay('4')">
-                <input class="col" type="button" value="5" onclick="addInputToDisplay('5')">
-                <input class="col" type="button" value="6" onclick="addInputToDisplay('6')">
-                <input class="col" type="button" value="+" onclick="addInputToDisplay('+')">
+                <input class="col add-input" type="button" value="4">
+                <input class="col add-input" type="button" value="5">
+                <input class="col add-input" type="button" value="6">
+                <input class="col add-input" type="button" value="+">
               </div>
               <div class="row">
-                <input class="col" type="button" value="1" onclick="addInputToDisplay('1')">
-                <input class="col" type="button" value="2" onclick="addInputToDisplay('2')">
-                <input class="col" type="button" value="3" onclick="addInputToDisplay('3')">
-                <input class="col" type="button" value="-" onclick="addInputToDisplay('-')">
+                <input class="col add-input" type="button" value="1">
+                <input class="col add-input" type="button" value="2">
+                <input class="col add-input" type="button" value="3">
+                <input class="col add-input" type="button" value="-">
               </div>
               <div class="row">
-                <input class="col" type="button" value="." onclick="addInputToDisplay('.')">
-                <input class="col" type="button" value="0" onclick="addInputToDisplay('0')">
-                <input class="col" type="button" value="/" onclick="addInputToDisplay('/')">
-                <input class="col" type="button" value="x" onclick="addInputToDisplay('*')">
+                <input class="col add-input" type="button" value=".">
+                <input class="col add-input" type="button" value="0">
+                <input class="col add-input" type="button" value="/">
+                <input class="col add-input" type="button" value="x" data-operation="*">
               </div>
               <div class="row">
-                <input class="col" type="button" value="RESET" id="reset" onclick="resetDisplayValue()">
-                <input class="col" type="button" value="=" id="equals" onclick="calculate()">
+                <input class="col reset" type="button" value="RESET" id="reset">
+                <input class="col calculate" type="button" value="=" id="equals">
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
 
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-    <script src="./src/js/calculator.js"></script>
-    <script src="./src/js/theme.js"></script>
+    <script type="module" src="./src/js/main.js"></script>
+    <script type="module" src="./src/constants/index.js"></script>
   </body>
 </html>

src/constants/index.js

@@ -0,0 +1,3 @@
+import { themes } from './themes.js'
+
+export { themes }

src/constants/themes.js

@@ -0,0 +1,52 @@
+export const themes = {
+  'Default': {
+    id: '1',
+    colors: [
+      { name: '--background', value: '#3a4764' },
+      { name: '--background-dark', value: '#232c43' },
+      { name: '--background-very-dark', value: '#182034' },
+      { name: '--key-color-top', value: '#ffffff' },
+      { name: '--key-color-bottom', value: '#3a4764' },
+      { name: '--key-background', value: '#eae3dc' },
+      { name: '--key-background-dark', value: '#dfd9d2' },
+      { name: '--key-shadow', value: '#b4a597' },
+      { name: '--key-blue-background', value: '#637097' },
+      { name: '--key-blue-shadow', value: '#404e72' },
+      { name: '--key-red-background', value: '#d03f2f' },
+      { name: '--key-red-shadow', value: '#93261a' },
+    ]
+  },
+  'Light': {
+    id: '2',
+    colors: [
+      { name: '--background', value: '#e6e6e6' },
+      { name: '--background-dark', value: '#d3cdcd' },
+      { name: '--background-very-dark', value: '#eeeeee' },
+      { name: '--key-color-top', value: '#3d3d33' },
+      { name: '--key-color-bottom', value: '#3d3d33' },
+      { name: '--key-background', value: '#e5e4e0' },
+      { name: '--key-background-dark', value: '#dfd9d2' },
+      { name: '--key-shadow', value: '#b4a597' },
+      { name: '--key-blue-background', value: '#388187' },
+      { name: '--key-blue-shadow', value: '#1c6166' },
+      { name: '--key-red-background', value: '#d03f2f' },
+      { name: '--key-red-shadow', value: '#93261a' },
+    ]
+  },
+  'Dark': {
+    id: '3',
+    colors: [
+      { name: '--background', value: '#17062a' },
+      { name: '--background-dark', value: '#1e0836' },
+      { name: '--background-very-dark', value: '#1e0836' },
+      { name: '--key-color-top', value: '#f7de43' },
+      { name: '--key-color-bottom', value: '#f7de43' },
+      { name: '--key-background', value: '#331b4d' },
+      { name: '--key-shadow', value: '#851c9c' },
+      { name: '--key-blue-background', value: '#56077c' },
+      { name: '--key-blue-shadow', value: '#851c9c' },
+      { name: '--key-red-background', value: '#00decf' },
+      { name: '--key-red-shadow', value: '#00decf' },
+    ]
+  }
+}

src/js/calculator.js

@@ -1,21 +1,42 @@
-const display  = document.getElementById('display')
+export class Calculator {
+  constructor(displayElement) {
+    this.display = displayElement
+  }
 
-function addInputToDisplay(input) {
-  const displayValue = display.value
-  display.value = displayValue + input
-}
+  handleAddInput(input) {
+    this.display.value += input
+  }
 
-function calculate() {
-  if (display.value === '') return
+  handleResetValue() {
+    this.display.value = ''
+  }
 
-  const result = eval(display.value)
-  display.value = result
-}
+  handleRemoveLastInput() {
+    this.display.value = this.display.value.slice(0, -1)
+  }
 
-function resetDisplayValue() {
-  display.value = ""
-}
+  calculate() {
+    if (this.display.value === '') return
+
+    try {
+      const result = new Function('return ' + this.display.value)()
+      this.display.value = result
+    } catch (error) {
+      this.display.value = 'Erro!'
+    }
+  }
+
+  getKeyboardActions() {
+    const keyActions = {
+      'Enter': () => this.calculate(),
+      'Backspace': (event) => {
+        this.handleRemoveLastInput()
+        event.preventDefault()
+      },
+      'Escape': () => this.handleResetValue(),
+      'Delete': () => this.handleResetValue()
+    }
 
-function removeLastInput() {
-  display.value = display.value.slice(0, -1)
+    return keyActions
+  }
 }

src/js/main.js

@@ -0,0 +1,68 @@
+import { Calculator } from './calculator.js'
+import { ThemeManager } from './themeManager.js'
+
+import { themes } from '../constants/index.js'
+
+const display = document.getElementById('display')
+const calculator = new Calculator(display)
+
+const btnTheme = document.getElementById('btnTheme')
+const keySelectors = document.querySelectorAll('.key-selector')
+const themeManager = new ThemeManager(themes, btnTheme, keySelectors) 
+
+document.addEventListener('DOMContentLoaded', () => {
+  themeManager.setPreferColorSchemeTheme()
+  themeManager.applyStoredKeys()
+
+  document.querySelectorAll('.add-input').forEach(button => {
+    button.addEventListener('click', () => {
+      const value = button.dataset.operation || button.value
+      calculator.handleAddInput(value)
+    })
+  })
+
+  document.querySelector('.reset').addEventListener('click', () => {
+    calculator.handleResetValue()
+  })
+
+  document.querySelector('.remove-last').addEventListener('click', () => {
+    calculator.handleRemoveLastInput()
+  })
+
+  document.querySelector('.calculate').addEventListener('click', () => {
+    calculator.calculate()
+  })
+
+  btnTheme.addEventListener('change', () => {
+    themeManager.changeThemeById(btnTheme.value)
+  })
+
+  keySelectors.forEach(selector => {
+    selector.addEventListener('click', () => {
+      alert('Ao clicar em OK, pressione uma tecla para associar a este tema.')
+
+      const captureKey = (event) => {
+        themeManager.setKeyForTheme(selector, event.key)
+        document.removeEventListener('keydown', captureKey)
+      }
+
+      document.addEventListener('keydown', captureKey)
+    })
+  })
+
+  document.addEventListener('keydown', (event) => {
+    const keyActions = calculator.getKeyboardActions()
+    if (keyActions[event.key]) {
+      keyActions[event.key](event)
+    } else if ('0123456789+-*/.'.includes(event.key)) {
+      calculator.handleAddInput(event.key)
+    }
+
+    const themeId = themeManager.getThemeIdByKey(event.key)
+    if (themeId) themeManager.changeThemeById(themeId)
+  })
+
+  document.getElementById('reset-theme').addEventListener('click', function() {
+    themeManager.resetKeys()
+  })
+})