Exercise 26: jQuery Fiddle - jkneal/spring-angular-train GitHub Wiki

Learn how to use jQuery selectors and methods

1. In src/main/resources/scripts, create a new file named 'shop.js'. Include this JavaScript source file in src/main/resources/templates/shop/index.html

2. In shop.js, perform the following jQuery operations when the document is ready:

• Get the text for the element with id 'storeName' and display the text in an alert
• Get the element with CSS classname 'badge' and replace the HTML with

<b>Sorry we are closed</b>

• Count the number of section elements in the document and display the count in an alert

• Count the number of td elements in the document that have the attribute 'data-attr' equal to 'name'. Display the count in an alert

• In the product table, find the price for the product 'Basketball'. Display the message 'Basketballs are ', followed by the price', followed by ' today!' in an alert

• Within the div with id 'storeInformation', wrap the second p element with the HTML

  <div style="border:1px solid red"></div>

• Add a click event handler to the element with id 'productLink' that will toggle the display of the element with id 'productTable'

• Add a click event handler to all a elements that do not have the id 'productLink'. Within the click handler display the message "Thanks for visiting!" in an alert

1. Start the training application and go to the app home page
2. Click on the link 'Exercise 26' and verify the following:

• An alert appears with the text 'Joe's Sports Store'
• An alert appears with the text '2'
• An alert appears with the text '5'
• An alert appears with the text 'Basketballs are $18.80 today!'

3. Next verify your screen looks like the following:

   

4. Now click on the link (header) with text 'Products'. Verify the product table is hidden. Now click the link again and verify it is shown