Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit

COMP30680 Web Application Development

Assignment 2: JavaScript and JSON

This assignment focuses on the use of JavaScript to read, manipulate, and present JSON data in a webpage.

The data for this assignment will be taken from Ireland’s COVID-19 Data Hub, an open API that provides updated information on COVID-19 statistics at a national and county level. All data is available to access in JSON format. The Government’s own dashboard can be accessed here and is useful for exploring the information: https://covid-19.geohive.ie/

In the assignment you will use a combination of the following pages:

● Vaccination data: This page provides data HSE weekly national vaccination figures

○ https://covid-19.geohive.ie/datasets/0101ed10351e42968535bb002f94c8c6_0/api

● County Statistics: This page provides information on a county-by-county basis.

○ https://covid-19.geohive.ie/datasets/4779c505c43c40da9101ce53f34bb923_0/api

When you visit these pages, you will see that each has a set of options that allow you to configure a JSON query. When you configure your selection a ‘Query URL’ box on the right of the page shows the URL needed to access the requested data, which is returned in JSON format. See for example, the screenshot below from the County Statistics page.

Your job is to present data requested from this data hub on your own webpage. To do this you will need to combine HTML, CSS, and JavaScript.

Requirements:

1. Begin by creating a webpage called dashboard.html. When this page is opened it should present the following information from the most recent week by default:

- Total vaccinations administered in the year 2021 to date.

- The following weekly information:

Total weekly vaccinations administered.

Moderna vaccinations administered.

Pfizer vaccinations administered

Janssen vaccinations administered

AstraZeneca vaccinations administered

- Total people fully vaccinated per age group. The user should be able to choose whether this information is presented as either a total number or as a percentage within the age group.

The information needed for this step can be accessed by configuring the appropriate URL on the Vaccination Data page.

2. As outlined in step 1 dashboard.html will show vaccination information from the most recent week by default. Your page should also include an option to allow the user view information from any week in 2021. When a week is selected, the page should update to show information from the selected week. Present the same information as detailed in step 1. For total vaccination numbers and vaccinations per age group show the numbers up to the selected week.

The information needed for this step can again be accessed through the Vaccination Data page.

3. The dashboard.html page should also contain an option (e.g., a dropdown menu) that allows the user to select a county and view more detailed COVID case numbers for this county. The dashboard should allow the user to view and compare information for up to three counties at a time. The following information should be presented for each selected county:

○ The population of the county.

○ Confirmed COVID cases.

○ Population proportional COVID cases.

○ Cases per 100,000 people

The information needed for this step can again be accessed through the County Statistics page.

NOTE: the information necessary to create a list of counties is available in the json data. Two grade points (e.g., A+ to A-) will be deducted if the names of counties are hardcoded, instead of being read from the json data.

4. Finally, the dashboard.html page should show what county has the highest rate of COVID cases per 100,000 people and which county has the lowest rate.

Note: All steps outlined above can be achieved without the need to reload the page or navigate to a new page. If you solution involves reloading the page or navigating to a new page two grade points will be deducted from your final mark.

Marking

This assignment is worth 50% of the total module mark. You will receive an overall grade for the assignment. In determining the grade, the following weighting will be used:

a) 30%: for implementing the functionality described in step 1 above.

b) 30%: for implementing the functionality described in step 2 above.

c) 30%: for implementing the functionality described in step 3 above.

d) 10%: overall impression and quality of the overall design. For example, have you included appropriate and effective error handing? Is the information presented in a clear and uncluttered manner?

Submitting

Submit a single zip file using BrightSpace. The zip file should include a folder containing your webpage and any associated files.

Please name your zip file using the following format: “Firstname_Lastname_A2_COMP30680.zip”.

The deadline for submission is listed on BrightSpace under assignment 2.

Viewing the JSON data

To get an initial overview of the data in the JSON query, it is helpful to view it in a JSON viewer such as the one available at http://jsonviewer.stack.hu/. This will give you a tree like view of the data.

Code validation:

Your webpage should be consistent with the HTML 5 standard.

Code reuse

The webpage must be your own work. Any code snippets that are not directly written by you (e.g. used from a tutorial) must be referenced as such within your code. You must directly comment the code to explain its source. Failure to reference code that is not yours will be treated as plagiarism.