event handling

masteryodaa · masteryodaa · commit 8bef9570787b · 2021-10-17T16:10:52.000+05:30
diff --git a/15. Event Handling/1. Balloon.html b/15. Event Handling/1. Balloon.html
@@ -0,0 +1,28 @@
+
+<p>🎈</p>
+
+<script>
+  let p = document.querySelector("p");
+  let size;
+  function setSize(newSize) {
+    size = newSize;
+    p.style.fontSize = size + "px";
+  }
+  setSize(20);
+
+  function arrowKey(e) {
+    if (e.key == "ArrowUp") {
+      if (size > 70) {
+        p.textContent = "💥";
+        document.body.removeEventListener("keydown", arrowKey);
+      } else {
+        setSize(size * 1.1);
+        e.preventDefault();
+      }
+    } else if (e.key == "ArrowDown") {
+      setSize(size * 0.9);
+      e.preventDefault();
+    }
+  }
+  document.body.addEventListener("keydown", arrowKey);
+</script>
diff --git a/15. Event Handling/2. Mousetrail.html b/15. Event Handling/2. Mousetrail.html
@@ -0,0 +1,43 @@
+<!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">
+    <title>Document</title>
+</head>
+<body>
+    <!doctype html>
+
+<style>
+  .trail { /* className for the trail elements */
+    position: absolute;
+    height: 6px; width: 6px;
+    border-radius: 3px;
+    background: orange;
+  }
+  body {
+    height: 500px;
+  }
+</style>
+
+<script>
+    let dots = [];
+    for (let i = 0; i < 12; i++) {
+      let node = document.createElement("div");
+      node.className = "trail";
+      document.body.appendChild(node);
+      dots.push(node);
+    }
+
+    let currentDot = 0;
+    
+    window.addEventListener("mousemove", event => {
+      let dot = dots[currentDot];
+      dot.style.left = (event.pageX - 3) + "px";
+      dot.style.top = (event.pageY - 3) + "px";
+      currentDot = (currentDot + 1) % dots.length;
+    });
+  </script>
+</body>
+</html>
diff --git a/15. Event Handling/3. Tabs.html b/15. Event Handling/3. Tabs.html
@@ -0,0 +1,47 @@
+<!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">
+    <title>Document</title>
+</head>
+
+<body>
+
+    <tab-panel>
+        <div data-tabname="one">Tab one</div>
+        <div data-tabname="two">Tab two</div>
+        <div data-tabname="three">Tab three</div>
+    </tab-panel>
+    <script>
+        function asTabs(node) {
+            let tabs = Array.from(node.children).map(node => {
+                let button = document.createElement("button");
+                button.textContent = node.getAttribute("data-tabname");
+                let tab = { node, button };
+                button.addEventListener("click", () => selectTab(tab));
+                return tab;
+            });
+
+            let tabList = document.createElement("div");
+            for (let { button } of tabs) tabList.appendChild(button);
+            node.insertBefore(tabList, node.firstChild);
+
+            function selectTab(selectedTab) {
+                for (let tab of tabs) {
+                    let selected = tab == selectedTab;
+                    tab.node.style.display = selected ? "" : "none";
+                    tab.button.style.color = selected ? "red" : "";
+                }
+            }
+            selectTab(tabs[0]);
+        }
+
+        asTabs(document.querySelector("tab-panel"));
+    </script>
+
+</body>
+
+</html>
