a) Open your Moodle, and download the XML file. (credit_card.xml). Prepare HTML page with JavaScript to read data from XML document. In your HTML webpage, include a button that will trigger the process to read data from XML file. You must use AJAX to complete this task. Use JavaScript, NOT jQuery code.
Once you have prepared the AJAX script, display the data in HTML table. See sample output below.
Figure 1: Sample output after reading XML document
b) From your previous output in Task 1a, modify your code to include the additional criteria. You may refer to sample image below as reference.
· Include currency unit for previous balance, expenses and payment.
· Find the average value for expenses.
· Find the maximum value for expenses. (hint: use Math max for array)
· Find the minimum value for expenses. (hint: use Math min for array)
· Include a proper decision logic (in JavaScript) to display new balance and status.
i. new balance = previous balance + expenses – payments.
ii. Each card has a credit limit of RM 1000. If the new balance is more than credit limit, then display the status.
iii. Use ‘red font’ for value beyond the credit limit and ‘green font’ for under the limit.
Figure 2: Sample output after including logical decision using JavaScript
Figure 3: Sample output for average, minimum and maximum expenses
