From f25e88fb1ed94724b863b5f3da5be4d09f946401 Mon Sep 17 00:00:00 2001
From: dimeji <gbadeyankashaban24@gmail.com>
Date: Mon, 26 Sep 2022 04:33:14 -0400
Subject: [PATCH 1/3] new commit


From df388484081c922f3db6b4ff3da8be8a5ea77783 Mon Sep 17 00:00:00 2001
From: dimeji <gbadeyankashaban24@gmail.com>
Date: Mon, 26 Sep 2022 07:17:58 -0400
Subject: [PATCH 2/3] changed button color

---
 js/calc.js | 203 +++++++++++++++++------------------------------------
 1 file changed, 65 insertions(+), 138 deletions(-)

diff --git a/js/calc.js b/js/calc.js
index 318a658..8f1612e 100644
--- a/js/calc.js
+++ b/js/calc.js
@@ -1,28 +1,27 @@
-
-class Calculator{
-  screen='';
+class Calculator {
+  screen = "";
   div;
   finalAns;
-  constructor(div){
-      this.div= document.querySelector(div)
-      this.div.innerHTML =`<div class="w-100">
+  constructor(div) {
+    this.div = document.querySelector(div);
+    this.div.innerHTML = `<div class="w-100">
       <input type="text" class="form-control input-lg" readonly id="screen">
       <table style="width:100%;" id="tb1">
        <tr>
-         <td><button class="btn btn-light">1</button></td>
-         <td><button class="btn btn-light">2</button></td>
-         <td><button class="btn btn-light">3</button></td>
-         <td><button class="btn btn-light">4</button></td>
-         <td><button class="btn btn-light">5</button></td>
-         <td><button class="btn btn-light">+</button></td>
+         <td><button class="btn btn-dark">1</button></td>
+         <td><button class="btn btn-dark">2</button></td>
+         <td><button class="btn btn-dark">3</button></td>
+         <td><button class="btn btn-dark">4</button></td>
+         <td><button class="btn btn-dark">5</button></td>
+         <td><button class="btn btn-dark">+</button></td>
        </tr>
        <tr>
-         <td><button class="btn btn-light">6</button></td>
-         <td><button class="btn btn-light">7</button></td>
-         <td><button class="btn btn-light">8</button></td>
-         <td><button class="btn btn-light">9</button></td>
-         <td><button class="btn btn-light">0</button></td>
-         <td><button class="btn btn-light">-</button></td>
+         <td><button class="btn btn-dark">6</button></td>
+         <td><button class="btn btn-dark">7</button></td>
+         <td><button class="btn btn-dark">8</button></td>
+         <td><button class="btn btn-dark">9</button></td>
+         <td><button class="btn btn-dark">0</button></td>
+         <td><button class="btn btn-dark">-</button></td>
        </tr>
        <tr>
          <td colspan="6"><button class="btn btn-dark">=</button></td>
@@ -30,129 +29,57 @@ class Calculator{
        </tr>
       </table>
     </div>`;
-    this.screen= document.querySelector(`${div} input`)
-    const btnn = document.querySelectorAll(`${div} button`)
-  
-  btnn.forEach((bt)=>{
-      bt.addEventListener('click',()=>{
-          if (bt.innerText == '=') {
-              this.showAnswer()
-          } else {
-              this.showNumbers(bt.innerText)
-          }
-      })
-  });
-}
-  
-  showNumbers(numbers){
-      console.log(this.finalAns);
-      if(this.screen.value == this.finalAns)this.screen.value=''
-      if (this.screen.value.charAt(this.screen.value.length -1)=='+'&& numbers=='-') {
-         this.screen.value = this.screen.value.slice(0,-1)
-         this.screen.value +=numbers;
-      } else if (this.screen.value.charAt(this.screen.value.length -1)=='-'&& numbers=='+'){
-          this.screen.value = this.screen.value.slice(0,-1)
-          this.screen.value +=numbers; 
-      } else{
-          this.screen.value +=numbers;
-      }    
-  };
-  showAnswer(){
-      try {
-      this.finalAns=eval(this.screen.value)
-        this.screen.value = this.finalAns
-      } catch (error) {
-        alert('Invalid something')
-        this.screen.value = ''
-      }  
+    this.screen = document.querySelector(`${div} input`);
+    const btnn = document.querySelectorAll(`${div} button`);
+
+    btnn.forEach((bt) => {
+      bt.addEventListener("click", () => {
+        if (bt.innerText == "=") {
+          this.showAnswer();
+        } else {
+          this.showNumbers(bt.innerText);
+        }
+      });
+    });
   }
-  init(){
 
-  }    
+  showNumbers(numbers) {
+    console.log(this.finalAns);
+    if (this.screen.value == this.finalAns) this.screen.value = "";
+    if (
+      this.screen.value.charAt(this.screen.value.length - 1) == "+" &&
+      numbers == "-"
+    ) {
+      this.screen.value = this.screen.value.slice(0, -1);
+      this.screen.value += numbers;
+    } else if (
+      this.screen.value.charAt(this.screen.value.length - 1) == "-" &&
+      numbers == "+"
+    ) {
+      this.screen.value = this.screen.value.slice(0, -1);
+      this.screen.value += numbers;
+    } else {
+      this.screen.value += numbers;
+    }
+  }
+  showAnswer() {
+    try {
+      this.finalAns = eval(this.screen.value);
+      this.screen.value = this.finalAns;
+    } catch (error) {
+      alert("Invalid something");
+      this.screen.value = "";
+    }
+  }
+  init() {}
 }
-class Calculator2 extends Calculator{
+class Calculator2 extends Calculator {
   color;
-  constructor(div2,colorId){
-      super(div2)
-      document.querySelector(colorId).addEventListener('change',function(){
-          this.color = document.querySelector('#colorInp').value
-          document.querySelector(div2).style.backgroundColor=this.color;
-      });
+  constructor(div2, colorId) {
+    super(div2);
+    document.querySelector(colorId).addEventListener("change", function () {
+      this.color = document.querySelector("#colorInp").value;
+      document.querySelector(div2).style.backgroundColor = this.color;
+    });
   }
 }
-// class Calculator {
-//   screens;
-//   div;
-//   constructor(div) {
-//     this.div = document.querySelector(div);
-
-//     this.div.innerHTML = `<div class="w-50 card ml-5">
-//     <input type="text" class="form-control input-lg" readonly id="screen">
-//     <table style="width: 100%;" id="calc1">
-//       <tr>
-//         <td><button class="btn btn-light">   1</button></td>
-//         <td><button class="btn btn-light">   2</button></td>
-//         <td><button class="btn btn-light">   3</button></td>
-//         <td><button class="btn btn-light">   4</button></td>
-//         <td><button class="btn btn-light">   5</button></td>
-//         <td><button class="btn btn-light">   +</button></td>
-//       </tr>
-//       <tr>
-//         <td><button class="btn btn-light">   6</button></td>
-//         <td><button class="btn btn-light">   7</button></td>
-//         <td><button class="btn btn-light">   8</button></td>
-//         <td><button class="btn btn-light">   9</button></td>
-//         <td><button class="btn btn-light">   0</button></td>
-//         <td><button class="btn btn-light">   -</button></td>
-//       </tr>
-//       <tr>
-//         <td colspan="6"><button class="btn btn-dark btn-block">=</button></td>
-//         <td colspan="6"><button class="btn btn-danger btn-block" onclick="clear()">CLR</button></td>
-//       </tr>
-//     </table>
-//     </div>`;
-//     this.screens = document.querySelector("#screen");
-
-//     const btn = document.querySelectorAll("table button");
-
-//     btn.forEach((bt) => {
-//       bt.addEventListener("click", () => {
-//         if (bt.innerText == "=") {
-//           this.showAnswer();
-//         } else {
-//           if (bt.innerText == "CLR") {
-//             this.clear();
-//           } else {
-//             this.showNumbas(bt.innerText);
-//           }
-//         }
-//       });
-//     });
-//   }
-
-//   showNumbas(numbers) {
-//     //log(numbers)
-
-//     this.screens.value += numbers;
-//   }
-
-//   showAnswer() {
-//     try {
-//       this.screens.value = eval(this.screens.value);
-//     } catch (error) {
-//       alert("INvalid something");
-//       this.screens.value = "";
-//     }
-//   }
-
-
-//   init() {}
-// }
-
-// function clear() {
-//   let screens = document.querySelector("#screen");
-//   screens.innerHTML = "";
-// }
-
-// export default Calculator
-

From 6372e9be0c69ae0729425f07c2944e3083e67a2c Mon Sep 17 00:00:00 2001
From: dimeji <gbadeyankashaban24@gmail.com>
Date: Mon, 26 Sep 2022 08:16:56 -0400
Subject: [PATCH 3/3] first commit

---
 index.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index af97879..8e8f0f8 100644
--- a/index.html
+++ b/index.html
@@ -109,7 +109,7 @@ <h1 id="title"></h1>
    </div>
    <div id="disp"></div>
   
-   <div class="w-50" id="mycalc">
+   <!-- <div class="w-50" id="mycalc"> -->
     
    </div>
    <div class="mt-3 ml-3">
@@ -118,9 +118,9 @@ <h1 id="title"></h1>
     <div id="mycalc2" class="w-50"></div>
 </div>
    <!-- <div><button class="btn w-100" id="mybtn" onclick="change()">CLick me</button></div> -->
-   <script src="/js/calc.js" ></script>
+   <script src="js/calc.js" ></script>
    <script>
-    new Calculator('#mycalc');
+    // new Calculator('#mycalc');
     new Calculator2('#mycalc2','#colorInp');
    </script>
  </body>