Add new math functions

index.html

@@ -31,31 +31,36 @@ <h1 id="toast">Calculator</h1>
       </div>
       <div class="first-row">
         <input type="text" name="result" id="result" placeholder="Result" readonly />
-        <input type="button" value="C" onclick="result.value=''" id="clear-button" />
+        <input type="button" value="C" onclick="liveScreen('C')" id="clear-button" />
       </div>
       <div class="second-row">
+        <input type="button" value="1" onclick="liveScreen(1)" hidden = true/>
         <input type="button" value="1" onclick="liveScreen(1)" />
         <input type="button" value="2" onclick="liveScreen(2)" />
         <input type="button" value="3" onclick="liveScreen(3)" />
         <input type="button" value="+" onclick="liveScreen('+')" />
+        <input type="button" value="%" onclick="liveScreen('%')" />
       </div>
       <div class="third-row">
         <input type="button" value="4" onclick=" liveScreen(4)" />
         <input type="button" value="5" onclick=" liveScreen(5)" />
         <input type="button" value="6" onclick=" liveScreen(6)" />
         <input type="button" value="-" onclick="liveScreen('-')" />
+        <input type="button" value="x²" onclick="liveScreen('²')" />
       </div>
       <div class="fourth-row">
         <input type="button" value="7" onclick="liveScreen(7)" />
         <input type="button" value="8" onclick="liveScreen(8)" />
         <input type="button" value="9" onclick=" liveScreen(9)" />
         <input type="button" value="x" onclick="liveScreen('*')" />
+        <input type="button" value="π" onclick="liveScreen('3.14')" />
       </div>
       <div class="fifth-row">
         <input type="button" value="/" onclick="liveScreen('/')" />
         <input type="button" value="0" onclick="liveScreen(0)" />
         <input type="button" value="." onclick="liveScreen('.')" />
         <input type="button" value="=" onclick="calculate(result.value)" />
+        <input type="button" value="+/-" onclick="liveScreen('+/-')" />
       </div>
     </div>
   </div>

scripts/script.js

@@ -4,9 +4,14 @@ const sunIcon = "assets/SunIcon.svg";
 const moonIcon = "assets/MoonIcon.svg";
 const themeIcon = document.getElementById("theme-icon");
 const res = document.getElementById("result");
+var lastNumber = "";
+var currentNumber = "";
+var isPositive = true;
 const toast = document.getElementById("toast");
 
 function calculate(value) {
+  value = value.replace('²',"**2")
+  value = value.replace("--",'+')
   const calculatedValue = eval(value || null);
   if (isNaN(calculatedValue)) {
     res.value = "Can't divide 0 with 0";
@@ -16,6 +21,10 @@ function calculate(value) {
   } else {
     res.value = calculatedValue;
   }
+  lastNumber = currentNumber;
+  currentNumber = "";
+  res.value += enteredValue;
+  isPositive = true
 }
 
 // Swaps the stylesheet to achieve dark mode.
@@ -40,7 +49,33 @@ function liveScreen(enteredValue) {
   if (!res.value) {
     res.value = "";
   }
-  res.value += enteredValue;
+
+  if(enteredValue == '+' || enteredValue == '-' || enteredValue == '*' || enteredValue == '/'){
+      lastNumber = currentNumber;
+      currentNumber = "";
+      res.value += enteredValue;
+      isPositive = true
+  }
+  else if(enteredValue == 'C'){
+      lastNumber = ""
+    currentNumber = ""
+    res.value = ''
+      isPositive = true
+  }
+  else if(enteredValue == '+/-'){
+      res.value = res.value.substring(0, res.value.length - currentNumber.length - (!isPositive ? 1 : 0));
+      res.value += currentNumber * (isPositive ? -1 : 1);
+      isPositive = !isPositive;
+  }
+  else if(enteredValue != '%'){
+      currentNumber += enteredValue
+      res.value += enteredValue;
+  }
+  else {
+      res.value = res.value.substring(0, res.value.length - currentNumber.length);
+      enteredValue = lastNumber / 100 * currentNumber * (isPositive ? -1 : 1);
+      res.value += enteredValue;
+  }
 }
 
 //adding event handler on the document to handle keyboard inputs
@@ -81,12 +116,28 @@ function keyboardInputHandler(e) {
   //operators
   if (e.key === "+") {
     res.value += "+";
+    lastNumber = currentNumber;
+    currentNumber = "";
+    res.value += enteredValue;
+    isPositive = true
   } else if (e.key === "-") {
     res.value += "-";
+    lastNumber = currentNumber;
+    currentNumber = "";
+    res.value += enteredValue;
+    isPositive = true
   } else if (e.key === "*") {
     res.value += "*";
+    lastNumber = currentNumber;
+    currentNumber = "";
+    res.value += enteredValue;
+    isPositive = true
   } else if (e.key === "/") {
     res.value += "/";
+    lastNumber = currentNumber;
+    currentNumber = "";
+    res.value += enteredValue;
+    isPositive = true
   }
 
   //decimal key
@@ -97,6 +148,10 @@ function keyboardInputHandler(e) {
   //press enter to see result
   if (e.key === "Enter") {
     calculate(result.value);
+    lastNumber = currentNumber;
+    currentNumber = "";
+    res.value += enteredValue;
+    isPositive = true
   }
 
   //backspace for removing the last input

styles/dark.css

@@ -29,7 +29,7 @@ h1 {
 }
 
 .container {
-  width: 350px;
+  width: 450px;
   display: flex;
   justify-content: center;
   flex-direction: column;
@@ -97,4 +97,4 @@ a {
 .theme-button {
   all: unset;
   cursor: pointer;
-}
+}

styles/light.css

@@ -25,7 +25,7 @@ h1 {
 }
 
 .container {
-  width: 350px;
+  width: 450px;
   display: flex;
   justify-content: center;
   flex-direction: column;
@@ -96,4 +96,4 @@ a {
 .theme-button {
   all: unset;
   cursor: pointer;
-}
+}