Skip to content

Instantly share code, notes, and snippets.

@mcsuth

mcsuth/Lab_Outline.md

Forked from OfTheDelmer/Lab_Outline.md
Created November 4, 2013 23:56
Show Gist options
  • Save mcsuth/7311533 to your computer and use it in GitHub Desktop.
Save mcsuth/7311533 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Delmer revised this gist Nov 4, 2013. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion Lab_Outline.md
    View file
    Original file line number Diff line number Diff line change
    @@ -18,7 +18,6 @@


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

  2. Delmer revised this gist Nov 4, 2013. 1 changed file with 140 additions and 120 deletions.
    260 changes: 140 additions & 120 deletions Lab_Outline.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,143 +1,163 @@
    Coffee-Script lab
    Hater's lab
    Objective
    To reinforce skills familiar in javascript regarding DOM interaction, and successfully translate them into Coffee-Script.
    Outline
    # Coffee-Script lab
    ## Hater's lab

    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>
    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.
    | Objective |
    | :--- |
    | To reinforce skills familiar in javascript regarding DOM interaction, and successfully translate them into Coffee-Script.

    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.
    *Outline*

    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
    ###
    * Make this into three files. index.html, style.css, and your coffee script file
    * Grab the [haters.gif](https://s3-us-west-2.amazonaws.com/haters.gif/haters.gif).

    img = document.getElementsByTagName("img")[0]
    walkRight = true
    <img src="https://s3-us-west-2.amazonaws.com/haters.gif/haters.gif"></img>

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

    Off to a crawl..
    * 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.*

    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…
    ###
    A stub for starting your coffee script file

    ###
    SOME CONDITIONALS FOR CHECKING LEFT POS
    ###

    ###
    MOVE LEFT OR RIGHT APPROPRIATELY
    ###
    ###
    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](http://coffeescript.org/#conditionals)
    * [functions](http://coffeescript.org/#literals)

    Get some code in your app


    # 4.) Call the hater's function every some many mili-seconds..
    ###
    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
    ###
    ###
    Up and walking..
    1.) Wait for DOM to load
    ###

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

    $ ->
    ###
    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";
    }
    .flip-img {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
    }
  3. Delmer revised this gist Nov 4, 2013. 1 changed file with 123 additions and 132 deletions.
    255 changes: 123 additions & 132 deletions Lab_Outline.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,152 +1,143 @@
    # Coffee-Script lab
    ## Hater's lab
    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.


    | Objective |
    | :--- |
    | To reinforce skills familiar in javascript regarding DOM interaction, and successfully translate them into Coffee-Script.
    <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.

    *Outline*
    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.

    * start a new rails project
    * Grab the [haters.gif](https://s3-us-west-2.amazonaws.com/haters.gif/haters.gif).

    <img src="https://s3-us-west-2.amazonaws.com/haters.gif/haters.gif"></img>
    A stub for starting your coffee script file

    ###
    Try to plan it out like this… maybe in your own words

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

    * Try creating a `flip-img` class that you toggle on the img when it reaches the left or right of the screen.
    a.) Create a global variable to
    keep track of which direction
    it should be walking

    * 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.*
    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

    A stub for starting your coffee script file
    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

    ###
    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](http://coffeescript.org/#conditionals)
    * [functions](http://coffeescript.org/#literals)

    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

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

    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";
    }
  4. Delmer revised this gist Nov 4, 2013. No changes.
  5. Delmer revised this gist Nov 4, 2013. 1 changed file with 17 additions and 20 deletions.
    37 changes: 17 additions & 20 deletions Lab_Outline.md
    View file
    Original file line number Diff line number Diff line change
    @@ -38,9 +38,9 @@ A stub for starting your coffee script file
    3.) Begin defining a haters function to translate
    the image to the left or right of the page
    a.) Hmm.. we'll need an outer variable to
    keep track of which direction it
    should be walking
    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*
    @@ -60,14 +60,22 @@ A stub for starting your coffee script file
    mili-seconds to animate your haters.gif
    ###



    *Some Resources*

    * [conditionals](http://coffeescript.org/#conditionals)
    * [functions](http://coffeescript.org/#literals)

    Get some code in your app

    ###


    ###
    How might we start implement this?
    1.) We'll need some outer variables
    ###

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

    img = document.getElementsByTagName("img")[0]
    walkRight = true
    @@ -92,7 +100,7 @@ Good start… but remember you have to wait for the `window.onLoad`
    window.onLoad = () ->

    ###
    2.) We'll need some outer variables
    2.) We'll need some global variables
    ###
    img = document.getElementsByTagName("img")[0]
    @@ -142,14 +150,3 @@ A start with jQuery
    Some changes...
    ###

    Some CSS for flipping him around...

    .flip-img {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
    }
  6. Delmer revised this gist Nov 4, 2013. 1 changed file with 5 additions and 5 deletions.
    10 changes: 5 additions & 5 deletions Lab_Outline.md
    View file
    Original file line number Diff line number Diff line change
    @@ -38,9 +38,9 @@ A stub for starting your coffee script file
    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
    a.) Hmm.. we'll need an outer variable to
    keep track of which direction it
    should be walking
    b.) Setup conditionals to check that
    the leftmost position of the *img*
    @@ -66,7 +66,7 @@ Get some code in your app

    How might we start implement this?

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

    img = document.getElementsByTagName("img")[0]
    @@ -92,7 +92,7 @@ Good start… but remember you have to wait for the `window.onLoad`
    window.onLoad = () ->

    ###
    2.) We'll need some global variables
    2.) We'll need some outer variables
    ###
    img = document.getElementsByTagName("img")[0]
  7. Delmer revised this gist Nov 4, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Lab_Outline.md
    View file
    Original file line number Diff line number Diff line change
    @@ -143,7 +143,7 @@ A start with jQuery
    ###

    Some CSS for flip-ing him around...
    Some CSS for flipping him around...

    .flip-img {
    -moz-transform: scaleX(-1);
  8. Delmer revised this gist Nov 4, 2013. 1 changed file with 11 additions and 0 deletions.
    11 changes: 11 additions & 0 deletions Lab_Outline.md
    View file
    Original file line number Diff line number Diff line change
    @@ -142,3 +142,14 @@ A start with jQuery
    Some changes...
    ###

    Some CSS for flip-ing him around...

    .flip-img {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
    }
  9. Delmer revised this gist Nov 4, 2013. 1 changed file with 117 additions and 0 deletions.
    117 changes: 117 additions & 0 deletions Lab_Outline.md
    View file
    Original file line number Diff line number Diff line change
    @@ -25,3 +25,120 @@
    * 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
    ###

    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...
    ###
  10. Delmer revised this gist Nov 4, 2013. 1 changed file with 9 additions and 2 deletions.
    11 changes: 9 additions & 2 deletions Lab_Outline.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    # Coffee-Script lab
    ## Hater's/8-ball lab
    ## Hater's lab



    @@ -11,10 +11,17 @@

    *Outline*

    * start a new rails project
    * Grab the [haters.gif](https://s3-us-west-2.amazonaws.com/haters.gif/haters.gif).

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


    <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.*
  11. Delmer created this gist Nov 4, 2013.
    20 changes: 20 additions & 0 deletions Lab_Outline.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    # Coffee-Script lab
    ## Hater's/8-ball lab



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



    *Outline*

    * Grab the [haters.gif](https://s3-us-west-2.amazonaws.com/haters.gif/haters.gif).

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


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