From 00ae0eaaa0878b988bf4aab4b783b0ca5b76b563 Mon Sep 17 00:00:00 2001
From: LSvekis <lassvekis@gmail.com>
Date: Sat, 11 Sep 2021 16:49:47 -0400
Subject: [PATCH] Create element attributes

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