Lab_Outline.md

Coffee-Script lab

Hater's lab

Objective
To reinforce skills familiar in javascript regarding DOM interaction, and successfully translate them into Coffee-Script.

Outline

• Make this into three files. index.html, style.css, and your coffee script file
• Grab the haters.gif.

	<img src="https://s3-us-west-2.amazonaws.com/haters.gif/haters.gif"></img>

• Using the window width and the image width make him walk the screen from left to right.

  • Clearly, this must be done using Coffee-Script, but feel free to write it out in Javascript and translate it over if that helps.

  • Try creating a flip-img class that you toggle on the img when it reaches the left or right of the screen.

• Do this without jQuery and using a window.onLoad, then re-write it with jQuery. It's good to refamiliarize yourself every so often with how to do things without jQuery.

A stub for starting your coffee script file

###
	Try to plan it out like this… maybe in your own words
	
	1.) Wait for the DOM to load. 
	2.) Grab the *img* from the DOM. 
	3.) Begin defining a haters function to translate 
		the image to the left or right of the page
		
		a.) Create a global variable to 
			keep track of which direction 
			it should be walking
			
		b.) Setup conditionals to check that 
			the leftmost position of the *img*
		 	isn't greater than the number of 
		 	pixels between the `window.innerWidth` 
		 	and `image.width`. 
		 	
		 	i.) Based on those conditionals you 
		 		should change the walking 
		 		direction
		 		
		c.) Depending on the direction it's headed,
			move it left or right some number of
			pixels.
	
	4.) Run this function every few hundred 
		mili-seconds to animate your haters.gif
###

Some Resources

• conditionals
• functions

Get some code in your app

	###
	
	How might we start implement this?

	1.) We'll need some global variables
	###	

	img = document.getElementsByTagName("img")[0]
	walkRight = true
	
	# Set some default style
	img.style.position = "absolute"
	img.style.left = "0px"
	
	# Log that image to the console.
	console.log img

Good start… but remember you have to wait for the window.onLoad

###
	
	Off to a crawl..
	
	1.) Wait for DOM to load
###	

window.onLoad = () ->

	###
	 	2.) We'll need some global variables
	###
	
	img = document.getElementsByTagName("img")[0]
	walkRight = true
	
	# Set some default style
	img.style.position = "absolute"
	img.style.left = "0px"
	
	# Log that you got the image
	console.log  img

	
	###
		3.) Write a haters function
	###
	
	haters = () ->
		console.log "I work with the haters.gif ", img
		
		###
			RECORD THE IMAGE LEFT POSITION… 
		###
		
		###
			SOME CONDITIONALS FOR CHECKING LEFT POS 
		###
	
		###
			MOVE LEFT OR RIGHT APPROPRIATELY
		###
		
	
	# 4.) Call the hater's function every some many mili-seconds..

A start with jQuery

###
	
	Up and walking..
	
	1.) Wait for DOM to load
###	

$ -> 
	###
		Some changes...
	###

Some ideas for flipping

.flip-img {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}