Description

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