Question
The goal of this assignment is to give you some experience working with JavaScript to make a Web page interactive. This assignment will involve creating
The goal of this assignment is to give you some experience working with JavaScript to make a Web page interactive. This assignment will involve creating an interactive web store for a pet adoption agency that displays information about the pets that are in need of homes. Requirements: 1. Create a Lab3 folder inside the root of your website, which will be used to publish the webpage and images for this assignment. 2. Create the Pets.html HTML page that implements the simple web stores display using JavaScript. a. The page must contain a drop-down box for selecting cats, dogs, or birds. b. When a pet category is selected from the drop-down box, the page should update to display all of the pets in that selected category. i. Display an image, name, birthdate, age, description, and availability for each pet. ii. Include an adopt button to allow the user to adopt a pet in the list. When the button is clicked, the pets availability should change to adopted. iii. The information used in the display should come from JavaScript objects stored in an array inside your page. c. Use JavaScript to implement the interactive behavior of the page. i. You will need at least 10 pets for each category (dogs, cats, birds) including images for each pet, which should be stored in an images folder. ii. Create an array to store JavaScript objects that represent a pet. The JavaScript pet object will contain the name of the pet, birthdate, age, description, availability (adopted or needs a home), and the URL for the pets image file. iii. The selection of a category from the drop-down box should update the page to display the list of pets in that category along with their information. iv. Implement the ability to allow the user to adopt one or more pets. The pets availability should change after its adopted. Also, you need to keep track of all the pets the user adopted during the single use of your page. d. Display a message on the page that shows all the pets that were adopted by the user during that session. 3. Also, you need to use CSS to style the page and make it look professional and attractive. 4. Remember to add a section to the labs.html page created in Lab 1 for this lab. a. Include a description of what you learned, what elements you liked/disliked, and a link to the page you created for Lab 3. 5. Extra credit opportunity: a. Implement the ability to remember all the pets that a user adopted across multiple sessions. b. Display the pets they adopted and the information for each pet the next time they visit the page.
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started