Section 3.11. Here s what we did...

3.11. Here's what we did...

We put all the code that creates and tests the request object into common.js, and then put all the coffee-related functions into coffee.js. If you did things differently, that's okay. Just make sure you remember where each function is so you know which file to edit as you build the rest of the application.

 coffee.js ajax.js var request = false; try { ... } if (request == null) { ... } function sendRequest(url) {...} function serveDrink() {...} function orderCoffee() {...} function getSize() { ... } function getBeverage() {...}  

Welcome to iterative development... we're going back to finish up the HTML now, even though we've started on the JavaScript.

Just Do It

Now that you know the name of your JavaScript functions, you can finish up the rest of the HTML for the coffee maker.

 <h3>Beverage</h3> <p> <input type="radio" name="beverage"         value="mocha"         checked="true">Mocha</input> &nbsp;&nbsp; <input type="radio" name="beverage"     value="latte">Latte</input> &nbsp;&nbsp; <input type="radio" name="beverage"         value="cappucino">Cappucino</input> </p> <p>     <input type="button"             onClick="__________________"             value="Order Coffee" />     </p>    </form>   </div> </div> <div >   <h2>Coffee Maker #2</h2>   <p><img src="/books/2/850/1/html/2/images/CoffeeMaker2.gif"     alt="Coffee Maker #2" /></p>     <div >Idle</div> </div> 

1. Fill in the blanks in the HTML on the left for placing a coffee order with the name of the function to run when someone clicks the "Order Coffee"" button.

2. Next, finish the HTML for the second coffee maker. Remember, all your element's id values should be unique. We're depending on the id names in the JavaScript, so make sure you check your answer with ours (on the next page) before moving on.

If you're stuck, look back at the HTML for the first coffee maker, and use that as a model for filling in the blanks on the second coffee maker HTML.

Just Do It Solutions

Now that you know the name of your JavaScript functions, you can finish up the rest of the HTML for the coffee maker.

 <h3>Beverage</h3> <p> <input type="radio" name="beverage" value="mocha" checked="true">Mocha</input> &nbsp;&nbsp; <input type="radio" name="beverage" value="latte">Latte</input> &nbsp;&nbsp; <input type="radio" name="beverage" value="cappucino">Cappucino</input> </p> <p> <input type="button" onClick="orderCoffee();"orderCoffee() is the JavaScript function you'll write to send a new coffee order to the coffee-making PHP script. value="Order Coffee" /> </p> </form> </div> </div> <div docEmphUl">coffeemaker2">In the first coffee maker, these ids were "coffeemaker1" and "coffeemaker1-status"... <h2>Coffee Maker #2</h2> <p><img src="/books/2/850/1/html/2/images/CoffeeMaker2.gif" alt="Coffee Maker #2" /></p> <div docEmphUl">coffeemaker2-status">Idle</div>...so in this coffee maker, we just changed all the "1"s to "2"s. </div>