6.3C: Conditions and Function
Tasks
In this task you are asked to construct a table showing information of the eight
Australian Capital Cities.
You will be provided with some raw data for the set of cities, which includes fields
such as City Name, State (abbreviated), Comment, Average Yearly Rainfall and
Average Total Sunny Days.
In completing this task, the code used to dynamically build the table should be
allocated within a javascript function. This function is called when the user clicks a
button.
The initial webpage should appear as shown below:
Task 6.3C
2022/T1
+
Ⓒ localhost:3000/task6-3.html
Australian Capital Cities & Information
Click the button below to build and display a list of Australian cities along with some interesting
information.
Create City List
Task 6.3C
M Paused
X
:
Task6.3.1: Initial page view
When the user clicks the button to generate the table, it should appear as shown
in the following two images below:
1/5 SIT774 Web Technologies and Development
2022/T1
sk
Task 6.3C
O localhost:3000/task6-3.html
Australian Capital Cities & Information
Click the button below to build and display a list of Australian cities along with some interesting
information.
Create City List
#
The following table has been dynamically generated from JSON data:
0
1
2
3
Task 6.3C
City
Adelaide
6
Brisbane
Canberra
Darwin
3 Darwin
●
4 Hobart
X
Perth
7 Sydney
+
State
South Australia
Queensland
Australian
Capital
Territory
Northern
Territory
O localhost:3000/task6-3.html
X
+
5 Melbourne Victoria
Northern
Territory
Tasmania
Western
Australia
New South
Wales
Total averages across all cities:
Rainfall: 863 mm
Sunny Days: 231.125 days
Comment
Lovely city on
the Torrens River
Capital city of
Queensland
Where the
federal
politicians are!
Crazy and funny
folks, up north!
Task6.3.2: List of Australian Cities (pg1)
Crazy and funny
folks, up north!
Beautiful but
very chilly
winters...
City with four
seasons in one
day
Avg
Rainfall
A long drive but
worth it!
547
1080
602
1812
1812
569
518
734
Sunny Best
Days
Prettiest harbour 1042
in the world!
224
261
246
239
G
239
193
185
265
236
Activity
Tennis
Gardening
Tennis
Movies
Movies
Tennis
Tennis
Sailing
Sailing
M Paused
Averages calculated from summing up all the rainfall and sunny day totals and dividing each by
the total number of cities.
Task6.3.3: List of Australian Cities (pg2)
X
Paused :
X
Task 6.3C
2/5 SIT774 Web Technologies and Development
You are provided with the raw data for the cities in the form of a JSON object, that
contains an array of cities. This JSON object is shown below:
const cityListJSON = {
cities: [
};
]
{ name: "Adelaide", state: "SA",
text: "Lovely city on the Torrens River",
avgrainfall: 547, sunnydays: 224 },
2022/T1
{ name: "Brisbane", state: "QLD",
text: "Capital city of Queensland",
avgrainfall: 1080, sunnydays: 261 },
{ name: "Canberra", state: "ACT",
text: "where the federal politicians are!",
avgrainfall: 602, sunnydays: 246 },
{ name: "Darwin", state: "NT",
text: "Crazy and funny folks, up north!",
avgrainfall: 1812, sunnydays: 239 },
{ name: "Hobart", state: "TAS",
text: "Beautiful but very chilly winters...",
avgrainfall: 569, sunnydays: 193 },
{ name: "Melbourne", state: "VIC",
text: "City with four seasons in one day",
avgrainfall: 518, sunnydays: 185 },
{ name: "Perth", state: "WA",
text: "A long drive but worth it!",
avgrainfall: 734, sunnydays: 265 },
Task 6.3C
{ name: "Sydney", state: "NSW",
text: "Prettiest harbour in the world!",
avgrainfall: 1042, sunnydays: 236 }
This city data has been provided as a Javascript Array of objects which you
may use. This is in a file named cityData.zip that is downloadable from the
Task6.3C Ontrack page, in the Task Details -> Resources link at the
bottom right hand side of the web page.
NOTE: The JSON object provided has some fields that are shown in the table,
while others are different. In completing this task, you will be required to write
support javascript functions that take some input (parameters) and return the
processed result which is used to populate the table.
For example, the State field is provided in the data as an abbreviation which need
to be displayed as the full name. A javascript function that takes an abbreviation
as input and returns a fullname string could be used. An example of such a
function outline is shown below:
3/5 SIT774 Web Technologies and Development
function fullstateName( stateAbbrivation ) {
// Should use the input 'stateAbbreviation' and return a string
// with the full name (HINT: a switch() statement)
}
// Then call the function with a value (from the JSON data)
let statename = fullStateName( 'VIC' ); // should return 'Vitoria'
The final column in the table is Best Activitiy which is dependent on the rainfall
and sunny day values. The following table details how the activity should be
chosen:
Rainfall
0..650 'Tennis'
651..1050 Sailing'
1050+ Movies' only if sun < 250, or else 'Gardening'
Activity
Task 6.3C
In calculating the Best Activity field, a javascript function should be developed that
takes two inputs: the rainfall and the sunny days; then using a cascading if / then
/ else if condition checks, returns the text (string) for the appropriate rain/sun
combinations (i.e., function findActivity(rainfall, sun) { .. }).
Average Summary
The final section of the dynamically created table are the fields to show the
calculated total average rainfall and total average sunny days across all 8
Australian cities. This information should be displayed below the table.
Hints:
• Use the JSON array of objects provided to store the City details and
informaiton.
2022/T1
• Define a Javascript function (i.e., fullstateName( stateAbbreviation )) to return
the Full State Name when provided with the stateAbbreviation value.
• Define a Javascript function (i.e., findActivity( rainfall, sun )) to return the
type of activity Activity when provided with the city's average rainfall and
sunny days (rainfall and sun values).
• Use a table to organize the displayed data.
• Use two additional variables to keep a total of the rainfall and sunny day
values, these can be updated in the loop as you build the html to display the
city's row.
What will you submit?
4/5 SIT774 Web Technologies and Development
You should submit:
• Screen-shot(s) of the web page showing the final table.
• HTML base file
• The Javascript code to construct the table.
2022/T1
Task 6.3C
5/5