Coffee-Script lab

Hater's lab

Outline

• start a new rails project
• Grab the haters.gif.

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

• You might also throw it in your assets/images and use an <%= img_tag(..)%>

• 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...
    ###