zero-to-mastery · kalush89 · Mar 8, 2023
diff --git a/src/blocks/albert_kombol/icon.png b/src/blocks/albert_kombol/icon.png
diff --git a/src/blocks/albert_kombol/index.html b/src/blocks/albert_kombol/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Auto-calculate</title>
+</head>
+<body>
+    <div class="wrapper">
+        <div class="main">
+                <div class="input-section">
+                    <input type="number" placeholder="enter a number" name="first-number" id="first-number" value="0"   >
+                    <select name="operator" id="operator-select" >
+                        <option value="+">Sum</option>
+                        <option value="-">Difference</option>
+                        <option value="*">Product</option>
+                        <option value="/">Quotient</option>
+                    </select>
+                    <input type="number" placeholder="enter the second number" name="second-number" id="second-number" value="0" >
+                </div>
+
+                    <div class="ans-section">
+                        <span id="answer"></span>
+                    </div>
+
+        </div>
+    </div>
+
+    <script src="script.js" ></script>
+</body>
+</html>
diff --git a/src/blocks/albert_kombol/meta.json b/src/blocks/albert_kombol/meta.json
@@ -0,0 +1,5 @@
+{
+    "block_name": "Auto-calculate",
+    "author_name": "Albert Kombol",
+    "author_github_url": "https://github.com/kalush89/"
+}
diff --git a/src/blocks/albert_kombol/script.js b/src/blocks/albert_kombol/script.js
@@ -0,0 +1,36 @@
+
+
+const theBody = document.querySelector('body');
+const first = document.getElementById('first-number');
+const second = document.getElementById('second-number');
+const operator = document.getElementById('operator-select');
+const answer = document.getElementById('answer');
+
+const calculate = (operator, first, second) => {
+    switch (operator) {
+        case '+':
+            return first + second
+            break;
+        case '-':
+            return first - second
+            break;
+        case '*':
+            return first * second
+            break;
+        case '/':
+            return first / second
+            break;
+    }
+}
+
+const execute = () => {
+    const theAnswer = calculate(operator.value, parseInt(first.value), parseInt(second.value));
+    answer.innerText = theAnswer;
+}
+
+theBody.addEventListener('input', execute, once="true");
+
+
+
+
+
diff --git a/src/blocks/albert_kombol/style.css b/src/blocks/albert_kombol/style.css
@@ -0,0 +1,55 @@
+html,
+body {
+  margin: 0;
+  font-family: 'Open Sans Condensed', sans-serif;
+  height: 100%;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.wrapper {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  background-color: aquamarine;
+  padding: 10px;
+}
+
+.main .input-section {
+  margin: 0 auto;
+
+}
+
+.main .ans-section {
+  border: 1px solid #ccc;
+  padding: 20px;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+input[type=number] {
+  width: 200px;
+  padding: 10px 15px;
+  margin: 8px 0;
+  border: 1px solid #ccc;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+select {
+  width: 100px;
+  padding: 12px 0;
+  font-size: 16px;
+  font-weight: 600;
+}