CSE2WDX Advanced Project Web Development Assessment 3 – Australia

Background :-
In this assignment you will create a web page that behaves as an interactive weather tool for your location. The web page will first detect and report your location via the geolocation API. Expect that this functionality will run over localhost only as geolocation is considered to be insecure over HTTP. You are not expected to host this page and/or pay for HTTPS. Once the page has your location, it will use those coordinates to send a request for the weather data at that location to the Open Weather Map website. Specifically you will use the “5 day weather forecast API”. You can use this service by signing up for a free account and obtaining an API key. The weather data received will be for 4 days of weather data at 3-hourly intervals making a total of 32 readings. The data will then be displayed in an attractive fashion in two formats: (1) a grid summary and (2) a line graph produced with an HTML Canvas. A preview of the expected interface is given in Appendices A and B.
CSE2WDX Advanced Project Web Development Assessment 3 – Australia

Tasks 1-7: Objectives report
You have some freedom in how you design the interface for the page However a critical aspect of this assignment will be to prepare a report showing how parts of your solution map to the certification exam objectives. Marks for Tasks 1-7 are tied to completing the report and code together as a pair. You will not
earn marks for Tasks 1-7 if you do the report without the code or vice versa.

An example report and a template have been provided You may try the technical tasks suggested in the
example as written modify them or choose alternatives from the certification exam objectives.

Marks are awarded for the following certification objectives and they must have two examples each:
• A.2: Write code that interacts with UI controls
• A.4: Implement HTML5 APIs
• B.3: Implement exception handling
• C.1: Validate user input by using HTML5 elements
• C.2: Validate user input by using JavaScript
• C.3: Consume data
• C.4: Serialise, deserialise and transmit data

CSE2WDX Advanced Project Web Development Assessment 3 – Australia

These objectives all come from weeks 6-9 of the subject.

Tasks 8-13: Implementation
Regarding the implementation tasks the work must go in the following files:

Task 8: Geolocation component
The web page will first detect and report your location via the geolocation API. The results (latitude and
longitude) will be injected into a form that will be used as the starting point for Tasks 9 and 10 later.The geolocation request and response will be processed immediately on page launch without requiring a button click or similar. To be clear, the “Get Weather” button is used for Tasks 9 and 10 only. A suggested design is shown here:

Task 9: Forecast component
The weather forecast will be for 4 days with 8 readings per day at 3 hourly intervals. This is a total of 32
readings to be organised in a grid. The data comes from the Open Weather Map 5 day weather forecast API. Note that this API only supplies forecasts from the current time on wards so expect the need to report the weather forecast for a part-day at the start and end. The request is launched with the “Get Weather” button(Task 8).

A suggested design is shown here:

Here is an example of the URL that you would submit as an AJAX request to source the above data:

where XXX is the APPID that you get when you sign up to a free OpenWeatherMap account.
If you try submitting this URL to your browser rather than as part of an AJAX request, you should get a raw JSON response like below.

For example the first temperature at timestamp 1550653200 is 18.52°. Then 16.78° at 1550664000. Etc Try retrieving a copy of the JSON data as a test like above before you start.

Task 10: Line chart component
The“Get Weather” button that launches the Open Weather Map request for Task 9 also feeds Task 10. For
this task we want an HTML Canvas to plot the trend of the 32 temperatures as a line graph. A suggested design is shown here:

Task 11: App content
Marks are awarded for your HTML for the content put into your page.This includes text images controls and the containers that hold them all. You should aim to create a well-organised page.

Task 12: App presentation
Marks are awarded for your CSS for the presentation of the page.This includes styling of the content and
the layout.You should aim to create an attractive design Refer to Appendices A and B for suggestions.

Task 13: App logic
Marks are awarded for your JavaScript/jQuery for the logic of the page This includes logic based on sequence selection and repetition structures plus core concepts such as variables functions arrays and event handling You should aim to create a very functional page.

CSE2WDX Advanced Project Web Development Assessment 3 – Australia

Task 14: Coding conventions
This task will award marks according to the quality of your code according to these aspects:

1.HTML CSS and JavaScript indentation is consistent with one level of indentation per block.

2.The HTML CSS and JavaScript files each use some comments comment as appropriate minimum of 3 per file type).

3.The W3C HTML markup validation service reports zero errors and zero warnings on the code when tested with the “validate by direct input” method.

4.The W3C CSS markup validation service reports zero errors and zero warnings on the code when tested with the “validate by direct input” method.

5.The Visual Studio Error List reports zero JavaScript errors and warnings.

6.The page footer includes hyperlinks to the W3C HTML and CSS markup validation services to indicate
compliance to the W3C standards.

Extra: Although marks are not allocated, it is also good practice for HTML CSS and JavaScript code to
consistently use best-practice casing lower case for HTML/CSS and camel Case for JavaScript. The DOC TYPE declaration is an exception.)

Task 15: Organisation
The following organisational aspects must be put in place for your solution:
(a) Programming language:
The web page will be a DHTML web page DHTML refers to Dynamic HTML DHTML is the combination of
HTML5 CSS3 and JavaScript working together to create a web page that has a dynamic feel. Note that
JavaScript may also include jQuery and is strongly encouraged.

(b) Third-party components:
A critical aspect of this assignment is to develop the coding skills by hand. Therefore except for jQuer
third-party libraries are not permitted for this assignment

(c) Images:
Store the images in a sub folder called “images”. Note that the web page cannot use copyrighted images. To avoid this problem you are welcome to use images with an open licence. You can get these from free image websites or by performing an image search on your search engine with a “usage rights” filter set to “labelled for reuse” (or equivalent). Maintain a list of references in a file called references. txt in your solution with the name author location and access date of the images.

(d) Integrated development environment:
The website must be built using Visual Studio 2017.

(e) Template:
The website will be built from scratch beginning with an empty folder Follow these steps:
a) Create a new folder called xxx_cse 2wdx_assignment 3 where xxx is your student ID.
b) Open Visual Studio 2017. Select “File” -> “Open” -> “Website…” and select the new folder.
c) Select “File” -> “Close Solution” immediately. This will prompt you to save a solution file (*.sln suffix).
This must be saved in your new folder. Close Visual Studio 2017.
d) Double-click on the solution file to open Visual Studio 2017 and your solution again. Continue to use
this method for opening your solution going forward for convenience.
e) You are now ready to go. Add your project assets next.

CSE2WDX Advanced Project Web Development Assessment 3 – Australia