summaryrefslogtreecommitdiff
path: root/javascript/03-calculator/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'javascript/03-calculator/index.html')
-rw-r--r--javascript/03-calculator/index.html44
1 files changed, 44 insertions, 0 deletions
diff --git a/javascript/03-calculator/index.html b/javascript/03-calculator/index.html
new file mode 100644
index 0000000..fc2398b
--- /dev/null
+++ b/javascript/03-calculator/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <title>Calculator</title>
+</head>
+
+<body>
+ <h1>Calculator</h1>
+
+ Number 1: <input type="text" id="num1" value="0"/><br/>
+ Number 2: <input type="text" id="num2" value="0"/><br/>
+
+ <button onclick="calculate()">Add</button><br/>
+
+ Result: <span id="resultArea"></span>
+
+ <script>
+ const addButton = document.getElementById("addButton");
+ const resultArea = document.getElementById("resultArea");
+
+ function calculate() {
+ // 1. Fetch values from the text fields using their IDs
+ let value1 = document.getElementById("num1").value;
+ let value2 = document.getElementById("num2").value;
+
+ // 2. Convert strings to floating-point numbers
+ let number1 = parseFloat(value1);
+ let number2 = parseFloat(value2);
+
+ // 3. Handle empty fields or invalid inputs (fallback to 0)
+ if (isNaN(number1)) number1 = 0;
+ if (isNaN(number2)) number2 = 0;
+
+ // 4. Perform math addition
+ let sum = number1 + number2;
+
+ // 5. Output the final sum to the page
+ resultArea.innerText = sum;
+ }
+ </script>
+</body>
+
+</html>