adding_an_item.step

goals do
  goal "Allow a user to create a new item."
  goal "Understand how to make an AJAX request when prompted by a user's action."
end

overview do
  message <<-MARKDOWN
JavaScript allows us to make our web page dynamic, and responsive to
the actions of our users. In this lesson, we'll allow our users to create
a new item for our list, and ask the server to save it to the database.

To do so, we're going to use JavaScript's ability to perform a task when a
user has taken an action on the page. JavaScript refers to these actions as
__events__, and we can trigger code to run by using an __event listener__. We will
be using jQuery to accomplish this, as it provides a powerful and readable interface
to respond to user events.

Our code will take the following steps.

1. When the user loads the page, our code will start listening for when the user
   submits the form at the top of the page.

2. When a user submits the form (by pressing enter), we will prevent the page
  from refreshing, which is the normal behavior for a form.

3. We will make an AJAX request to our server, creating an item with the
  description our user just provided.

4. Once the request succeeds, we will add a new item to the page!
  MARKDOWN
end

steps do
  step do
    message "Add the following code the bottom of app.js."

    source_code :javascript, <<-JAVASCRIPT
      $('#add-form').on('submit', function(event) {
        var itemDescription = event.target.itemDescription.value
        alert('trying to create a new item with a description ' + itemDescription)
      })
    JAVASCRIPT

    message <<-MARKDOWN
Refresh the page and try creating an item. An alert should pop up when you try! What
happens after that? why?
    MARKDOWN
  end

  step do
    message "Before the alert we wrote in the last step, add the following line of code."

    source_code :javascript, <<-JAVASCRIPT
      event.preventDefault()
    JAVASCRIPT

    message <<-MARKDOWN
Try creating an item again. What changed? Why did it change?
    MARKDOWN
  end

  step do
    message <<-MARKDOWN
Now that we've successfully listened for a form submission and prevented the page from
refreshing, we're going to ask the server to save this item into the database. Remove
the alert that you wrote in step one, and replace it with the following code. replace
'YOUR-LIST-NAME-HERE' with your list's name.
    MARKDOWN

    source_code :javascript, <<-JAVASCRIPT
      var creationRequest = $.ajax({
        type: 'POST',
        url: "http://listalous.herokuapp.com/lists/YOUR-LIST-NAME-HERE/items",
        data: { description: itemDescription, completed: false }
      })
    JAVASCRIPT

    message <<-MARKDOWN
Try creating an item again. After you submit the form, look at the network tab. A
new request should have occurred to http://listalous.herokuapp.com/ !
    MARKDOWN
  end

  step do
    message <<-MARKDOWN
Finally, we need to add the new item to the list. We'll use our addItemToPage function
again to do so. After the creationRequest, add the following code:
    MARKDOWN

    source_code :javascript, <<-JAVASCRIPT
      creationRequest.done(function(itemDataFromServer) {
        addItemToPage(itemDataFromServer)
      })
    JAVASCRIPT

    message <<-MARKDOWN
      Try creating an item one more time. Once you hit enter, a new item should appear
      on the page! If not, flag an instructor down to help you debug the problem.
    MARKDOWN
  end
end

explanation do

  message "Here's what the bottom of app.js should now look like:"

  source_code :javascript, <<-JAVASCRIPT
    $('#add-form').on('submit', function(event) {
      event.preventDefault()
      var itemDescription = event.target.itemDescription.value
      var creationRequest = $.ajax({
         type: 'POST',
         url: "https://listalous.herokuapp.com/lists/YOUR-LIST-NAME-HERE/items",
         data: { description: itemDescription, completed: false }
       })

      creationRequest.done(function(itemDataFromServer) {
        addItemToPage(itemDataFromServer)
      })
    })

  JAVASCRIPT

  message <<-MARKDOWN

### The AJAX process

You've just done something that many JavaScript developers do daily: Use JavaScript
to make a request to a server, and then update the page with the data with which
the server responds. This abstract process is repeated over and over again:

1. Add an event listener.
2. Parse out the information the user is submitting.
3. Prevent the default action from occurring, if necessary.
4. Make a request to the server using AJAX.
5. When the request succeeds, parse the data the server sends back.
6. Update the page with the newly received data.

This process is the basis of most modern web pages!
  MARKDOWN
end

next_step "marking_an_item_as_complete"