SIT774 Web Technologies and Development

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