L html css jquery

// 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>
// 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...">


// <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

// !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();

#jQuery

  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() })
  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     
  << 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() {
      $("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
      $("#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>
  
#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
        }
      }
  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
  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
  
  
  
#html
  navigator.geolocation http://www.freecodecamp.com/challenges/get-geolocation-data
  others http://devdocs.io/dom/navigator