Simple Calculator

HuXn-WebDev · HuXn-WebDev · commit 36120777a577 · 2022-06-29T13:38:50.000-07:00
diff --git a/23. Simple Calculator/app.js b/23. Simple Calculator/app.js
@@ -0,0 +1,20 @@
+document.getElementById("btn").addEventListener("click", function () {
+  let num1 = document.querySelector(".num1").value;
+  let num2 = document.querySelector(".num2").value;
+  let result = document.querySelector(".result");
+  let oprator = document.getElementById("selectOp").value;
+
+  switch (oprator) {
+    case "plus":
+      result.innerHTML = Number(num1) + Number(num2);
+      break;
+    case "min":
+      result.innerHTML = Number(num1) - Number(num2);
+      break;
+    case "dev":
+      result.innerHTML = Number(num1) / Number(num2);
+      break;
+    case "multi":
+      result.innerHTML = Number(num1) * Number(num2);
+  }
+});
diff --git a/23. Simple Calculator/index.html b/23. Simple Calculator/index.html
@@ -0,0 +1,29 @@
+<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" />
+    <title>Simple Calculator</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="main">
+      <div class="inputs">
+        <h1 class="result">Result</h1>
+        <select id="selectOp">
+          <option value="plus">+</option>
+          <option value="min">-</option>
+          <option value="dev">/</option>
+          <option value="multi">*</option>
+        </select>
+        <input type="number" class="num1" placeholder="Number 1" />
+        <input type="number" class="num2" placeholder="Number 2" />
+      </div>
+      <div class="submitBtn">
+        <button id="btn">Submit</button>
+      </div>
+    </div>
+
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/23. Simple Calculator/style.css b/23. Simple Calculator/style.css
@@ -0,0 +1,43 @@
+body {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: crimson;
+  color: white;
+  font-family: sans-serif;
+}
+
+.main {
+  padding: 5px 0;
+  text-align: center;
+}
+
+input {
+  display: flex;
+  flex-direction: column;
+}
+
+.inputs input {
+  border: none;
+  border-radius: 5px;
+  padding: 1rem 10rem;
+  outline: none;
+  margin-bottom: 10px;
+}
+
+#selectOp {
+  margin-bottom: 10px;
+  padding: 10px;
+  outline: none;
+}
+
+#btn {
+  border: none;
+  background: transparent;
+  color: white;
+  padding: 10px 20px;
+  border: 2px solid white;
+  margin-top: 10px;
+  cursor: pointer;
+}
