Finished module 5

fx2000 · fx2000 · commit 0bd0a01ab4ad · 2020-02-11T13:59:35.000-05:00
diff --git a/exercises/29 - Events/events1.html b/exercises/29 - Events/events1.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Document</title>
+  </head>
+  <body>
+    <button class="butts">Click me!</button>
+    <button class="cool">Click me also!</button>
+
+    <h2>Buy Buttons</h2>
+
+    <button class="buy">Buy Item 1</button>
+    <button class="buy">Buy Item 2</button>
+    <button class="buy">Buy Item 3</button>
+    <button class="buy">Buy Item 4</button>
+    <button class="buy">Buy Item 5</button>
+    <button class="buy">Buy Item 6</button>
+    <button class="buy">Buy Item 7</button>
+    <button class="buy">Buy Item 8</button>
+    <button class="buy">Buy Item 9</button>
+    <button class="buy">Buy Item 10</button>
+
+    <script src="./events1.js"></script>
+  </body>
+</html>
diff --git a/exercises/29 - Events/events1.js b/exercises/29 - Events/events1.js
@@ -0,0 +1,16 @@
+const butts = document.querySelector('.butts');
+const coolButton = document.querySelector('.cool');
+
+const buyButtons = document.querySelectorAll('button.buy');
+
+const handleClick = event => {
+  console.log(event);
+};
+
+butts.addEventListener('click', handleClick);
+coolButton.addEventListener('click', handleClick);
+
+buyButtons.forEach(element => {
+  console.log(element);
+  element.addEventListener('click', handleClick);
+});
diff --git a/exercises/29 - Events/forms.html b/exercises/29 - Events/forms.html
@@ -1,30 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>HTML Forms</title>
+    <link rel="stylesheet" href="../../base.css" />
+  </head>
 
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <title>HTML Forms</title>
-  <link rel="stylesheet" href="../../base.css">
-</head>
-
-<body>
-  <div class="wrapper">
-    <a class="wes" href="https://wesbos.com">Wes Bos</a>
-    <form name="signup">
-      <label for="name">Name</label>
-      <input type="text" id="name" name="name" value="Wes Bos">
-      <label for="email">Email</label>
-      <input type="email" id="email" name="email" value="wesbos@gmail.com">
-      <input type="checkbox" id="agree" name="agree">
-      <label for="agree">I agree to the terms and conditions</label>
-      <hr>
-      <button type="submit">Submit</button>
-    </form>
-  </div>
-
-
-  <script src="./forms.js"></script>
-</body>
+  <body>
+    <div class="wrapper">
+      <a class="wes" href="https://wesbos.com">Wes Bos</a>
+      <form name="signup">
+        <label for="name">Name</label>
+        <input type="text" id="name" name="name" value="Wes Bos" />
+        <label for="email">Email</label>
+        <input type="email" id="email" name="email" value="wesbos@gmail.com" />
+        <input type="checkbox" id="agree" name="agree" />
+        <label for="agree">I agree to the terms and conditions</label>
+        <hr />
+        <button type="submit">Submit</button>
+      </form>
+    </div>
 
+    <script src="./forms.js"></script>
+  </body>
 </html>
diff --git a/exercises/29 - Events/forms.js b/exercises/29 - Events/forms.js
@@ -0,0 +1,8 @@
+console.log('it works');
+
+const signupForm = document.querySelector('[name="signup"]');
+
+signupForm.addEventListener('submit', event => {
+  event.preventDefault();
+  const name = event.currentTarget.name.value;
+});
