example of closure

abhishekrathore · abhishekrathore · commit 254895b6332b · 2023-04-19T01:51:43.000+05:30
diff --git a/index.html b/index.html
@@ -0,0 +1,42 @@
+<!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="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
+    />
+    <title>Advanced JavaScript</title>
+  </head>
+  <body class="container">
+    <h3>Advanced JavaScript @CoderDost</h3>
+    <div>
+      <div class="grid">
+        <div>
+          <button id="btn1" onclick="counter1()">a</button>
+        </div>
+        <div>
+          <button id="btn2" onclick="counter2()">b</button>
+        </div>
+      </div>
+
+      <input type="text" id="text1" />
+      <button onclick="strAdder1()">Add String</button>
+
+      <p id="text-output1">p1</p>
+
+      <input type="text" id="text2" />
+      <button onclick="strAdder2()">
+        Add String
+      </button>
+
+      <p id="text-output2">p2</p>
+    </div>
+
+    <script src="index.js"></script>
+    <script src="test.js"></script>
+
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,24 @@
+
+function initCounter(id) {
+  let count = 0;
+  return function () {
+    count++;
+    document.getElementById(id).innerText = count;
+  };
+}
+let counter1 = initCounter('btn1');
+let counter2 = initCounter('btn2');
+
+
+
+function initAddString(inputId, outputId) {
+  let str = '';
+  return function () {
+    str += ' ' + document.getElementById(inputId).value;
+    document.getElementById(inputId).value = '';
+    document.getElementById(outputId).innerText = str;
+  };
+}
+
+let strAdder1 = initAddString('text1', 'text-output1');
+let strAdder2 = initAddString('text2', 'text-output2');
diff --git a/test.js b/test.js
