Source code

jric2002 · Oct 18, 2021 · 1149f0a · 1149f0a
1 parent 611995c
commit 1149f0a
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 25 deletions.
diff --git a/src/css/main.css b/src/css/main.css
@@ -12,10 +12,6 @@
   --color-opacity-black: rgba(0, 0, 0, 0.25);
   --color-opacity-white: rgba(255, 255, 255, 0.25);
 }
-@font-face {
-  font-family: "Roboto";
-  src: url("./typography/Roboto/Roboto-Light.ttf");
-}
 * {
   padding: 0;
   margin: 0;
@@ -31,6 +27,7 @@ body {
   background-color: var(--gray-color);
   color: var(--white-color);
   border-radius: 10px;
+  border: 1px solid var(--color-opacity-white);
   padding: 1rem;
   margin: 2rem auto;
 }
@@ -48,11 +45,13 @@ body {
   align-items: center;
   background-color: var(--color-opacity-black);
   border-radius: 10px;
+  overflow-y: hidden;
   margin: 1rem 0;
 }
 .calculator .number-box .numbers {
   font-size: 24px;
   font-weight: bold;
+  letter-spacing: 2px;
   margin: 0.75rem;
 }
 /** Buttons **/

diff --git a/src/index.html b/src/index.html
@@ -26,6 +26,8 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"/>
     <!-- Css -->
     <link rel="stylesheet" type="text/css" href="./css/main.css"/>
+    <!-- JavaScript -->
+    <script type="module" src="./js/main.js"></script>
   </head>
   <body>
     <div class="calculator" id="calculator">
@@ -54,7 +56,5 @@ <h1 class="name">Calculator</h1>
         <div class="equal" id="operation">=</div>
       </div>
     </div>
-    <!-- JavaScript -->
-    <script defer type="text/javascript" src="./js/main.js"></script>
   </body>
 </html>
diff --git a/src/js/main.js b/src/js/main.js
@@ -6,38 +6,71 @@ const BUTTONS = document.getElementById("buttons");
 const BUTTON = BUTTONS.childNodes;
 
 /** Mathematical operations **/
-function add(number_1, number_2) {
-  return (number_1 + number_2);
+function add(array_numbers) {
+  var result = 0;
+  for (var number of array_numbers) {
+    result += Number.parseFloat(number);
+  }
+  return result;
 }
-function subtract(number_1, number_2) {
-  return (number_1 - number_2);
+function subtract(array_numbers) {
+  var result = 0;
+  var size_array_numbers = array_numbers.length;
+  for (var i = 1; i < size_array_numbers; i++) {
+    result += Number.parseFloat(array_numbers[i]);
+    if (i == (size_array_numbers - 1)) {
+      result = Number.parseFloat(array_numbers[0]) - result;
+    }
+  }
+  return result;
 }
-function multiply(number_1, number_2) {
-  return (number_1 * number_2);
+function multiply(array_numbers) {
+  var result = 1;
+  for (var number of array_numbers) {
+    result *= Number.parseFloat(number);
+  }
+  return result;
 }
 function divide(number_1, number_2) {
-  return (number_1, number_2);
+  var result = Number.parseFloat(number_1) / Number.parseFloat(number_2);
+  return result;
 }
 
 BUTTON.forEach(function(e, i, a) {
   e.addEventListener("click", function() {
     var btn = e.getAttribute("id");
-    var re = /(\.{})/gi;
-    if (btn === "number" || btn === "point") {
-      NUMBERS.innerHTML += e.innerHTML;
+    if (e.innerHTML === "DEL") {
+      var new_number = NUMBERS.innerHTML.split("");
+      new_number.pop();
+      NUMBERS.innerHTML = new_number.join("");
+    }
+    else if (e.innerHTML === "RESET") {
+      NUMBERS.innerHTML = "";
     }
-    if (btn === "operation") {
-      if (e.innerHTML === "DEL") {
-        var new_number = NUMBERS.innerHTML.split("");
-        new_number.pop();
-        NUMBERS.innerHTML = new_number.join("");
+    else if (e.innerHTML === "=") {
+      var addition_operator = /(\+)/gi;
+      var subtraction_operator = /(-)/gi;
+      var multiplication_operator = /(x)/gi;
+      var division_operator = /\//gi;
+      if (addition_operator.exec(NUMBERS.textContent)) {
+        var temp_numbers = NUMBERS.textContent.split("+");
+        NUMBERS.innerHTML = add(temp_numbers);
       }
-      if (e.innerHTML === "RESET") {
-        NUMBERS.innerHTML = "";
+      if (subtraction_operator.exec(NUMBERS.textContent)) {
+        var temp_numbers = NUMBERS.textContent.split("-");
+        NUMBERS.innerHTML = subtract(temp_numbers);
       }
-      if (e.innerHTML === "=") {
-        NUMBERS.innerHTML = "Result";
+      if (multiplication_operator.exec(NUMBERS.textContent)) {
+        var temp_numbers = NUMBERS.textContent.split("x");
+        NUMBERS.innerHTML = multiply(temp_numbers);
       }
+      if (division_operator.exec(NUMBERS.textContent)) {
+        var temp_numbers = NUMBERS.textContent.split("/");
+        NUMBERS.innerHTML = divide(temp_numbers[0],temp_numbers[1]);
+      }
+    }
+    else {
+      NUMBERS.innerHTML += e.innerHTML;
     }
   });
 });