Introduction to Web Technology 

There are 6 tasks in this assignment.

Task 1: DOM Events & Javascript Handlers

Create the HTML and CSS code needed to reproduce the following web application interface. Extend your code by including the JavaScript functionality listed in “Design Requirements”. You must use the same layout and inclusions as shown below.

Design Requirements:

The heading text should be displayed within an h2 element.

•  All images must have their border specified within the same CSS rule (see “Design Resources”).

•  The above rule should also adjust the width of each img element to 110px.

•  A border radius effect with a shorthand value of 5px 15px must be applied to each image.

•  The text featured directly beneath the images should be displayed within an h3 element.

•  The input element that follows must have its alignment set by a rule with an ‘attribute’ selector.

•  The above-mentioned rule should also adjust the width of the input element to 500px.

•  A placeholder attribute must be included where appropriate.

•  Double-clicking the first image should display a JavaScript prompt (see Figure 1).

•  The value entered into the prompt must then be displayed within a JavaScript alert (see Figure 2).

•  Moving the mouse over the second image should alter the text contained within the h3 element.

•  The altered text must match the output displayed within the “Final State” image (see Figure 3).

•  Scrolling the mouse wheel over the third image should display a text value inside the input element.

•  The text value must also match the output shown within the “Final State” image (see Figure 3).
  
  Also Read - Java Assignment Help

Design Resources:

Please Note:

• HTML tables must not be used to layout this application interface.

• Save your completed file as “A4_TASK1.html”.

• This will be the first of 6 separate files that you must submit for this assignment.

ANSWER : TASK 1 : DOM EVENTS & JAVASCRIPT HANDLERS

Task 2: Javascript Timer

Create the HTML and CSS code needed to reproduce this web application interface. Extend your code by including the JavaScript functionality listed in “Design Requirements”. You must use the same layout and inclusions as shown within the interface imagery.

Also Read - Javascript Assignment Help

Design Requirements:

• The heading text should be displayed within an h2 element.

• The image must have a width of 200px and a rounding effect set to 100px.

•  A matching CSS shadow effect should also be applied (see “Design Resources”).

• The three CSS declarations mentioned above must be placed within the same rule.

•  A label element should be used with the text description for each radio button and checkbox.

•  The radio buttons must be grouped with the first/topmost selected by default.

•  The checkbox for “Reverse Direction” should be unchecked by default.

•  The following actions must occur when the “Start” button is clicked:

  •  Any existing/active JavaScript timers should be stopped

  •  A single JavaScript timer must be created and activated

  •  All radio buttons should be disabled to prevent any changes while the timer is active

•  The timer must update the clock image using the interval specified by the selected radio button.

•    The clock images should be shown in the order listed below (see “Design Resources”).

•    The display order of these images must be reversed whenever the checkbox is checked.

•    The following actions should occur when the “Stop” button is clicked:

  •    Any existing/active JavaScript timers must be stopped

  •    All radio buttons should be enabled to allow the selection of a new interval

•    A “pointer” CSS cursor effect must be applied to all label elements and interface buttons.

•    Matching background colours should be applied where appropriate (see “Design Resources”).

•    A suitable border and arial font must also be included (see “Design Resources”).

•    An array should be used to store the various image paths within your JavaScript code.

Design Resources:

• Your solution must use more than one user-defined JavaScript function.

•  HTML tables should not be used to layout this application interface.

•  Save your completed file as “A4_TASK2.html”.

• This will be the second of 6 separate files that you must submit for this assignment.

ANSWER : TASK 2 : JAVASCRIPT TIMER

Task 3: Randomisation And Repetition

Create the HTML and CSS code needed to reproduce this web application interface . Extend your code by including the JavaScript functionality listed in “Design Requirements”. You must use the same layout and inclusions as shown within the interface imagery.

• The heading text should be displayed within an h2 element.

•  An image must be used to show the current state/status of the game (see “Design Resources”).

• The three input elements featured directly beneath the image should:

  • Contain a width of 110px and height of 80px along with a font size of 50px

  • Show a matching border, colouration (see “Design Resources”), alignment and bold styling

  • Include a border radius of 25px and a margin of 20px

  • Be set to read only so that any displayed values cannot be altered by the user

•  A label element must be used with the text description for the “Enter a number…” field.

•  An arial-16px font along with a line height of 23px should be applied to the abovementioned label.

• The user’s input must be collected within an input element that:

  •  Contains a width of 150px and height of 80px along with a font size of 50px

  •  Show a matching border, colouration (see “Design Resources”), alignment and bold styling

  •  Include a border radius of 5px, a margin of 10px and an autofocus attribute

•     A button labelled “Start” should be included and styled as follows:

  •    Contains a width of 100px and a padding of 10px

  •     Shows a matching border and colouration (see “Design Resources”)

  •     Includes a border radius of 5px

•    The following actions must occur when the “Start” button is clicked:

  • The user’s input is validated

  • If the input is valid:

    •  Three unique random numbers between 1 and 10 (inclusive) are generated

    •  Each number is displayed within one of the three input elements (1 number per element)

    • A check is performed to see if the user’s input matches any of the unique random numbers

    • The image is altered to indicate the result (see Figure 2 and Figure 3; see “Design Resources”)

    •  An audio file is played if a match is found (see “Design Resources”)

  • If the input is invalid:

    • The image is altered to indicate the result (see Figure 4; see “Design Resources”)

    •  No subsequent actions are taken

•  A “pointer” CSS cursor effect should be applied to all label elements and interface buttons.

Design Resources:

Please Note:

• Your solution must use more than one user-defined JavaScript function.

• HTML tables should not be used to layout this application interface.

• Save your completed file as “A4_TASK3.html”.

• This will be the third of 6 separate files that you must submit for this assignment.

ANSWERS : TASK3 : RANDOMISATION AND REPETITION

Task 4: Local Storage & JavaScript Styling

Create the HTML and CSS code needed to reproduce the following web application interface. Extend your code by including the JavaScript functionality listed in “Design Requirements”. You must use the same layout and inclusions as shown below.

Design Requirements:

• The heading text should be displayed within an h2 element.

• The container for the select and input elements must:

  • Show a matching border and background colour (see “Design Resources”)

  • Contain a border radius effect with a shorthand value of 40px 10px

  • Apply an arial-14px font displayed with a left alignment

  • Be set to a width of 360px and contain a matching shadow effect (see “Design Resources”)

  • Include padding to reflect the proportions shown in the above illustration

• The select element within the container should:

  • List the six specified colour names (see Figure 1) and their corresponding hexadecimal values

  • Utilise option groups to categorise “Pastel” colours and “Primary” colours

  • Be set to a width of 150px and inherit both the font family and font size of its parent element

• The input elements within the container must:

  • Contain the correct type attribute values to match the above illustration

  •  Be grouped where appropriate to ensure proper functionality

•  Default values should be specified for all select and input elements (see “Design Resources”).

•  A label element must be used for each text description included within the container.

•  The “Introduction to Web Technology” text should:

  •  Be declared as an h1 element with a width of 525px and a height of 50px

  •  Contain a border radius effect with a shorthand value of 10px 40px

  •  Apply a calibri font along with a matching horizontal and vertical text alignment

  •  Include padding to reflect the proportions shown in the above illustration

  •    Display styling that matches the values set in each select and input element

•  The following actions must occur when the HTML document is loaded:

  •     All values recorded in localStorage are retrieved

  •     All elements within the container are set to the retrieved values

  •     All retrieved values are applied to the “Introduction to Web Technology” text

• Note: Apply the default for any style value that is not available from local storage

•     The following actions should occur when any select or input values are changed:

  •     The updated values are recorded in localStorage

  •     The updated values are applied to the “Introduction to Web Technology” text (see Figure 2)

Design Resources:

Please Note:

• Your solution must use more than one user-defined JavaScript function.

• HTML tables should not be used to layout this application interface.

• Save your completed file as “A4_TASK4.html”.

• This will be the fourth of 6 separate files that you must submit for this assignment.

ANSWER : TASK 4 : Local Storage & Javascript Styling

Task 5: Arrays & Dynamic HTML

Create the HTML and CSS code needed to reproduce the following web application interface. Extend your code by including the JavaScript functionality listed in “Design Requirements”. You must use the same layout and inclusions as shown below. 

Design Requirements:

• The heading text should be displayed within an h2 element.

• The sub-heading text must be displayed within an h3 element.

• The containers for each label and non-button input element should:

  • Be declared as div elements with a CSS display value of inline-block

  •  Show a matching border and background colour (see “Design Resources”)

  • Contain a margin and padding value set to 10px

•  The label element within each container must:

  •  Be displayed with a bold 22px courier font styling

  •  Show a matching foreground colour (see “Design Resources”)

  •  Include suitable padding to reflect the proportions shown in the above illustration

•  The input element within each container should:

  •  Be declared as a type="text" variant with a height and width of 75px

  •  Contain an arial-40px font and bold styling

  •  Show a matching border, colouration (see “Design Resources”) and alignment

  •  Contain a maxlength attribute to limit user input to a maximum of two (2) characters

•    An autofocus attribute must also be used to pass focus to the first input element.

   A button labelled “Start” should be included and styled as follows:

•     Contains a width of 100px and a padding of 10px

•     Shows a matching background colour (see “Design Resources”)

•    The following actions must occur when the “Start” button is clicked:

  • The user’s input is validated

  • If the input is valid :

    • The user’s input is inserted into an array and sorted appropriately

    •  A summary table is generated and displayed within a predefined div element

  • If the input is invalid :

    • Appropriate feedback is presented to the user within a predefined div element

    • No subsequent actions are taken

•     The summary table should have a matching border and colouration (see “Design Resources”).

•     The first column of the table must be composed of th elements.

•     All average and median values should be rounded to two (2) decimal places.

•     A “pointer” CSS cursor effect must be applied to all label elements and interface buttons.

•     The above-mentioned effect should only be rendered when the mouse hovers over these components.

Design Resources:

Please Note:

• You must use the same “Error Image” provided in Task 3 to present validation feedback to the user.

• Save your completed file as “A4_TASK5.html”.

• This will be the fifth of 6 separate files that you must submit for this assignment.

ANSWER : TASK 5 : Arrays & Dynamic HTML

Task 6: JavaScript Objects & DOM Nodes

Create the HTML and CSS code needed to reproduce this web application interface (see Figure 1). Extend your code by including the JavaScript functionality listed in “Design Requirements”. You must use the same layout and inclusions as shown within the interface imagery.

Design Requirements:

• The heading text should be displayed within an h2 element.

• The sub-heading text must be displayed within an h3 element.

• A button labelled “Start” should be included and styled as follows:

  • Contains a width of 100px and a padding of 10px

  • Shows a matching background colour and CSS cursor effect (see “Design Resources”)

• The following actions must occur when the “Start” button is clicked:

  • A total of six (6) JavaScript objects should be created and stored within an array

    • The first object must contain the headings for each table column (see Figure 2)

    • The remaining objects should contain the table records (one record per object)

  •    The entire ‘Subject’ table (see Figure 2) must be recreated using JavaScript DOM Nodes

  •    A suitable variable must be used to sum the credit points for each subject

  •     The completed table should be appended to a predefined div element

  •    The credit point total should then be appended to the same predefined div element

•    The div element should be styled with a calibri-18px font.

•    The ‘Subject’ table must use th and td elements where appropriate.

•    The table should show a matching border, alignment and background colour (see “Design Resources”).

•    :nth-child()must be used to shade even and odd table rows (see “Design Resources”).

•    The credit point total should be displayed within an h4 element.

Design Resources:

Please Note:

•  Save your completed file as “A4_TASK6.html”.

•  This will complete the set of 6 separate files that you must submit for this assignment.

ANSWERS : TASK 6 : Javascript Objects & DOM Nodes