machinefriendly · March 4, 2016 14:33 · Mar 4, 2016 · Mar 4, 2016 · Mar 4, 2016 · Mar 2, 2016
diff --git a/L html css jquery b/L html css jquery
@@ -195,7 +195,18 @@ who <span class="text-danger">love</span>
   http://www.w3schools.com/css/exercise.asp?filename=exercise_positioning2   // attention +/- px
   http://www.w3schools.com/css/exercise.asp?filename=exercise_positioning5
   float http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clear  // clear:left/right used for the element AFTER floating one.
+
   block+width% + float http://jsbin.com/kigadejocu/edit?html,output
+  to fill all screen, inline-block (no need CLEAR for elem after float ones) > float http://zh.learnlayout.com/inline-block.html
+        .box2 {
+        display: inline-block;
+        width: 200px;
+        height: 100px;
+        margin: 1em;
+      }
+  inline-block + vertical-align // http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
+
+  #flexbox  http://jsbin.com/xibefobuba/edit?html,css,output   // http://zh.learnlayout.com/flexbox.html
 
 
 

diff --git a/L html css jquery b/L html css jquery
@@ -184,6 +184,7 @@ who <span class="text-danger">love</span>
 #CSS
   display: block/inline/none       // http://www.w3schools.com/css/css_display_visibility.asp
   @media rule // http://zh.learnlayout.com/media-queries.html
+              // http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
         @media screen and (max-width:599px) {
         nav li {
           display: inline;     // li is block as default

diff --git a/learning html css jquery → L html css jquery b/learning html css jquery → L html css jquery
@@ -183,6 +183,12 @@ who <span class="text-danger">love</span>
 
 #CSS
   display: block/inline/none       // http://www.w3schools.com/css/css_display_visibility.asp
+  @media rule // http://zh.learnlayout.com/media-queries.html
+        @media screen and (max-width:599px) {
+        nav li {
+          display: inline;     // li is block as default
+        }
+      }
   position: relative, absolute, static(default)
   http://jsbin.com/wusoxa/edit?html,output   // absolute should have relative as higher level, if not, it's position to browser.
   http://www.w3schools.com/css/exercise.asp?filename=exercise_positioning2   // attention +/- px
@@ -191,6 +197,7 @@ who <span class="text-danger">love</span>
   block+width% + float http://jsbin.com/kigadejocu/edit?html,output
 
 
+
 #html
   navigator.geolocation http://www.freecodecamp.com/challenges/get-geolocation-data
   others http://devdocs.io/dom/navigator
diff --git a/learning html css jquery b/learning html css jquery
@@ -182,12 +182,15 @@ who <span class="text-danger">love</span>
   </script>
 
 #CSS
-  position: relative, absolute
+  display: block/inline/none       // http://www.w3schools.com/css/css_display_visibility.asp
+  position: relative, absolute, static(default)
   http://jsbin.com/wusoxa/edit?html,output   // absolute should have relative as higher level, if not, it's position to browser.
   http://www.w3schools.com/css/exercise.asp?filename=exercise_positioning2   // attention +/- px
   http://www.w3schools.com/css/exercise.asp?filename=exercise_positioning5
   float http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clear  // clear:left/right used for the element AFTER floating one.
-
+  block+width% + float http://jsbin.com/kigadejocu/edit?html,output
+
+
 #html
   navigator.geolocation http://www.freecodecamp.com/challenges/get-geolocation-data
   others http://devdocs.io/dom/navigator
diff --git a/learning html css jquery b/learning html css jquery
@@ -186,6 +186,7 @@ who <span class="text-danger">love</span>
   http://jsbin.com/wusoxa/edit?html,output   // absolute should have relative as higher level, if not, it's position to browser.
   http://www.w3schools.com/css/exercise.asp?filename=exercise_positioning2   // attention +/- px
   http://www.w3schools.com/css/exercise.asp?filename=exercise_positioning5
+  float http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clear  // clear:left/right used for the element AFTER floating one.
 
 #html
   navigator.geolocation http://www.freecodecamp.com/challenges/get-geolocation-data

diff --git a/learning html css jquery b/learning html css jquery
@@ -183,7 +183,8 @@ who <span class="text-danger">love</span>
 
 #CSS
   position: relative, absolute
-  http://jsbin.com/wusoxa/edit?html,output
+  http://jsbin.com/wusoxa/edit?html,output   // absolute should have relative as higher level, if not, it's position to browser.
+  http://www.w3schools.com/css/exercise.asp?filename=exercise_positioning2   // attention +/- px
   http://www.w3schools.com/css/exercise.asp?filename=exercise_positioning5
 
 #html

diff --git a/learning html → learning html css jquery b/learning html → learning html css jquery
diff --git a/learning html b/learning html
@@ -186,4 +186,6 @@ who <span class="text-danger">love</span>
   http://jsbin.com/wusoxa/edit?html,output
   http://www.w3schools.com/css/exercise.asp?filename=exercise_positioning5
 
-
+#html
+  navigator.geolocation http://www.freecodecamp.com/challenges/get-geolocation-data
+  others http://devdocs.io/dom/navigator
diff --git a/learning html b/learning html
@@ -162,7 +162,7 @@ who <span class="text-danger">love</span>
   << actionB w/o func when call action in html   http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_click_trigger
 
   event binding (click/hover..) is a condition, sometime you want to run it, should throw that event, such as click(), https://gist.github.com/anonymous/a966f33774be841f2f47
-
+  .getJSON() = .ajax()  http://www.freecodecamp.com/challenges/convert-json-data-to-html
 
   <script>
     $(document).ready(function() {

diff --git a/learning html b/learning html
@@ -160,6 +160,8 @@ who <span class="text-danger">love</span>
                                      http://www.w3schools.com/jquery/jquery_ref_html.asp
   << elemB can be n/a, ex1>>  alert('abc');  ex2>>ajax call file link http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_getscript     
   << actionB w/o func when call action in html   http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_click_trigger
+
+  event binding (click/hover..) is a condition, sometime you want to run it, should throw that event, such as click(), https://gist.github.com/anonymous/a966f33774be841f2f47
 
 
   <script>

diff --git a/learning html b/learning html
@@ -154,9 +154,12 @@ who <span class="text-danger">love</span>
   $(document).ready(function() {$('button').click(function() {$('p').empty() })})
                   $(function() {$('button').click(function() {$('p').empty() })})
                                 $('button').click(function() {$('p').empty() })
-  the structure is elementA bind a funcA, funcA call elemB do action B (action or function)  
+  the structure is elementA bind a funcA , funcA call elemB do action/func B (action or function)  
+  << funcA is jQuery event           http://www.w3schools.com/jquery/jquery_ref_events.asp
+  << funcB is jQuery effect/htmlCSS  http://www.w3schools.com/jquery/jquery_ref_effects.asp
+                                     http://www.w3schools.com/jquery/jquery_ref_html.asp
   << elemB can be n/a, ex1>>  alert('abc');  ex2>>ajax call file link http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_getscript     
-  << action w/o func when call action in html   http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_click_trigger
+  << actionB w/o func when call action in html   http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_click_trigger
 
 
   <script>

diff --git a/learning html b/learning html
@@ -154,7 +154,9 @@ who <span class="text-danger">love</span>
   $(document).ready(function() {$('button').click(function() {$('p').empty() })})
                   $(function() {$('button').click(function() {$('p').empty() })})
                                 $('button').click(function() {$('p').empty() })
-
+  the structure is elementA bind a funcA, funcA call elemB do action B (action or function)  
+  << elemB can be n/a, ex1>>  alert('abc');  ex2>>ajax call file link http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_getscript     
+  << action w/o func when call action in html   http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_click_trigger
 
 
   <script>

diff --git a/learning html b/learning html
@@ -148,6 +148,14 @@ who <span class="text-danger">love</span>
 
   selector w3schools      http://www.w3schools.com/jquery/trysel.asp
   traveling               http://www.w3schools.com/jquery/jquery_ref_traversing.asp
+
+  http://stackoverflow.com/questions/4643990/is-document-ready-necessary
+  below 3 method are same if code before </body>
+  $(document).ready(function() {$('button').click(function() {$('p').empty() })})
+                  $(function() {$('button').click(function() {$('p').empty() })})
+                                $('button').click(function() {$('p').empty() })
+
+
 
   <script>
     $(document).ready(function() {

diff --git a/learning html b/learning html
@@ -146,7 +146,8 @@ who <span class="text-danger">love</span>
 
 #jQuery
 
-  selector w3schools http://www.w3schools.com/jquery/trysel.asp
+  selector w3schools      http://www.w3schools.com/jquery/trysel.asp
+  traveling               http://www.w3schools.com/jquery/jquery_ref_traversing.asp
 
   <script>
     $(document).ready(function() {

diff --git a/learning html b/learning html
@@ -146,6 +146,8 @@ who <span class="text-danger">love</span>
 
 #jQuery
 
+  selector w3schools http://www.w3schools.com/jquery/trysel.asp
+
   <script>
     $(document).ready(function() {
       $("element|.class|#id").addClass|removeClass("animated-shake");    // addClass+name from .css file.

diff --git a/learning html b/learning html
@@ -162,3 +162,10 @@ who <span class="text-danger">love</span>
       $("body").addClass("animated fadeOut");                 // all body fadeout
     });
   </script>
+
+#CSS
+  position: relative, absolute
+  http://jsbin.com/wusoxa/edit?html,output
+  http://www.w3schools.com/css/exercise.asp?filename=exercise_positioning5
+
+
diff --git a/learning html b/learning html
@@ -155,6 +155,10 @@ who <span class="text-danger">love</span>
       $("#target4").remove();                // remove a element
       $("#target2").appendTo("#right-well");         // MOVE #target2 (from div #left-well) to #right-well
       $("#target5").clone().appendTo("#left-well");  // COPY #target2 (from div #left-well) to #right-well
-
+      $("#target1").parent().css("background-color","red");   // parent() is directParent.
+      $("#right-well").children().css("color","red");         // children() is allChildren
+      $("button:nth-child(2)").addClass("animated bounce");   // select nth element for target class/H.element http://www.freecodecamp.com/challenges/target-a-specific-child-of-an-element-using-jquery#?solution=fccss%0A%20%20%24(document).ready(function()%20%7B%0A%20%20%20%20%24(%22%23target1%22).css(%22color%22%2C%20%22red%22)%3B%0A%20%20%20%20%24(%22%23target1%22).prop(%22disabled%22%2C%20true)%3B%0A%20%20%20%20%24(%22%23target4%22).remove()%3B%0A%20%20%20%20%24(%22%23target2%22).appendTo(%22%23right-well%22)%3B%0A%20%20%20%20%24(%22%23target5%22).clone().appendTo(%22%23left-well%22)%3B%0A%20%20%20%20%24(%22%23target1%22).parent().css(%22background-color%22%2C%20%22red%22)%3B%0A%20%20%20%20%24(%22%23right-well%22).children().css(%22color%22%2C%20%22orange%22)%3B%0A%20%20%20%20%24(%22button%3Anth-child(2)%22).addClass(%22animated%20bounce%22)%3B%0A%20%20%7D)%3B%0Afcces%0A%0A%3C!--%20Only%20change%20code%20above%20this%20line.%20--%3E%0A%0A%3Cdiv%20class%3D%22container-fluid%22%3E%0A%20%20%3Ch3%20class%3D%22text-primary%20text-center%22%3EjQuery%20Playground%3C%2Fh3%3E%0A%20%20%3Cdiv%20class%3D%22row%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22col-xs-6%22%3E%0A%20%20%20%20%20%20%3Ch4%3E%23left-well%3C%2Fh4%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22well%22%20id%3D%22left-well%22%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-default%20target%22%20id%3D%22target1%22%3E%23target1%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-default%20target%22%20id%3D%22target2%22%3E%23target2%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-default%20target%22%20id%3D%22target3%22%3E%23target3%3C%2Fbutton%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20class%3D%22col-xs-6%22%3E%0A%20%20%20%20%20%20%3Ch4%3E%23right-well%3C%2Fh4%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22well%22%20id%3D%22right-well%22%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-default%20target%22%20id%3D%22target4%22%3E%23target4%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-default%20target%22%20id%3D%22target5%22%3E%23target5%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-default%20target%22%20id%3D%22target6%22%3E%23target6%3C%2Fbutton%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A
+      $(".target:even").addClass("animated bounce");          // odd=2nd/4th..   even=1st/3rd/5th
+      $("body").addClass("animated fadeOut");                 // all body fadeout
     });
   </script>
diff --git a/learning html b/learning html
@@ -72,57 +72,89 @@ padding: 20px 40px 40px 20px; clockOrder
    <h1 class="class1">abc</h1>   // class1 > global one
    <h1 class="class1 class2">abc</h1> // class2 > class1
 
-
-
+// !important(in style) > inlineStyle > id > class // but in style definition .pink-text{color:pink!important} makes .pionk-text top level.
+<h1 style="color:grey" id="orange-text" class="pink-text blue-text">Hello</h1>
+
+// Color HEX use RGB red=FF0000=F00=rgb(255,0,0)
+
+//bootstrap 
+  // class=text-center/img-responsive/btn btn-block btn-info btn-danger < add to attribute
+  // block col-md/xs-*
+  // Remember, Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. 
+  // Most of Bootstrap's classes can be applied to a div element.
+    <div class="row">            // < class="row" is must-have, then elements in it share 12 col in total
+      <div class="col-xs-4"><button class="btn btn-block btn-primary">Like</button></div>    // < attention, earch one should have one <div>
+      <div class="col-xs-4"><button class="btn btn-block btn-info">Info</button></div>
+      <div class="col-xs-4"><button class="btn btn-block btn-danger">Delete</button></div>
+    </div>
+
+
+// 80, use <span> deco inline elements
+who <span class="text-danger">love</span>
+
+// font-awesome. ad <link rel="stylesheet" href="... .css"/> 	
+      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i>Like</button>   // "Like" is not necessary 
 
 
 // redo 86
 
-
-
 // object oriented js
-
-var Car = function() {       // Car is constructor
-  this.wheels = 4;
-  this.engines = 1;
-  this.seats = 1;
-};
-var car = new Car();  
-car.wheels=7     << create instance first
-==
-var car = {"wheels":7,"engines":1,"seats":1}  // car is object
-
-
-// object constructor with PARAMETER in func
-var Car = function(a,b,c) {       // Car is constructor
-  this.wheels = a;
-  this.engines = b;
-  this.seats = c;
-};
-var car = new Car(1,2,3);
-
-// private var in object << http://www.freecodecamp.com/challenges/make-object-properties-private#
-        var Car = function() {
-          // this is a private variable
-          var speed = 10;
-
-          // these are public methods
-          this.accelerate = function(change) {
-            speed += change;
-          };
-          this.decelerate = function() {
-            speed -= 5;
-          };
-          this.getSpeed = function() {
-            return speed;
-          };
-        };
-
-        var Bike = function() {
-        var gear;
-        this.getGear = function(){return gear;}
-        this.setGear = function(ee){return gear=ee;}
-        };
-        var myCar = new Car();
-        var myBike = new Bike();
-
+
+    var Car = function() {       // Car is constructor
+      this.wheels = 4;
+      this.engines = 1;
+      this.seats = 1;
+    };
+    var car = new Car();  
+    car.wheels=7     << create instance first
+    ==
+    var car = {"wheels":7,"engines":1,"seats":1}  // car is object
+
+
+    // object constructor with PARAMETER in func
+    var Car = function(a,b,c) {       // Car is constructor
+      this.wheels = a;
+      this.engines = b;
+      this.seats = c;
+    };
+    var car = new Car(1,2,3);
+
+    // private var in object << http://www.freecodecamp.com/challenges/make-object-properties-private#
+            var Car = function() {
+              // this is a private variable
+              var speed = 10;
+
+              // these are public methods
+              this.accelerate = function(change) {
+                speed += change;
+              };
+              this.decelerate = function() {
+                speed -= 5;
+              };
+              this.getSpeed = function() {
+                return speed;
+              };
+            };
+
+            var Bike = function() {
+            var gear;
+            this.getGear = function(){return gear;}
+            this.setGear = function(ee){return gear=ee;}
+            };
+            var myCar = new Car();
+            var myBike = new Bike();
+
+#jQuery
+
+  <script>
+    $(document).ready(function() {
+      $("element|.class|#id").addClass|removeClass("animated-shake");    // addClass+name from .css file.
+      $("#target1").css("color", "red");
+      $("#target1").prop("disabled","true"); // showButDisable a element
+      $("h3").html("<i>jQuery Playground</i>");  // change=replace text content inside a element tag
+      $("#target4").remove();                // remove a element
+      $("#target2").appendTo("#right-well");         // MOVE #target2 (from div #left-well) to #right-well
+      $("#target5").clone().appendTo("#left-well");  // COPY #target2 (from div #left-well) to #right-well
+
+    });
+  </script>
diff --git a/learning html b/learning html
@@ -87,8 +87,42 @@ var Car = function() {       // Car is constructor
   this.engines = 1;
   this.seats = 1;
 };
-var car = new Car();
+var car = new Car();  
+car.wheels=7     << create instance first
 ==
-var car = {"wheels":4,"engines":1,"seats":1}  // car is object
+var car = {"wheels":7,"engines":1,"seats":1}  // car is object
 
-// 
+
+// object constructor with PARAMETER in func
+var Car = function(a,b,c) {       // Car is constructor
+  this.wheels = a;
+  this.engines = b;
+  this.seats = c;
+};
+var car = new Car(1,2,3);
+
+// private var in object << http://www.freecodecamp.com/challenges/make-object-properties-private#
+        var Car = function() {
+          // this is a private variable
+          var speed = 10;
+
+          // these are public methods
+          this.accelerate = function(change) {
+            speed += change;
+          };
+          this.decelerate = function() {
+            speed -= 5;
+          };
+          this.getSpeed = function() {
+            return speed;
+          };
+        };
+
+        var Bike = function() {
+        var gear;
+        this.getGear = function(){return gear;}
+        this.setGear = function(ee){return gear=ee;}
+        };
+        var myCar = new Car();
+        var myBike = new Bike();
+
diff --git a/learning html b/learning html
@@ -76,4 +76,19 @@ padding: 20px 40px 40px 20px; clockOrder
 
 
 
-// redo 86
+// redo 86
+
+
+
+// object oriented js
+
+var Car = function() {       // Car is constructor
+  this.wheels = 4;
+  this.engines = 1;
+  this.seats = 1;
+};
+var car = new Car();
+==
+var car = {"wheels":4,"engines":1,"seats":1}  // car is object
+
+// 
diff --git a/learning html b/learning html
@@ -1,3 +1,5 @@
+// a note on training freecodecamp.com
+
 Remember that in order to start a comment, you need to use <!-- and to end a comment, you need to use -->
 // simple
 <h2 style="color:blue"> CatPhotoApp</h2>
@@ -70,3 +72,8 @@ padding: 20px 40px 40px 20px; clockOrder
    <h1 class="class1">abc</h1>   // class1 > global one
    <h1 class="class1 class2">abc</h1> // class2 > class1
 
+
+
+
+
+// redo 86
diff --git a/learning html b/learning html
@@ -41,3 +41,32 @@ h2 {
 .small-image{ width:100px;}
 </style>
 <img class="small-image" src="http...">
+
+
+// <a> anchor link
+<p> View more <a href="http://www.freecatphotoapp.com">cat photos</a></p>
+// alt
+<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back"></a>
+
+// list, ul vs ol
+<ul>
+  <li>cat nip</li>
+  <li>laser pointers</li>
+  <li>lasagna</li>
+</ul>
+<p>Top 3 things cats hate:</p>
+<ol>
+  <li>gogo</li>
+  <li>upup</li>
+  <li>downdown</li>
+</ol>
+
+// margin(distance between own border and other element) vs padding (distance w/ own border)
+padding: 20px 40px 40px 20px; clockOrder
+
+// style: element as body/h2 , class as .blackbox, id as #idname
+
+// when conflict in serveral css, the specific applied to element win.
+   <h1 class="class1">abc</h1>   // class1 > global one
+   <h1 class="class1 class2">abc</h1> // class2 > class1
+
diff --git a/learning html b/learning html
@@ -1,2 +1,43 @@
 Remember that in order to start a comment, you need to use <!-- and to end a comment, you need to use -->
-<h2 style="color:blue"> CatPhotoApp</h2>
+// simple
+<h2 style="color:blue"> CatPhotoApp</h2>
+// separate <style>, css to ELEMENT, auto call by html
+<h2>CatPhotoApp</h2>
+<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
+<style>
+  h2 {color:blue;}
+</style>
+// css CLASS, call by adding .class into html
+<style>
+  .red-text {
+    color: red;
+  }
+</style>
+<h2 class="red-text">CatPhotoApp</h2>
+<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
+
+// font-family > import font with url, then call in style with familyName 
+<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+  h2 {
+    font-family: Lobster;
+  }
+</style>
+<h2 class="red-text">CatPhotoApp</h2>
+
+// font-family degradation
+h2 {
+    font-family: Lobster, Monospace;   // if Lobster is not available, use Monospace.
+  }
+
+// image, img/src, self closing
+<img src=https://bit.ly/fcc-relaxing-cat>
+
+// image size
+<style>
+.small-image{ width:100px;}
+</style>
+<img class="small-image" src="http...">
diff --git a/learning html b/learning html
@@ -0,0 +1,2 @@
+Remember that in order to start a comment, you need to use <!-- and to end a comment, you need to use -->
+<h2 style="color:blue"> CatPhotoApp</h2>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		Remember that in order to start a comment, you need to use <!-- and to end a comment, you need to use -->
		<h2 style="color:blue"> CatPhotoApp</h2>