Reference no: EM132380494

ICT10013 Programming Concepts

Week 04 Tasks for submission

This document contains a number of tasks for you to attempt. There are three types of task:
• Tasks labelled as "no submission required, not part of portfolio"
o They are for you to attempt and practice.
o They provided assistance for you to develop solutions to other tasks that are part of your portfolio
• Tasks labelled as "PASS Submission Task"
o These tasks are part of your portfolio geared towards all students
o The solutions to these tasks must be uploaded for marking by your tutor
• Tasks labelled as "CREDIT Submission Task"
o These tasks are part of your portfolio geared mainly towards students aiming for more than a pass grade. Of course students aiming for a pass grade may attempt and submit these tasks.
o The solutions to these tasks must be uploaded for marking by your tutor

Screen Capture Process
You will be asked to take screen captures of your HTML pages, JavaScript code etc. Windows comes with an application called Snipping Tool which will perform this task.
Mac OSX has some built in keyboard shortcuts (Command-Shift-4). The image is saved on the desktop.
There are also products such as Jing (Win and OSX).
Try to avoid taking screen shots of the entire screen if you are only interested in part of that screen.

Submission Process
Download the files W03P.DOCX and W03C.DOCX from Canvas.

Paste the required screen captures from the tasks below into the appropriate places within these files. When complete, use the File / Export menu option to generate the files W03P.PDF and W03C.PDF Finally log into Doubtfire and submit both files into the appropriate weekly tasks.
File Locations:

In the following tasks you will often be asked to save a file to a storage location. You may use any storage location that you wish. You will not be asked to submit your .html or .js

JavaScript Tasks
Task 1.
Create a HTML file named w4a.html based on template_upd.html
• Change the title to Testing input and output, description "getElementById and innerHTML" and update other meta tags as applicable.
• Add a script element which specified a file named w4a.js within the src attribute.
• Inside the <form> section place the following:
<label>Your name <input type="text" id="firstname" /></label>
<button type="button" id="process"> Submit </button>
• After </form>, place the following
<p id="msg"></p>

Create a JavaScript file named w4a.js based on template.js

Within init():
• Create a local variable btn and assign document.getElementById("process") to this variable.
• Assign call to function processName to the onclick event of the btn variable, i.e. btn.onclick=...;

Create a function processName(). This function does not need any parameters. Within processName():
• Create a local variable first and assign the value entered into the textbox to this variable: document.getElementById("firstname").value
• Create a local variable output and assign document.getElementById("msg") to this variable.
• Use innerHTML to display a string stating "Hello, <first>" - replace <first> with the value entered by the user.

Test w4a.html

Task 2.
Create a HTML file named w4b.html based on template_upd.html
• Change the title to Calculating discounted prices, description "discounting prices based on the old price and discount rate of 20%" and update other meta tags as applicable.
• Add a script element which specified a file named w4b.js within the src attribute.

Create a JavaScript file named w4b.js based on template.js

We need an application that will calculated discounted prices based on the old price. Discount rate is a flat 20%.

First create a function calcDiscountedPrice() which takes one parameter price and returns the discounted price. Hint: since the discount is 20%, the discounted price is 80% of the current price.

Within init():
• Create a local variable btn and assign document.getElementById("process") to this variable.
• Assign call to the function processPrice to the onclick event of the btn variable.
Create a function processPrice(). This function does not need any parameters. Within processPrice():
• Create a local variable itemName and assign the value entered into the first textbox to this
variable.
• Create a local variable oldPrice and assign the value entered into the second textbox to this variable.
• Since oldPrice is a string, convert it to a number.
• Create a local variable newPrice and assign call to the function calcDiscountedPrice() to this
variable; don't forget to pass the correct argument to this function.
• Create the output replacing <span> tags with the relevant values. For example, if the user entered item Pillowcase and price as $10 the output should read "New price for the Pillowcase is $8.00".
Note: your new price should be formatted to 2 decimal places.

Test w4b.html

Task 3.
Create a HTML file named w4c.html based on template_upd.html
• Change the title to Grade from mark, description "Determine subject grade based on the final mark" and update other meta tags as applicable.
• Add a script element which specified a file named w4c.js within the src attribute.
• Inside the <form> section:
use <label> and <input /> to create a webpage allowing the user to enter student ID and

student mark;
use <button> to create a button with id="send".
• After the closing form tag, the output paragraphs should state : Student ID
Subject mark Subject grade

The rule is specified in the table below (assume that a mark is an integer, no decimal part allowed):

Mark	Grade
Below 50	F (Fail)
From 50 and under 60	P (Pass)
From 60 and under 70	C (Credit)
From 70 and under 80	D (Distinction)
Between 80 and 100 inclusive	HD

Create a JavaScript file named w4c.js based on template.js.

First you need to create a function markToGrade() which accepts one parameter mark and returns corresponding grade, except when the mark is not between 0 and 100 returned value is X.
Create a local variable grade.

You will need a set of nested if statements. Although there is more than one way of writing nested if statements here, let's start with validating mark. First check whether the mark is below 0 or above 100 and assign X to grade. Else means that the mark is valid (i.e. it is between 0 and 100 inclusive). So you can start checking if the mark is below 50 and assign the grade accordingly.

if (... - condition for invalid mark) grade = "X";
else //mark is between 0 and 100 if (mark < 50)
grade = "F";
else //means mark >=50 so need to check the mark is <60
if (mark < ...

Note: tutors will not accept badly structured nested if statements, where the CPU has to test conditions.

Within init():
• Create a local variable btnSend and store the reference to the HTML button with id "send".
• Assign call to the function processMark to the onclick event of the btnSend variable.
Create a function processMark(). This function does not need any parameters. Within processMark():
• Create a local variable studentID and assign the value entered into the first textbox to this
variable.
• Create a local variable subjMark and assign the value entered into the second textbox to this variable.
• Since subjMark is a string, convert it to a number.

• Create a local variable subjGrade.
• Call the function markToGrade() and assign the returned value to subjGrade.
• Update the first 2 lines of the output on the webpage. Student ID <whatever id the user entered> Subject mark <whatever value the user entered>

• Use if statement to check whether subjGrade is X. In this case the output on the 3d line should show the error message:
Subject grade - replace this paragraph with the error message that entered mark is invalid.

Otherwise the 3d line of the output should be
Subject grade <whatever is the corresponding grade>

Test w3b.html. Note you have to test every if branch, i.e. marks resulting in every possible grade, including borderline values, such as 0, 50, 60, 70, 80 and 100.

Task 4.
Create a HTML file named w4P.html based on template_upd.html
• Change the title to "Commission calculator", description "Pass level task" and update other
meta tags as applicable including your student name and ID.
• Add a script element which specified a file named w4P.js within the src attribute.
• Inside the article section:
o add the level 2 heading Commission on Property Sales
o Create a form and between form tags place 2 text boxes with relevant labels to accept Salesperson name and sales amount.
Use <button> to create a button with id="send"
o Create necessary paragraphs to output salesperson name and commission amount.

Create a JavaScript file named w4P.js based on template.js.

The commission on sales is calculated using the rule in the table:

Amount of sales	Commission rate
Less than $500000	5%
Between $500000 and $1.5mln inclusive	8%
More than $1.5mln	10%

Create a function named calcCommission() that takes one parameter saleAmt. Within this function:
• Create a local variable commRate.
• Use nested if statements to determine commRate. However, start with checking whether saleAmt is 0 or below, in this case commRate is 0; otherwise start checking if saleAmt is below 500000...
• Calculate the commission using saleAmt and commRate and return this value.

Within init():
• Create a local variable btn and store the reference to the HTML button with id "send".
• Assign call to the function processSales to the onclick event of the btnSend variable.

Within processSales():
Create local variables salesperson, sales and commission.
Read the input from the first textbox and store it in the variable salesPerson. Read the input from the second textbox and store it in the variable sales.
Convert sales to a number using parseInt() or Number().
Call the function calcCommission(), pass the proper variable as an argument to this function and store the returned value in the variable commission.

Display salesperson name on the webpage.
Check if commission is 0 (meaning the sales amount is invalid) and output the error message
"Invalid sales amount" on the webpage.
Otherwise the webpage output should display the commission amount formatted to 2 decimal places.

Test the program using invalid sales amount, make a screenshot paste into W04P.DOCX.

Test the program with valid values of sales amount, ensuring you are testing every branch of the if statement including borderline values. Screen Capture the HTML page displayed in your browser and paste into W04P.DOCX.

Copy and Paste the HTML code (or screenshot of your code) from your code editor into W04P.DOCX Copy and Paste the JavaScript code (or screenshot of your code) from your code editor into W04P.DOCX

Task 5.

Case study:
City-centre Parking charges its customers $10.00 / hour for the first 3 hours, and $7.00 / hour after that. An incomplete hour is rounded to the full hour, so 5 hours 15 minutes is to be paid as 6 hours. The car park is open from 6 am till midnight.

Create a HTML file named w4Credit.html based on template_upd.html
• Change the title to "Parking charges calculator", description "Credit level task" and update
other meta tags as applicable including your student name and ID.
• Add a script element which specified a file named w4Credit.js within the src attribute.
• Inside the article section:
o add the level 2 heading Parking Cost
o Create an empty paragraph with id="today"
o Create a form and between form tags place 2 text boxes with relevant labels to accept hours and minutes.
Use <button> to create a button with id="process"
o Create necessary paragraphs to output duration as full hours charged for and amount due.

Create a JavaScript file named w4Credit.js based on template.js.

Create a function named calcAmountDue() that takes one parameter hours. Within this function:
Create local variable amtDue
Check if hours is less than 3, then amtDue is hours multiplied by $10
Otherwise you need to write a formula where 3 hours is multiplied by 10 and number of hours above 3 is multiplied by 7.
Return the amount due

Create a function calcTotalHours() that takes 2 parameters - hrs and mins. Within this function:
Use if to check whether mins >0, in this case we need to add 1 hour to hrs. Return hrs

Create a function todayToString(). This function does not need parameters. Within this function:
Using JavaScript library create a string that represents current date and time The function should return that value.
There are various websites explaining how to do that, e.g. https://www.codexworld.com/how- to/get-current-date-time-using-javascript/

Within init():
• Display current date on the webpage in the paragraph with id="today" by calling the todayToString() function.
• Create a local variable btn and store the reference to the HTML button with id "send".
• Assign call to the function processParking to the onclick event of the btn variable.

We need to validate number of hours and minutes. Since the carpark is open from 6 am till midnight, number of hours is valid if it is between 0 and 17 inclusive. Number of minutes is valid if it is between 0 and 59 inclusive. Assumption: 0 hours and 0 minutes is a valid entry if the driver got into the carpark by mistake and wants to leave immediately.

Create a function isHoursValid(), pass one parameter hrs to it. If this parameter is within 0 - 17 range, return true, otherwise return false.
Similarly create a function isMinsValid() which will also return true or false. Within processParking():
• Create local variables numHours, numMins, totalHours, totalCost, msg = "" (we are storing an
empty string in msg).
• Read user input from the first textbox into numHours.
• Convert numHours to a number, e.g. use parseInt()
• Create a local variable validHours
• Call the function isHoursValid passing a correct argument to it; store the returned value in the validHours variable.
• Read user input from the second textbox into numMins.
• Convert numMins to a number, e.g. use parseInt()
• Create a local variable validMins
• Call the function isMinsValid passing a correct argument to it; store the returned value in the validMins variable.

• Use if to check whether validHours is false; in this case add an error message to msg: msg = msg + "Invalid number of hours";
You may need to add linebreak tag <br />. Do not use else branch.
• Use if to check whether validMins is false; in this case add a similar error message to msg as in the previous point.
You may need to add linebreak tag <br />. Do not use else branch.
• Check if msg is not an empty string. In this case no calculations should happen, just display msg on the webpage.
Otherwise we need to do calcualtions of the parking cost (all of the points below must be enclosed in the else branch:
- call the function calcTotalHours() and pass the required arguments to it. Store the returned value in totalHours;
- call the function calcAmountDue() and pass the required argument to it. Store the returned value in totalCost.
- On the webpage display full hours charged for and amount due. Format amount due to show 2 decimal places.

Test and troubleshoot your program as needed.

Screen Capture the HTML page displayed in your browser and paste into W04C.DOCX. You need at least 6 screenshots:
• Valid hours, invalid minutes
• Invalid hours, valid minutes
• Both hours and minutes are invalid
• All inputs are valid with total hours being <3, exactly 3 and above 3 tested (at least 3 test here)

Copy and Paste the HTML code and JavaScript code (or screenshot of your code) from your code editor into W04C.DOCX

WordPress Tasks
Task 6.
Work through the ICT10013_WordPress_intro.docx document (available from Week 4 subject section).

Ensure that your name and ID appear on the Contact page and the dog page. Modify these pages if necessary.

Paste your screen captures of your Dog page and About page into W04P.docx

Task 7. (CREDIT Submission Task)

Add a Cat page to your site.
Include 2 different widgets on this page that take your fancy

Add a Fish page to your site.
Include 2 different widgets on this page that take your fancy Ensure that your menu now includes the Cat and Fish page.
Paste your screen captures of your Cat page and Fish page into W04C.docx

Attachment:- Programming Concepts.rar