DAY 02–25/04/2016

Bonjour ,

Actions are the best way to kill your anxiety .

So , let’s continue with Free Code Camp . Today we will be exploring jQuery something completely new to me .

Some notes on jQuery :

• document ready function — The important thing to know is that code you put inside this function will run as soon as your browser has loaded your page.
• All jQuery functions start with a $, usually referred to as a dollar sign operator, or simply as bling.
• jQuery to add CSS class “animated-bounce” to all your buttons using jQuery’s addclass() function.

<script>
    $(document).ready(function(){
        $("button").addclass("animated bounce");//HTML tag
        $(".well").addClass("animated shake");//class
        $("#target3").addClass("animateed fadeout");//id
    });
</script>

• jQuery could also be used to remove class from an existing element .

<script>
 $(“button”).removeClass(“btn-default”); // remove class
});
</script>

• jQuery has a function called .css() that allows you to change the CSS of an element.

<script>
 $(document).ready(function() {
 $(“#target1”).css(“color”,”red”);
 });
</script>

• You can also change the non-CSS properties of HTML elements with jQuery. For example, you can disable buttons. jQuery has a function called .prop() that allows you to adjust the properties of elements.

<script>
 $(document).ready(function() {
 $(“#target1”).prop(“disabled”, “true”); //disable element with id
});

• jQuery has a function called .html() that lets you add HTML tags and text within an element.
• jQuery also has a similar function called.text() that only alters text without adding tags.

<script>
 $(document).ready(function() {
 $(“#target4”).html(“<em>#target4</em>”); 
 });
</script>

• jQuery has a function called .remove() that will remove an HTML element entirely .

<script>
 $(document).ready(function() {
 $(“#target4”).remove();
});

• jQuery has a function called appendTo() that allows you to select HTML elements and append them to another element.

<script>
 $(document).ready(function() {
 $(“#target2”).appendTo(“#right-well”);
});

• jQuery also supports function chaining . It’s a convenient way to get things done using jQuery .

<script>
 $(document).ready(function() {
 $(“#target5”).clone().appendTo(“#left-well”);//function chaining
 });
</script>

• jQuery has a function called parent() that allows you to access the parent of whatever element you have selected .

<script>
 $(document).ready(function() {
 $(“#target1”).parent().css(“background-color”,”red”);//parent()
 });
</script>

• jQuery has a function called children() that allows you to access the children of whatever element you have selected . It’s usage is similar to that of parent() .
• jQuery can be used to target a specific child of an element .

<script>
 $(document).ready(function() {
 $(“.target:nth-child(2)”).addClass(“animated bounce”);//nth-child
});
</script>

• jQuery can be used to target even and odd numbered elemets too .

<script>
 $(document).ready(function() {
 $(“.target:even”).addClass(“animated shake”);//even or odd elements
 });
</script>

• There is one cool CSS class available “hinge” , it’s fun to use :)

<script>
 $(document).ready(function() {
 $(“body”).addClass(“animated hinge”); //hinge
});
</script>

Note that jQuery is zero-indexed, meaning that, counter-intuitively, :odd selects the second element, fourth element, and so on.

Free Code Camp code for 25/04/2016 :

aayush-bhardwaj/Google_Preparation

I end the day with a score of 138 . Next up are few practical projects to build a tribute page and portfolio page .

Came across a great application “Codepen” a popular browser based code editor .

CodePen

Today all my roommates took a day off from office and enjoyed some Football :)

Good news Barca fans , Barcelona won (4–3) .

GOT season 6 is also out , although S06e01 was nothing special .

It was a very fruitful day :)

Our code camp was quiet successfull .

Au Revoir