From fb2a4bc677cc6f0bea181899340718ab70432fc6 Mon Sep 17 00:00:00 2001
From: LSvekis <lassvekis@gmail.com>
Date: Fri, 4 Jun 2021 17:11:24 -0400
Subject: [PATCH] Create customAttributes

---
 customAttributes | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 customAttributes
diff --git a/customAttributes b/customAttributes
new file mode 100644
index 0000000..cc87848
--- /dev/null
+++ b/customAttributes
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head> <title>Complete JavaScript Course</title>
+</head>
+<body>   
+    <div id="message">Complete JavaScript Course</div>    <div id="output"></div>   
+    <script>     
+        window.onload = build;
+        const myArray = ["Laurence", "Mike", "John", "Larry", "Kim", "Joanne", "Lisa", "Janet", "Jane"];
+        const message = document.getElementById('message');
+        function build() {
+            let html = "<h1>My Friends Table</h1><table>";
+            myArray.forEach((item, index) => {
+                html += `<tr data-row="${index}"><td>${item}</td>`;
+                html += `<td class="box">${index + 1}</td></tr>`;
+            })
+            html += '</table>';
+            document.getElementById('output').innerHTML = html;
+            const boxes = document.querySelectorAll('#output .box');
+            boxes.forEach((el) => {
+                el.addEventListener('click', (e) => {
+                    let par = el.closest('[data-row]')
+                    let temp = par.getAttribute('data-row');
+                    let tempName = par.firstChild.textContent;
+                    message.innerHTML = `${tempName } is in row #${temp}`;
+                })
+            })
+        }
+    </script>
+</body>
+</html>
