Sale!
WEB222 Assignment 4 solved

WEB222 Assignment 4 solved

$24.99 $14.99

Original Work ?

Download Details:

  • Name: Assignment-4.zip
  • Type: zip
  • Size: 391.66 KB
Category: You will Instantly receive a download link upon Payment||Click Original Work Button for Custom work
Share This

Description

5/5 - (3 votes)

Objective:

Practice Styling elements with CSS, Updating the DOM with data & responding to user events.

Specification (Part A):

For Part A, we will be creating a small demo app that works with “Pet” data, i.e., dogs, cats & birds. This app will show all of the pets from a “petData” array of objects and allow the user to filter which pets they would like to see. This app must also be visually appealing, so we must update/override existing CSS to create a more customized experience for the user.

To begin, download the Assignment4.zip file containing all of the files required for Assignment 4 from blackboard.

Uncompress the Assignment4.zip file somewhere on your local machine. When you’re ready to begin editing the files, open the uncompressed folder (Assignment4) and locate the directory “partA”. Open this directory using Visual Studio Code (https://code.visualstudio.com). You may test your html files in any modern browser (Chrome, Firefox, Safari, Internet Explorer, etc.):

Updating File: “main.html”

The main page of our app will be the “main.html” file. There is already some code there, but must configure it further to create some interactivity and personalization for the app

1. Give your app a name by updating thetag, i.e. “~ A4 Pets ~”

2. Update the

element to match the name of your app. It currently states “App Title”, but this must be changed to something more appropriate (i.e. “~ Purfect Pets ~”)

3. Update the “onclick” values all the elements inside the top

    • element to call appropriate filtering functions (to be written later). For example, clicking “Dogs” should call a function that updates the table to only show Dogs (i.e., invokes the filterDogs() function – see below)

4. Update the

element to show your full name (zero will be assigned for failure to do so).Updating File: “a4-main.js”

All of the JavaScript for the solution (except for the data) is located in the file “a4-main.js”. Inside this file, write a series of functions to render the data (“petData” located within js/data.js). You must not use innerHTML unless explicitly instructed to do so (there are two instances where it is necessary). The functions are follows:

1. Function: loadTableWithFilters

This function will take all of the data from the global “petData” array (located within js/data.js) and render it as rows within the

element in the main.html file.

It must use the global filter values, i.e.: filterType (possible values: “cat”, “dog”, “bird”, or “”), filterAgeMin (any positive number) and filterAgeMax (any positive number) to conditionally show rows depending on a pet’s type, or age values. For example, if the value of filterType is “cat”, the value of filterAgeMin is 1 and the value of filterAgeMax is 3 then only pets with type: “cat” who are between the age of 1 and 3 (exclusively) will be added as rows within the

element.

Before any rows are added to the

element however, it must be cleared of all existing data. This can be done using element.innerHTML = “”

Lastly, this function must be invoked inside window.onload to ensure that the

element is initially populated with all of the pets inside the “petData” array.

As an example of how each new row must be rendered, consider the following example for Bella the dog:

Data:

image: { src: “https://zenit.senecac.on.ca/~tanvir.alam/shared/winter-2017/web222/assignment4/pets/Bella.jpg”, alt: “Bella”, width: 120, height: 160 },

name: “Bella”,

age: 0.5,

description: “Bella is a bright young pup who loves being around other dogs and doesn’t mind the odd cat.
Her favourite treat is bacon – anything bacon.”,

type: “dog”

Rendered HTML (

element):

Bella

Bella

Bella is a bright young pup who loves being around other dogs and doesn’t mind the odd cat.
Her favourite treatis bacon – anything bacon.

Age: 0.5 years old.

NOTE: You will notice that the description for all pets contains HTML code. For us to render this properly in our

element, we must use the innerHTML property ( i.e.: p.innerHTML = petData[i].description )

2. Function: filterDog

This function simply sets the global filterType variable to “dog” and invokes the loadTableWithFilters function again to refresh the table. This function must be invoked when the user clicks “Dogs”

3. Function: filterCat

This function simply sets the global filterType variable to “cat” and invokes the loadTableWithFilters function again to refresh the table. This function must be invoked when the user clicks “Cats”

4. Function: filterBird

This function simply sets the global filterType variable to “bird” and invokes the loadTableWithFilters function again to refresh the table. This function must be invoked when the user clicks “Birds”

5. Function: filter_zero_1

This function simply sets the global filterAgeMin variable to 0, the filterAgeMax variable to 1 and invokes the loadTableWithFilters function again to refresh the table. This function must be invoked when the user clicks “< 1 year”

6. Function: filter_1_3

This function simply sets the global filterAgeMin variable to 1, the filterAgeMax variable to 3 and invokes the loadTableWithFilters function again to refresh the table. This function must be invoked when the user clicks “1 – 3 years”

7. Function: filter_4_plus

This function simply sets the global filterAgeMin variable to 4, the filterAgeMax variable to Number.MAX_VALUE and invokes the loadTableWithFilters function again to refresh the table. This function must be invoked when the user clicks “4+ years”

8. Function: filterAllPets

This function simply sets the global filterType variable to “”, the filterAgeMin variable to 0, the filterAgeMax variable to Number.MAX_VALUE and invokes the loadTableWithFilters function again to refresh the table. This function must be invoked when the user clicks “All Pets”

Updating File: “a4-main.css” – see: completed sample

Now that the table is getting populated with our data and the filters are up and running, we need to make the app a little nicer to look at. This next step involves updating the CSS file “a4-css.css” to clean up the layout and add some colour and style:

1. Add a new font colour to theelement

2. Add a new background colour to the

Related products