Qt-dev/00-reflection.md

## 00-reflection.md

      
    Raw
  

              00-reflection.md
            
          
    #Reflection
JQuery is awesome, check the comments for more info on the methods we used.
I was looking forward to playing with it with my fellow Banana Slugs, now I can't wait the next time we play with it.

  
## jquery_example.html
<!DOCTYPE html>
<html>
<head>
  <title>DOM manipulation with jQuery</title>

  <!-- Add a link to jQuery CDN here script here -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="jquery_example.js"></script>
  <style>
    .pull-right{
      float:right;
      text-align:right;
    }
    .pull-left{
      float:left;
      text-align:left;
    }

    img {
      max-width:150px;
    }
  </style>
</head>
<body>
  <h1> Hello. Welcome to the jQuery DOM Manipulation Challenge! </h1>
  <div class="mascot">
    <h1> My DBC Mascot </h1>
    <img src="dbc_logo.jpg">
  </div>


  <script>
  </script>
</body>
</html>

## jquery_example.js

$(document).ready(function(){

  //RELEASE 0:
  //Link this script and the jQuery library to the jquery_example.html file and analyze what this code does.

  $('body').css({'background-color': 'pink'})

  //RELEASE 1:
    //Add code here to select elements of the DOM
  var bodyElement = $('body')
  var imgInMascot = $('.mascot img')
  var firstH1 = $('h1').first()
  var mascotClass = $('.mascot')


  //RELEASE 2:
    // Add code here to modify the css and html of DOM elements

    // Method : .attr(x,y); x = the name of the attribute, y = its value
    // ex : I want to add a class to the tag "body", with the value "body"
    // $('body').attr('class','body')
  imgInMascot.attr('alt', 'our mascot image') //modify HTML tag, adding an alt attribute with the value 'our mascot image' to the image in the Mascot class
  firstH1.attr('id', 'pageheader') // modify HTML tag, add id of 'pageheader' to the first h1 tag
  //We are now going to add a span at the end of the first h1 in the mascot class
  //<span class="pull-right">'14 Bslugs</span>

  // Method : .children() -> It can take an argument. If so, it will only select the children that match the argument
  // ex : $('body').children() => Selects every child of the body tag
  // ex : $('body').children('ul') => Selects every unordered list that is a direct child of the body tag

  // Method : .html('code') => Changes the code of the selected tag to 'code'
  // ex : $('body').html('I removed everything, mothafuckaaaaaaa~') => Removes everything in the body tag, and replace it with that line
  // If we dont put an argument, the .html() function just returns the html code inside the selected tag.

  // Method : .append('code') => Adds the "code" at the end of this tag's HTML code
  // ex : $('body').append('This is the end of the page') -> Will add a line at the end of the body tag saying it is the end of the page.

  // Method : .addClass('class') => Adds a class to the selected tag
  $('.mascot')
      .children('h1').first()
        .append("<span class='pull-right'>'14 Banana Slugs</span>")
        .addClass('small-header')

  firstH1.html('Who dares pass, I, ninja-Gandalf!!<br> and "I" am the only one that shall pass, you fools!')

  //RELEASE 3: Event Listener
    // Add the code for the event listener here
    // Method : .on(event, code) -> on this event (mouseover, click, things like that), execute the code.
    // the code will be in the form of a new function.
    // ex:    $('img').on('mouseover', function(e){
    //          e.preventDefault()
    //          $(this).attr('src', 'YOUR IMAGE URL')
    //          })
    // cohort logo url : http://quentindevauchelle.com/img/bananaslugs.png

    // Method: .mouseenter(code) => When the mouse enters the selected tag, the code will be executed. code is a function
    // ex:  $( "#outer" ).mouseenter(function() {
    //        $( "#log" ).append( "<div>Handler for .mouseenter() called.</div>" );
    //      });


    // Method: .mouseleave(code) => Mouseenter counterpart
  $('img')
    .mouseenter( function(e) {
      e.preventDefault()
      $(this).attr('src', 'http://quentindevauchelle.com/img/bananaslugs.png')
    })
    .mouseleave( function(e) {
      e.preventDefault()
      $(this).attr('src', 'dbc_logo.jpg')
    })

  event = click
  $('body').on(event, function(){})
  $('body').click(function(){})
  $('body').on('click', function(){})


  //RELEASE 4 : Experiment on your own
  bodyElement.find('*')
    .on('click', function(event) {
      $('.click').remove()
      event.stopPropagation()
      $(this).append('<span class="click">you clicked here</span>')
    })


})  // end of the document.ready function: do not remove or write DOM manipulation below this.
	<!DOCTYPE html>
	<html>
	<head>
	<title>DOM manipulation with jQuery</title>

	<!-- Add a link to jQuery CDN here script here -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript" src="jquery_example.js"></script>
	<style>
	.pull-right{
	float:right;
	text-align:right;
	}
	.pull-left{
	float:left;
	text-align:left;
	}

	img {
	max-width:150px;
	}
	</style>
	</head>
	<body>
	<h1> Hello. Welcome to the jQuery DOM Manipulation Challenge! </h1>
	<div class="mascot">
	<h1> My DBC Mascot </h1>
	<img src="dbc_logo.jpg">
	</div>


	<script>
	</script>
	</body>
	</html>

	$(document).ready(function(){

	//RELEASE 0:
	//Link this script and the jQuery library to the jquery_example.html file and analyze what this code does.

	$('body').css({'background-color': 'pink'})

	//RELEASE 1:
	//Add code here to select elements of the DOM
	var bodyElement = $('body')
	var imgInMascot = $('.mascot img')
	var firstH1 = $('h1').first()
	var mascotClass = $('.mascot')


	//RELEASE 2:
	// Add code here to modify the css and html of DOM elements

	// Method : .attr(x,y); x = the name of the attribute, y = its value
	// ex : I want to add a class to the tag "body", with the value "body"
	// $('body').attr('class','body')
	imgInMascot.attr('alt', 'our mascot image') //modify HTML tag, adding an alt attribute with the value 'our mascot image' to the image in the Mascot class
	firstH1.attr('id', 'pageheader') // modify HTML tag, add id of 'pageheader' to the first h1 tag
	//We are now going to add a span at the end of the first h1 in the mascot class
	//<span class="pull-right">'14 Bslugs</span>

	// Method : .children() -> It can take an argument. If so, it will only select the children that match the argument
	// ex : $('body').children() => Selects every child of the body tag
	// ex : $('body').children('ul') => Selects every unordered list that is a direct child of the body tag

	// Method : .html('code') => Changes the code of the selected tag to 'code'
	// ex : $('body').html('I removed everything, mothafuckaaaaaaa~') => Removes everything in the body tag, and replace it with that line
	// If we dont put an argument, the .html() function just returns the html code inside the selected tag.

	// Method : .append('code') => Adds the "code" at the end of this tag's HTML code
	// ex : $('body').append('This is the end of the page') -> Will add a line at the end of the body tag saying it is the end of the page.

	// Method : .addClass('class') => Adds a class to the selected tag
	$('.mascot')
	.children('h1').first()
	.append("<span class='pull-right'>'14 Banana Slugs</span>")
	.addClass('small-header')

	firstH1.html('Who dares pass, I, ninja-Gandalf!!<br> and "I" am the only one that shall pass, you fools!')

	//RELEASE 3: Event Listener
	// Add the code for the event listener here
	// Method : .on(event, code) -> on this event (mouseover, click, things like that), execute the code.
	// the code will be in the form of a new function.
	// ex: $('img').on('mouseover', function(e){
	// e.preventDefault()
	// $(this).attr('src', 'YOUR IMAGE URL')
	// })
	// cohort logo url : http://quentindevauchelle.com/img/bananaslugs.png

	// Method: .mouseenter(code) => When the mouse enters the selected tag, the code will be executed. code is a function
	// ex: $( "#outer" ).mouseenter(function() {
	// $( "#log" ).append( "<div>Handler for .mouseenter() called.</div>" );
	// });


	// Method: .mouseleave(code) => Mouseenter counterpart
	$('img')
	.mouseenter( function(e) {
	e.preventDefault()
	$(this).attr('src', 'http://quentindevauchelle.com/img/bananaslugs.png')
	})
	.mouseleave( function(e) {
	e.preventDefault()
	$(this).attr('src', 'dbc_logo.jpg')
	})

	event = click
	$('body').on(event, function(){})
	$('body').click(function(){})
	$('body').on('click', function(){})


	//RELEASE 4 : Experiment on your own
	bodyElement.find('*')
	.on('click', function(event) {
	$('.click').remove()
	event.stopPropagation()
	$(this).append('<span class="click">you clicked here</span>')
	})


	}) // end of the document.ready function: do not remove or write DOM manipulation below this.