sdickey/a_reflection.md

## a_reflection.md

      
    Raw
  

              a_reflection.md
            
          
    ##Finished product image

##Reflection
The structure of this exercise is nearly identical to the javascript DOM manipulation
challenge from DBC unit 3, week 3 (no surprise there). JQuery is so much easier to
grasp from a syntax standpoint: the commands are more concise, and as far as those
that manipulate styles, closer to what you think they'd be if you had to take an
educated guess based on a limited knowledge of jQuery and css. Here's how you'd change
the background color of your <body> tag using javascript:
document.getElementsByTagName('body')[0].style.backgroundColor = "#ccc";
And here's the same manipulation using jQuery:
$('body').css({background-color: '#ccc'});
See what I mean? So much easier. In jQuery the selector type is implicit, i.e. the second
statement above "knows" that this is a body tag because the word 'body' is written without
any prefix (a "." or "#" for class or id, respectively). But javascript requires you to state
what selection method your using: getElementsByTagName (querySelector will work here as well,
but it's still a lot more to type when compared to the jQuery way.) And then there's the method
(the part that does takes action on your targeted element(s)). When compared to .style.backgroundColor = '#ccc'
the method .css({background-color: '#ccc') is much clearer as to its purpose. We want to manipulate
the element's style and that, of course, is governed by css. And, except for the color requiring quotes
and a missing semi-colon, {background-color: '#ccc'} is exactly how this rule would appear in the css
file.
I discovered that jQuery's .animate() method doesn't accept values that can't be declared in digits.
I attempted to animate the color of the border in this exercise, but since the color can't be expressed
solely in digits, no dice. But you can get this done with css transitions. CSS also has some nifty animations in
its own right. Here are some links if you're interested:
w3Schools on CSS animation
smashing magazine article
CSS-Tricks: Animations

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

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

  <body>
    <h1> Hello. Welcome to the jQuery DOM Manipulation Challenge! </h1>
    <div class="mascot">
      <h1> My DBC Mascot </h1>
        <img src="http://dickeydesigns.com/img/twitter_bw.png" style="border: 5px solid #000">
    </div>

    <button class="animate" style="float: left">Click to animate image!</button>

    <button class="reset" style ="float: left">
      Reset
    </button>


    <nav style="clear: left">
      <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
      </ul>
    </nav>

    <div>
      <p>There is a parent div containing this paragraph</p>
    </div>

    <div>
      There are p tags surrounding this paragraph.
    </div>
  </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 headingOne = $('h1');
var image = $('img');
var section = $('div');
var mascot = $('mascot');


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

headingOne.css({color: 'white'});
headingOne.css({border: '8px solid dodgerblue'});
headingOne.css({visibility: 'hidden'});
headingOne.css({visibility: 'visible'});

$('.mascot > h1').html("Admirales Rojos!");


$('.mascot').css({background: 'gray'});
// image.css({border: "3px dashed #000"});
section.has('p').css({color: 'green'});


//RELEASE 3: Event Listener
// Add the code for the event listener here

$('img').on('mouseover', function(e){
     e.preventDefault()
    $(this).attr('src', 'http://dickeydesigns.com/img/redadmiral.png')
  });

$('img').on('mouseleave', function(e){
     e.preventDefault()
    $(this).attr('src', 'http://dickeydesigns.com/img/twitter_bw.png')
  });

//RELEASE 4 : Experiment on your own

 $('.animate').on('click', function(){
    $('img').animate({
      height: "250px",
      width: "250px",
      borderWidth: "25px"
    });
 });

 $('.reset').on('click', function(){
    $('img').animate({
      height: "112px",
      width: "100px",
      borderWidth: "5px"
    });
 });

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

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

	<body>
	<h1> Hello. Welcome to the jQuery DOM Manipulation Challenge! </h1>
	<div class="mascot">
	<h1> My DBC Mascot </h1>
	<img src="http://dickeydesigns.com/img/twitter_bw.png" style="border: 5px solid #000">
	</div>

	<button class="animate" style="float: left">Click to animate image!</button>

	<button class="reset" style ="float: left">
	Reset
	</button>


	<nav style="clear: left">
	<ul>
	<li>One</li>
	<li>Two</li>
	<li>Three</li>
	<li>Four</li>
	<li>Five</li>
	</ul>
	</nav>

	<div>
	<p>There is a parent div containing this paragraph</p>
	</div>

	<div>
	There are p tags surrounding this paragraph.
	</div>
	</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 headingOne = $('h1');
	var image = $('img');
	var section = $('div');
	var mascot = $('mascot');



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

	headingOne.css({color: 'white'});
	headingOne.css({border: '8px solid dodgerblue'});
	headingOne.css({visibility: 'hidden'});
	headingOne.css({visibility: 'visible'});

	$('.mascot > h1').html("Admirales Rojos!");



	$('.mascot').css({background: 'gray'});
	// image.css({border: "3px dashed #000"});
	section.has('p').css({color: 'green'});



	//RELEASE 3: Event Listener
	// Add the code for the event listener here

	$('img').on('mouseover', function(e){
	e.preventDefault()
	$(this).attr('src', 'http://dickeydesigns.com/img/redadmiral.png')
	});

	$('img').on('mouseleave', function(e){
	e.preventDefault()
	$(this).attr('src', 'http://dickeydesigns.com/img/twitter_bw.png')
	});

	//RELEASE 4 : Experiment on your own

	$('.animate').on('click', function(){
	$('img').animate({
	height: "250px",
	width: "250px",
	borderWidth: "25px"
	});
	});

	$('.reset').on('click', function(){
	$('img').animate({
	height: "112px",
	width: "100px",
	borderWidth: "5px"
	});
	});

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