Started exercise 3 of chapter 10

Drummingcoder · Drummingcoder · commit 99fe834624db · 2024-11-28T16:34:47.000Z
diff --git a/ch10exercise1 and 2.html b/ch10exercise1 and 2.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <title>Chapter 10: Example 15</title>
+  <title>Chapter 10</title>
 </head>
 <body>
   <img id="img0" src="usa.gif" />
diff --git a/ch10exercise3.html b/ch10exercise3.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Chapter 10</title>
+  <style>
+    .tabStrip {
+      background-color: #E4E2D5;
+      padding: 3px;
+      height: 22px;
+    }
+    .tabStrip div {
+      float: left;
+      font: 14px arial;
+      cursor: pointer;
+    }
+    .tabStrip-tab {
+      padding: 3px;
+    }
+    .tabStrip-tab-hover {
+      border: 1px solid #316AC5;
+      background-color: #C1D2EE;
+      padding: 2px;
+    }
+    .tabStrip-tab-click {
+      border: 1px solid #facc5a;
+      background-color: #f9e391;
+      padding: 2px;
+    }
+  </style>
+</head>
+<body>
+  <div class="tabStrip">
+    <div data-tab-number="1" class="tabStrip-tab">Tab 1</div>
+    <div data-tab-number="2" class="tabStrip-tab">Tab 2</div>
+    <div data-tab-number="3" class="tabStrip-tab">Tab 3</div>
+  </div>
+  <div id="descContainer"></div>
+  <script src="event-utility.js"></script>
+  <script>
+  function handleEvent(e) {
+    var target = evt.getTarget(e);
+    switch (e.type) {
+      case "mouseover":
+        if (target.className == "tabStrip-tab") {
+          target.className = "tabStrip-tab-hover";
+        }
+        break;
+      case "mouseout":
+        if (target.className == "tabStrip-tab-hover") {
+          target.className = "tabStrip-tab";
+        }
+        break;
+      case "click":
+        if (target.className == "tabStrip-tab-hover") {
+          target.className = "tabStrip-tab-click";
+          var num = target.getAttribute("data-tabnumber");
+          showDescription(num);
+        }
+        break;
+    }
+  }
+  function showDescription(num) {
+    var descContainer = document.getElementById("descContainer");
+    var text = "Description for Tab " + num;
+    descContainer.innerHTML = text;
+  }
+  evt.addListener(document, "mouseover", handleEvent);
+  evt.addListener(document, "mouseout", handleEvent);
+  evt.addListener(document, "click", handleEvent);
+  </script>
+</body>
+</html>
