jQuery DOM Exercises
- Download the following file: form.zip
- Extract it into a folder inside your public_html folder.
- The HTML document contains a form, with a line where the user can choose a product and its desired quantity.
2. Hello World
- Include the jQuery library using, for example, one of the versions provided via jQuery CDN.
- Write a function called loadDocument that shows an “Hello World!” message. Use the alert function.
- Add a .ready() event that calls that same function.
- Verify if the page shows the message when reloaded.
3. Form Code
- Modify the function so that it shows the HTML code inside the form.
4. First Line
- Modify the function so that it shows the HTML inside in the first line of the form.
5. Select Variable
- Modify the function so that you have a variable that contains the select tag inside the form.
6. Test Option
- Create a function called loadProducts that receives a select element, and adds a new option to that select with the value test.
- In the loadDocument function, call that function, sending the select element as a parameter.
- Verify that the select element now has a new option with the value test.
7. Load Products
- Modify the loadProducts function so that it loads the products contained in the global products array instead of the test value.
- Verify that the products are loaded correctly.
8. Add Line
- Create a new function called addLine.
- That function should create a new line in the form, identical to the first one, right before the add button.
- Add an event listener to the add button so that the addLine gets called when the button is clicked.
- Create a PHP file called products.php, that prints a JSON encoded array with some products.
- In the loadProducts function, use the .getJSON() to retrieve that product list from the PHP file.
- When the products finishes loading, replace the products global variable with the loaded products and call the loadProducts function.
- Verify that the products are loaded after reloading the page.
- Create a simple database containing products.
- Modify the PHP file so that the products are read from the database.
- Verify that the products in the database are loaded after reloading the page.
- Add a delete link to each line that deletes a line when clicked.
- Add a span tag to the document with the id “total”.
- Make the text inside that span update whenever a quantity in a line is changed.
- The value of the span should be the sum of all the quantities in the form.