Flesh out exercise 1 instructions

Author: Josh Hill

js/lesson3/tutorial.md

@@ -183,23 +183,27 @@ function addToList(item) {
 
 }
 ```
-In the `index.html` file, we already have an `<ol>` component, so we want to add each new item, as a list item. We can do that by constructing the html we need `"<li>" + item + "</li>"` and adding it to the list using `append()`.
+In the `index.html` file there is an empty list, `<ol id="items">`, and we're going to add list items to it.
 
-We can get the ordered list using the element tag and the id `$("ol#items")`
+Target the empty list using its html tag and id: `$("ol#items")`.
 
-Try running the function you've just written from the inspector
+Then construct the html for a new list item `"<li>" + item + "</li>"` and add it to the end of the list using jQuery's `append()` method.
+
+Try running the function you've just written from the browser console.
 
 ```js
 addToList("build a website");
 ```
 
-Now that you can successfully add items to the list, bind the function to the button with the id `#add-to-list`.  To get the text from the input field, you can use `$("#item").val()`.
+Now that you can successfully add items to the list, write an event handler to listen for the `click` event on the button. Tip: the button's id is `#add-to-list`.
+
+Then use jQuery's `val()` method to get the text from the input field and run your `addToList()` function with the input field text as the argument from the event handler. Tip: the input field's id is `#item`.
 
 ###Bonus
-After adding the item to the list
+After adding the item to the list:
 
-1. Empty the text field
-2. Use `focus()` to place the cursor back to the text field
+1. Empty the text field after adding the item to the list.
+2. Use jQuery's `focus()` method to place the cursor back in the text field after clicking the button.
 
 ###Label items