diff --git a/sppa/calc/index.html b/sppa/calc/index.html
new file mode 100644
index 00000000..d5bfaad0
--- /dev/null
+++ b/sppa/calc/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>calc</title>
+  <style>
+    input[type="button"] {
+      width: 50px;
+      height: 50px;
+      font-size: 20px;
+    }
+  </style>
+</head>
+<body>
+
+  <h2>calc</h2>
+  <table>
+    <tr>
+      <td colspan="4"><input type="text" id="display" disabled></td>
+    </tr>
+    <tr>
+      <td><input type="button" value="7" onclick="appendToDisplay('7')"></td>
+      <td><input type="button" value="8" onclick="appendToDisplay('8')"></td>
+      <td><input type="button" value="9" onclick="appendToDisplay('9')"></td>
+      <td><input type="button" value="/" onclick="appendToDisplay('/')"></td>
+    </tr>
+    <tr>
+      <td><input type="button" value="4" onclick="appendToDisplay('4')"></td>
+      <td><input type="button" value="5" onclick="appendToDisplay('5')"></td>
+      <td><input type="button" value="6" onclick="appendToDisplay('6')"></td>
+      <td><input type="button" value="-" onclick="appendToDisplay('-')"></td>
+    </tr>
+    <tr>
+      <td><input type="button" value="1" onclick="appendToDisplay('1')"></td>
+      <td><input type="button" value="2" onclick="appendToDisplay('2')"></td>
+      <td><input type="button" value="3" onclick="appendToDisplay('3')"></td>
+      <td><input type="button" value="+" onclick="appendToDisplay('+')"></td>
+    </tr>
+    <tr>
+      <td><input type="button" value="0" onclick="appendToDisplay('0')"></td>
+      <td><input type="button" value="." onclick="appendToDisplay('.')"></td>
+      <td><input type="button" value="=" onclick="calculate()"></td>
+      <td><input type="button" value="C" onclick="clearDisplay()"></td>
+    </tr>
+  </table>
+
+  <script>
+    function appendToDisplay(value) {
+      document.getElementById('display').value += value;
+    }
+
+    function calculate() {
+      try {
+        document.getElementById('display').value = eval(document.getElementById('display').value);
+      } catch (error) {
+        document.getElementById('display').value = 'Error';
+      }
+    }
+
+    function clearDisplay() {
+      document.getElementById('display').value = '';
+    }
+  </script>
+
+</body>
+</html>
