homework day 3

John Costa · John Costa · commit f2130d1508ca · 2015-10-01T06:35:14.000-07:00
diff --git a/costajohnt/Kermitthefrog.jpg b/costajohnt/Kermitthefrog.jpg
diff --git a/costajohnt/day3.html b/costajohnt/day3.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+
+  
+  
+  <meta charset="utf-8">
+
+  <!-- set viewport to device width to allow responsiveness -->
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <!-- Bootstrap CDN -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+
+  <!-- custom styles (always require after Bootstrap) -->
+  <link rel="stylesheet" href="style.css">
+
+  <title>Kermit the Frog here</title>
+</head>
+<body>
+  <script type='text/javascript' src='day3.js'></script>
+  <div class="container">
+    <div class="row">
+      <div class="col-md-6 col-md-offset-3">
+        <h1>Kermie!</h1>
+        <p>Duis rhoncus nec ligula et pulvinar. Donec lacinia venenatis metus vitae scelerisque. Donec porta diam diam, sit amet euismod nisi blandit eu. Suspendisse ac ultricies metus. Praesent convallis venenatis quam eu pretium. Maecenas gravida non massa ut convallis. Morbi at purus pulvinar, viverra metus quis, pretium elit. Sed sit amet euismod risus, et posuere leo. Nunc urna urna, sodales quis dapibus vel, pulvinar a nulla. Phasellus laoreet nunc eros, vel consequat dolor mattis ullamcorper. Nullam quis iaculis odio, sed accumsan nunc. In in venenatis urna. Sed ullamcorper vel turpis sit amet volutpat. Ut suscipit porta semper.This is where the content goes.  The directions for this assignment are two create some content in html.  Import jQuery in day3.html, and use HTML to create some content: at least one paragraph of text and at least one image. Add three buttons. Use the on method to give each button a click event handler. Attach a different effect to each button. For instance, you might have one button hide the image, one button show the image, and one button animate a change of the paragraph's font color. (Can you implement methods not listed above? Of course! But please make sure the user can SEE something unique change on your page for each button press.)</p>
+          <div class="hover">
+            <img src=Kermitthefrog.jpg alt="Kermit">
+          </div>  
+      </div>
+      <!-- <div class="col-sm-6">
+        <h1>col-sm-6</h1>
+        <p>And they take up the whole page on small devices.</p>
+      </div> -->
+    </div>
+  </div>
+</body>
+</html>
diff --git a/costajohnt/day3.js b/costajohnt/day3.js
@@ -0,0 +1,8 @@
+$(document).ready(function() {
+      $('p').click(function() {
+        $('p').hide();
+      $('.hover').click(function() {
+      	$('.hover').hide();
+      });
+    });
+});    
