hannabeasiam
diff --git a/‎algorithm.md‎
Lines changed: 12 additions & 0 deletions b/‎algorithm.md‎
Lines changed: 12 additions & 0 deletions
diff --git a/‎assets/css/style.css‎ b/‎assets/css/style.css‎
diff --git a/‎assets/img/logo.png‎
2.82 KB b/‎assets/img/logo.png‎
2.82 KB
diff --git a/‎index.html‎
Lines changed: 99 additions & 0 deletions b/‎index.html‎
Lines changed: 99 additions & 0 deletions
@@ -0,0 +1,12 @@
+```
+Using jQuery, create a web page that contains a form and below the form a <div> containing a small image and text of your choice. In the form, create an Effect field that contains the following radio buttons: Show, Hide, Toggle, Fade In, Fade Out, Fade To, Slide Down, Slide Up, Slide Toggle. Add an Apply button to the form that when clicked, performs the selected jQuery animation on the <div> tag. E.g. If Show is selected, the <div> is shown or if Hide is selected, the <div> is hidden.
+```
++ create form tag with 9 radio button
+  - Show, Hide, Toggle, Fade In, Fade Out, Fade To, Slide Down, Slide Up, Slide Toggle. are button value
+  - adjust above jquery actions with onclick event hander to div tag
+
++ below form tag create div tag with image with  text
+
++ add text to discribe animation function
+
++ set original file opacity 1000 on reset button or add third parameter to come back original version
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Lab6 Hanna Lee</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="assets/css/style.css" rel="stylesheet">
+    <!--<script src="script/lab6.js"></script>-->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script type="text/javascript">
+      jQuery(document).ready(function() { //open anonymous function
+        //grab input tag add 
+        
+        $('input').on('change',function () {
+          $(this).each(function() {
+            var findID = this.id; console.log(findID);
+// Show, Hide, Toggle, Fade In, Fade Out, Fade To, Slide Down, Slide Up, Slide Toggle.
+            switch (findID) {
+              case 'Show':
+                $('div').show();
+                break;
+              case 'Hide':
+                $('div').hide();
+                break;
+              case 'Toggle':
+                $('div').toggle();
+                break;
+              case 'FadeIn':
+                $('div').fadeIn(); //Display the matched elements by fading them to opaque.
+                break;
+              case 'FadeOut':
+                $('div').fadeOut(3000);//Hide the matched elements by fading them to transparent.
+                break;  
+              case 'FadeTo':    //slow indicate duration of 200-600 opacity 0.5
+                $('div').fadeTo('slow', 0.5); //Adjust the opacity of the matched elements.
+                break;
+              case 'SlideDown':
+                $('div').slideDown(); //Display the matched elements with a sliding motion.
+                break;
+              case 'SlideUp':
+                $('div').slideUp(); //Hide the matched elements with a sliding motion.
+                break;
+              case 'SlideToggle':
+                $('div').slideToggle(); //Display or hide the matched elements with a sliding motion.
+                break;
+            }            
+          });
+          
+        });
+
+
+      });
+
+    
+    </script>
+  </head>
+  <body>
+    <h1>Explore jquery</h1>
+    <form name="myForm">
+      <p>select function</p>
+
+      <input type="radio" name="animation" id="Show">
+      <label for="Show">Show</label>
+
+      <input type="radio" name="animation" id="Hide">
+      <label for="Hide">Hide</label>
+
+      <input type="radio" name="animation" id="Toggle">
+      <label for="Toggle">Toggle</label>
+      
+      <input type="radio" name="animation" id="FadeIn">
+      <label for="FadeIn">Fade In</label>
+
+      <input type="radio" name="animation" id="FadeOut">
+      <label for="FadeOut">Fade Out</label>
+
+      <input type="radio" name="animation" id="FadeTo">
+      <label for="FadeTo">Fade To</label>
+
+      <input type="radio" name="animation" id="SlideDown">
+      <label for="SlideDown">Slide Down</label>
+
+      <input type="radio" name="animation" id="SlideUp">
+      <label for="SlideUp">Slide Up</label>
+      
+      <input type="radio" name="animation" id="SlideToggle">
+      <label for="SlideToggle">Slide Toggle</label>
+    </form>
+    <div id="soflomain" >
+      <img src="assets/img/logo.png" alt="sofloLogo">
+      <p>Not only is technology always changing. It’s also important to remember that the internet has a numerous amount of recourses to learn from as a programmer. 
+        Being a part of the online community as programming students, and recent programming graduates; this is a platform where likeminded people share resources that helped them learn and grow.
+        With a numerous amount of information shared on this one platform, as a one stop shop to find resources that you need; as a student programmer entering the world as a professional. 
+        At SoFlo Nucleus learning never ends.</p>
+    </div>
+
+  
+  </body>
+</html>