From 06a4958c1f15ec8836bbf46cb351e1c60d8bf568 Mon Sep 17 00:00:00 2001
From: Hanna Lee <hannabeasiam@gmail.com>
Date: Tue, 28 Nov 2017 14:37:27 -0500
Subject: [PATCH] lab6 created. jquery function added basic function all works

---
 algorithm.md         |  12 ++++++
 assets/css/style.css |   0
 assets/img/logo.png  | Bin 0 -> 2885 bytes
 index.html           |  99 +++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 111 insertions(+)
 create mode 100644 algorithm.md
 create mode 100644 assets/css/style.css
 create mode 100644 assets/img/logo.png
 create mode 100644 index.html

diff --git a/algorithm.md b/algorithm.md
new file mode 100644
index 0000000..55f2d24
--- /dev/null
+++ b/algorithm.md
@@ -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
\ No newline at end of file
diff --git a/assets/css/style.css b/assets/css/style.css
new file mode 100644
index 0000000..e69de29
diff --git a/assets/img/logo.png b/assets/img/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..669c8566e1ed0c0fdc17cf779d231cf64bfa31e4
GIT binary patch
literal 2885
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

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
new file mode 100644
index 0000000..0b818fb
--- /dev/null
+++ b/index.html
@@ -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>
\ No newline at end of file