MostlyCalculator

2024-10-11 10:55:09 +02:00
parent a94be56583
commit bc4486fe11
5 changed files with 220 additions and 4 deletions
--- a/MiniProjects/Calculator/calculator.html
+++ b/MiniProjects/Calculator/calculator.html
@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Calculator</title>
+</head>
+<style>
+    /* From Uiverse.io by emmanuelh-dev */ 
+.calculator {
+  border: 1px solid rgb(179, 179, 179);
+  border-radius: 0.375rem;
+  width: 190px;
+  height: 254px;
+  font-family: Arial, sans-serif;
+  margin: 20% auto;
+  padding: 10px;
+}
+
+.output {
+  border: 1px solid #ccc;
+  border-radius: 0.375rem;
+  height: 40px;
+  margin-bottom: 10px;
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 10px;
+}
+
+.result {
+  font-size: 20px;
+}
+
+.buttons {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 5px;
+}
+
+button {
+  border: none;
+  border-radius: 0.375rem;
+  padding: 10px;
+  background-color: #eee;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+button:hover {
+  background-color: #ddd;
+}
+
+button:active {
+  background-color: #ccc;
+}
+
+.bg-green {
+  background-color: rgba(0, 177, 29, 0.651);
+  color: white;
+}
+
+.bg-green:hover {
+  background-color: rgba(0, 231, 39, 0.651);
+  color: white;
+}
+
+.bg-red {
+  background-color: rgba(223, 4, 4, 0.651);
+  color: white;
+}
+
+.bg-red:hover {
+  background-color: rgba(255, 1, 1, 0.651);
+  color: white;
+}
+</style>
+<body>
+    <div class="calculator">
+        <div class="output">
+          <span class="result" id="result">0</span>
+        </div>
+        <div class="buttons">
+          <button id="one" onclick="update(1)">1</button>
+          <button id="two" onclick="update(2)">2</button>
+          <button id="three" onclick="update(3)">3</button>
+          <button id="add" onclick="operation('+')">+</button>
+          <button id="four" onclick="update(4)">4</button>
+          <button id="five" onclick="update(5)">5</button>
+          <button id="six" onclick="update(6)">6</button>
+          <button id="min" onclick="operation('-')">-</button>
+          <button id="seven" onclick="update(7)">7</button>
+          <button id="eight" onclick="update(8)">8</button>
+          <button id="nine" onclick="update(9)">9</button>
+          <button id="mult" onclick="operation('*')">*</button>
+          <button class="bg-red" id="c" onclick="clearout()">C</button>
+          <button id="zero" onclick="update(0)">0</button>
+          <button class="bg-green" id="equal" onclick="showresult()">=</button>
+          <button id="add" onclick="operation('/')">/</button>
+        </div>
+      </div>
+      <script src="calculator.js"></script>
+</body>
+</html>
--- a/MiniProjects/Calculator/calculator.js
+++ b/MiniProjects/Calculator/calculator.js
@ -0,0 +1,51 @@
+var number = 0;
+var newNum = true
+var operand = null;
+function update(num){
+    if (newNum){
+        document.getElementById("result").innerHTML += num;
+    }else{
+        storenum(num);
+    }
+}
+
+function clearout(){
+    number = 0;
+    document.getElementById("result").innerHTML = "";
+}
+
+function storenum(num){
+    var currentNumber =Number(document.getElementById("result").innerHTML);
+    switch (operand){
+        case '*':
+            number = number * currentNumber;
+            break;
+        case '/':
+            number = number / currentNumber;
+            break;
+        case '+':
+            number = number + currentNumber;
+            break;
+        case '-':
+            number = number - currentNumber;
+            break;
+        default:
+            if(number == 0) number = currentNumber;
+            break;
+    }
+    if (num != 0){
+        document.getElementById("result").innerHTML = '' + num;
+    }
+    console.log(number)
+    newNum = true;
+}
+
+function operation(simbol){
+    operand = simbol;
+    newNum = false
+}
+
+function showresult(){
+    storenum(0);
+    document.getElementById("result").innerHTML = number;
+}