playing_with_jquery.step

goals do
  goal "Write JavaScript code in a .js file."
  goal "Write a function that takes advantage of jQuery."
end

overview do
  message <<-MARKDOWN
In addition to being a powerful programming language, Javascript allows you to make your web site interactive.
You can use it to build anything from a simple animation to a giant web application like Twitter
or Github. It gives you total control to add, remove, or modify content you've made with HTML.
You can also use it to change styles and add or remove classes.

In this lesson, we'll also be using jQuery to make interacting with the page easier.
jQuery is a JavaScript library that is widely used in the industry to alter pages,
make requests, and create animations. We're going to create a function
that adds a new item to our list.
  MARKDOWN
end

steps do
  step do
    message <<-MARKDOWN
  In addition to writing JavaScript in the browser's console, you can also write javascript in .js files.
  We're going to write our code in app.js, which will run whenever the page loads.
  In this step, we're going to assign a variable in app.js using the jQuery selector.
  Open app.js in your text editor, and add the following code.
    MARKDOWN

    source_code :javascript, <<-JAVASCRIPT
     var itemTemplate = $('#templates .item')
     var list         = $('#list')
    JAVASCRIPT

    message <<-MARKDOWN
  Refresh the page in your browser. Open the console and write 'itemTemplate' and 'list'. What do you see?
  What other functions can you call on list and itemTemplate?
    MARKDOWN
  end


  step do
    message <<-MARKDOWN
    In this step, we're going to write a function to create items. It's going to create a copy of the
    itemTemplate, add data to the new item, and append the new item to the list element. Add the
    following code to the bottom of app.js.
    MARKDOWN

    source_code :javascript, <<-JAVASCRIPT
      var addItemToPage = function(itemData) {
        var item = itemTemplate.clone()
        item.attr('data-id',itemData.id)
        item.find('.description').text(itemData.description)
        if(itemData.completed) {
          item.addClass('completed')
        }
        list.append(item)
      }
    JAVASCRIPT

    message <<-MARKDOWN
  Refresh the page and go back to the developer console. Lets use our new function! Type this into the console:
    MARKDOWN

    source_code :javascript, <<-JAVASCRIPT
      var orange = { description: 'Orange', id: 9000, completed: false }
      addItemToPage(orange)
    JAVASCRIPT

      message <<-MARKDOWN
  Your list should now have an orange!
    MARKDOWN
  end

end



explanation do
  message <<-MARKDOWN

You just used JavaScript to update a page! Websites do this all time, in order to make
the user experience interactive and seamless. You used a couple of handy jQuery functions:

* __The jQuery Selector $()__ is an easy way to fetch an item from the page. All you need to do
is specify the class, id, or tag of the element or elements you want.

* __.clone()__ creates a copy of a selected element. It's helpful for creating elements from a template.

* __.find()__ helps you find elements nested inside other elements.

* __.text()__ allows you to get and alter the text of an element.

* __.attr()__ allows you to get and alter attributes stored in your HTML. In this case, we used it store
the id of an item in a data-id attribute, that is not used for styling, just for data storage.

* __.addClass()__ allows you to add a class to an element.

* __.append()__ takes an element and attaches it to the end of another element! That way, your element
will actually show up on the page.

There are many other jQuery functions that are helpful – we'll use more as we go along. In the meantime,
play around in the developer console and see what you can change on the page using JavaScript and jQuery!
  MARKDOWN
end

next_step "creating_a_list"