added calculator app

AnuragAnalog · AnuragAnalog · commit 47b42c6ad01e · 2023-06-28T10:31:04.000-04:00
diff --git a/mini-calculator/index.html b/mini-calculator/index.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+    <head>
+        <title>
+            A mini calculator
+        </title>
+        <link rel="stylesheet" href="style.css" type="text/css">
+    </head>
+    <body>
+        <span id="num1-el"></span>
+        <span id="num2-el"></span>
+        <br>
+            <button onclick="add()">Add</button>
+            <button onclick="subtract()">Subtract</button>
+            <button onclick="divide()">Divide</button>
+            <button onclick="multiply()">Multiply</button>
+        <br>
+        <span id="sum-el">Sum: </span>
+        <script src="index.js"></script>
+    </body>
+</html>
diff --git a/mini-calculator/index.js b/mini-calculator/index.js
@@ -0,0 +1,31 @@
+//@ts-check
+
+let num1 = 8;
+let num2 = 2;
+
+// Extracting the elements
+num1EL = document.getElementById("num1-el");
+num2EL = document.getElementById("num2-el");
+
+num1EL.textContent = num1;
+num2EL.textContent = num2;
+
+function add() {
+    let sum = num1 + num2;
+    document.getElementById("sum-el").textContent = "Sum: " + sum;
+}
+
+function subtract() {
+    let diff = num1 - num2;
+    document.getElementById("sum-el").textContent = "Difference: " + diff;
+}
+
+function divide() {
+    let div = num1 / num2;
+    document.getElementById("sum-el").textContent = "Division: " + div;
+}
+
+function multiply() {
+    let prod = num1 * num2;
+    document.getElementById("sum-el").textContent = "Multiply: " + prod;
+}
diff --git a/mini-calculator/style.css b/mini-calculator/style.css
@@ -0,0 +1,21 @@
+body {
+    font-family: Arial, Helvetica, sans-serif;
+    padding: 20px 0;
+    margin: 0;
+    text-align: center;
+}
+
+span {
+    border-bottom: 2px solid black;
+    padding: 4px;
+}
+
+button {
+    margin: 20px 0;
+    background: white;
+    color: black;
+    border: 1px solid black;
+    font-weight: bold;
+    cursor: pointer;
+    padding: 5px 8px;
+}
