Main

index.html

@@ -817,7 +817,7 @@
                                 </g>
                                 <path fill="#BCC49A" d="M173.458,179.502c-4.962,0-9-4.039-9-9v-68.125c0-4.961,4.038-9,9-9h254.966c4.963,0,9,4.039,9,9v68.125
                     					c0,4.961-4.037,9-9,9H173.458z" />
-                                <text id="display" text-anchor="end" transform="matrix(1 0 0 1 420 164)" font-family="'Digital-7'" font-size="50">0</text>
+                                <text id="display" text-anchor="end" transform="matrix(1 0 0 1 420 164)" font-family="'Digital-7'" font-size="50"></text>
                                 <text id="hora" text-anchor="start" transform="matrix(1 0 0 1 175 113)" font-family="'Digital-7'" font-size="17.0079"></text>
                                 <text id="data" text-anchor="end" transform="matrix(1 0 0 1 420 113)" font-family="'Digital-7'" font-size="17.0079"></text>
                                 <path fill="#E0E0E0" d="M428.424,91.385H173.458c-6.616,0-12,5.385-12,12v68.125c0,6.615,5.384,12,12,12h254.966
@@ -1809,6 +1809,8 @@
 
         </div>
     </div>
+    <script src="script/controller/CalcController.js"></script>
+    <script src="script/calculator.js"> </script>
 </body>
 
 </html>

script/calculator.js

@@ -0,0 +1 @@
+window.calculator = new CalcController();

script/controller/CalcController.js

@@ -0,0 +1,193 @@
+class CalcController{
+
+    constructor(){
+        this._operation = [];
+        this._locale = 'pt-br';
+        this._displayCalcEl = document.querySelector("#display");
+        this._dateEL= document.querySelector("#data");
+        this._timeEl = document.querySelector("#hora");
+        this._currentDate = "";
+        this.initialize();
+        this.initButtonsEvents();
+
+    }
+
+    initialize(){
+
+        this.setDisplayDateTime();
+
+        setInterval(() =>{
+            this.setDisplayDateTime();
+
+
+        }, 1000);
+
+    }
+
+
+    addEventListenerAll(element, events, fn){
+
+        events.split(' ').forEach (event => {
+
+
+            element.addEventListener(event, fn, false);
+
+
+        });
+
+
+    }
+
+    clearAll(){
+
+        this._operation = [];
+
+
+    }
+
+    clearEntry(){
+
+        this._operation.pop();
+
+
+    }
+
+    addOperation(value){
+
+        this._operation.push(value);
+
+        console.log(this._operation);
+    }
+
+    setError(){
+
+       this.displayCalc = "error";
+
+    }
+
+    execBtn(value){
+
+        switch (value){
+            case 'ac':
+                 this.clearAll();    
+                 break;
+
+            case 'ce':
+                 this.clearEntry(); 
+                 break;
+
+            case 'soma':
+                 break;
+
+            case 'subtracao': 
+                 break;
+
+            case 'divisao': 
+                break;
+
+            case 'multiplicacao': 
+                break;
+            case 'porcento': 
+                 break;
+
+            case 'igual': 
+                  break;
+
+            case '0': 
+            case '1':
+            case '2':
+            case '3':
+            case '4':
+            case '5':
+            case '6':
+            case '7':
+            case '8':
+            case '9':
+               this.addOperation(parseInt(value))
+                break;
+
+                default:
+                this.setError();
+                break;
+
+
+        }
+
+
+    }
+
+    initButtonsEvents(){
+
+       let buttons = document.querySelectorAll("#buttons > g, #parts > g");    //seleciona os botoes da calc pela classe 
+
+        buttons.forEach((btn, index)=>{
+
+            this.addEventListenerAll(btn,"click drag", e => {
+
+               let textBtn = btn.className.baseVal.replace("btn-","");
+
+                this.execBtn();
+
+
+
+            });
+
+            this.addEventListenerAll(btn,"mouseup mouseover mousedown", e => {
+
+                btn.style.cursor = "pointer";
+
+
+            }); 
+
+
+        });  
+    }
+
+    setDisplayDateTime(){
+
+        this.displayDate = this.currentDate.toLocaleDateString(this._locale);  //atualiza a data em tempo real 
+        this.displayTime = this.currentDate.toLocaleTimeString(this._locale);  //atualiza a hora em tempo real 
+
+    }
+    get displayTime(){
+        return this._timeEl.innerHTML;
+
+    }
+    set displayTime(value){
+        return this._timeEl.innerHTML = value;
+
+    }
+
+    get displayDate(){
+        return this._dateEL.innerHTML;
+
+    }
+    set displayDate(value){
+        return this._dateEL.innerHTML = value;
+
+    }
+
+    get displayCalc(){
+        return this._displayCalcEl.innerHTML;
+    }
+
+    set displayCalc(value){
+        this._displayCalcEl.innerHTML = value;
+    }
+
+    get currentDate(){
+        return new Date(); 
+    }
+
+    set currentDate(value){
+        return this._dataAtual = value;
+    }
+
+
+
+
+
+
+
+
+}