hannabeasiam · hannabeasiam · Feb 27, 2018 · Nov 28, 2017
diff --git a/lesson12/css/images/ui-icons_444444_256x240.png b/lesson12/css/images/ui-icons_444444_256x240.png
diff --git a/lesson12/css/images/ui-icons_555555_256x240.png b/lesson12/css/images/ui-icons_555555_256x240.png
diff --git a/lesson12/css/images/ui-icons_777620_256x240.png b/lesson12/css/images/ui-icons_777620_256x240.png
diff --git a/lesson12/css/images/ui-icons_777777_256x240.png b/lesson12/css/images/ui-icons_777777_256x240.png
diff --git a/lesson12/css/images/ui-icons_cc0000_256x240.png b/lesson12/css/images/ui-icons_cc0000_256x240.png
diff --git a/lesson12/css/images/ui-icons_ffffff_256x240.png b/lesson12/css/images/ui-icons_ffffff_256x240.png
diff --git a/lesson12/css/jquery-ui.min.css b/lesson12/css/jquery-ui.min.css
diff --git a/lesson12/jQuery.html b/lesson12/jQuery.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>jQuery</title>
+    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
+    <script type="text/javascript">
+    //ready = load will execute when page is loaded
+      jQuery(document).ready(function() { //open anonymous function 
+        jQuery('strong').css('color','orange');
+        $('p span').css('color','red');
+        //on function add event and  event handler 
+        $('#mainhead').on('click',function(){
+          //this: what was previousely selected, add class 'Setselector when #mainhead clicked
+          $(this).addClass('setselector');
+        });
+        //support animation too.  
+        $('section').hide();
+        $('section').fadeIn(3000); //number of mili sec as parameter
+      });
+    </script>
+    <style>
+      .setselector {
+        background-color: red;
+        color: yellow;
+        font-size: 2.5em;
+      }
+    </style>
+  </head>
+  <body>
+    <h2>CIW JavaScript Specialist</h2>
+    <h3 id="mainhead">jQuery</h3>
+    <p>This is some text. jQuery requires specifying a <strong>CSS</strong><span> selector</span>.</p>
+    <section>
+      Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind 
+      texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A 
+      small river named Duden
+    </section>
+  </body>
+</html>
diff --git a/lesson12/jQueryAutocomplete.html b/lesson12/jQueryAutocomplete.html
@@ -0,0 +1,104 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>jQuery UI</title>
+    <link href="css/jquery-ui.min.css" rel="stylesheet">
+    <style>
+      #dialog-link {
+        padding: .4em 1em .4em 20px;
+        text-decoration: none;
+        position: relative;
+      }
+      #dialog-link span.ui-icon {
+        margin: 0 5px 0 0;
+        position: absolute;
+        left: .2em;
+        top: 50%;
+        margin-top: -8px;
+      }
+      #icons span.ui-icon {
+        float: left;
+        margin: 0 4px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>jQuery UI</h1>
+    <h2>Autocomplete</h2>
+    <div>
+      <input id="autocomplete" title="type &quot;a&quot;">
+    </div>
+    <h2>Dialog</h2>
+    <p>
+      <a href="#"><span></span>Info</a>
+    </p>
+    <div id="dialog" title="Do you need information?">
+      <p>Press "Yes" to get information, "No"/X/Escape to close the dialog.</p>
+    </div>
+    <h2>Menu</h2>
+    <ul style="width:100px;" id="menu">
+      <li>Meat</li>
+      <li>Vegetable</li>
+      <li>Fruit
+        <ul>
+          <li>Strawberry</li>
+          <li>Orange</li>
+          <li>Apple</li>
+          <li>Banana</li>
+          <li>Peach</li>
+        </ul>
+      </li>
+      <li>Dairy</li>
+      <li>Breads</li>
+    </ul>
+    <h2>Tooltip</h2>
+    <p>
+      <span title="First Tooltip">Hover over me</span>
+      to see the a tooltip and <span title="Second Tooltip">also over me</span>.
+    </p>
+    <h2>Highlight/Error</h2>
+    <p>
+      <strong></strong>This is highlighed!
+    </p>
+    <p>
+      <strong></strong>This is disabled!
+    </p>
+    <p>
+      <b></b> This is an error!
+    </p>
+    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
+    <script src="js/jquery-ui.min.js"></script>
+    <script type="text/javascript">
+      $(document).ready(function() {
+        var availableTags = [
+          "ActionScript",
+          "AppleScript",
+          "Asp",
+          "BASIC",
+          "C",
+          "C++",
+          "Clojure",
+          "COBOL",
+          "ColdFusion",
+          "Erlang",
+          "Fortran",
+          "Groovy",
+          "Haskell",
+          "Java",
+          "JavaScript",
+          "Lisp",
+          "Perl",
+          "PHP",
+          "Python",
+          "Ruby",
+          "Scala",
+          "Scheme"
+        ];
+        $('#autocomplete').autocomplete({
+          source: availableTags
+        });
+      });
+    </script>      
+  </body>
+</html>
diff --git a/lesson12/jQueryTraversal.html b/lesson12/jQueryTraversal.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>jQuery Traversal</title>
+    <!--add jquery library as external js file-->
+    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
+    <script type="text/javascript">
+    //add ready object under document
+      $(document).ready(function() {
+        //on the button object add onclick event
+        $('button').on('click',function() {
+          //each function is simple version of for loop in jquery
+          $('li').each(function(){
+            //this refer li elements, find 'Vegitables'
+            //html funciton without argument returns: current html value
+            if ($(this).html() == 'Vegetables') {
+              //use html function with passing argument then change current value to passed argument
+              $(this).html('Dairy');
+            }
+          });
+        });
+      });
+    </script>
+  </head>
+  <body>
+    <h2>CIW JavaScript Specialist</h2>
+    <h3>jQuery Traversal</h3>
+    <ul>
+      <li>Meat</li>
+      <li>Fruit</li>
+      <li>Vegetables</li>
+    </ul>
+    <p><button id="change">Change</button></p>
+  </body>
+</html>
diff --git a/lesson12/js/jquery-3.2.1.min.js b/lesson12/js/jquery-3.2.1.min.js
diff --git a/lesson12/js/jquery-ui.min.js b/lesson12/js/jquery-ui.min.js