Assignment \#2: Construct Custom JavaScript Objects SUPPLIED FILES For this assignment, you are supplied with the following starter files (in STARTcweb190a2.zip): - carsales.html - media folder containing: a aveo.png - ram.png - css folder containing: carsales.css DESCRIPTION OF THE ASSIGNMENT You are to update carsales.html so that it allows you to view information on a number of used vehicles. Here is an example web page: Eagle Used Car Depot Below the heading, there is an image of the vehicle, followed by a table with the year, make, model, and price of the vehicle. Below the table there are Previous and Next buttons that allow the web site visitor to cycle through the various vehicles whose information is stored in the web page. For example, if the visitor clicks Next, the page is updated to display information on the next vehicle: Eagle Used Car Depot Clicking on the Previous button causes the page to be updated to display information on the previous vehicle. When the last vehicle is being displayed, if the visitor clicks on the Next button, the first vehicle is redisplayed. Similarly, when the first vehicle is being displayed, if the visitor clicks on the Previous button, the last vehicle is displayed. WHAT YOU ARE TO DO You are supplied with a starter HTML file and associated CSS and image files. When you render the starter file in your browser, it will look like: Eagle Used Car Depot As you can see, no vehicle information is immediately displayed by the starter HTML file. You are to create a number of Vehicle objects. Each Vehicle object will contain the following properties: - year: a number containing the year of manufacture of the vehicle - make: a string containing the make of the vehicle - model: a string containing model of the vehicle - price: a number containing the price of the vehicle - imageName: a string containing the path to the image file of the vehicle relative to your HTML page (such as "media/aveo.png") You are to create a Vehicle constructor that takes 5 parameters, one for each of the above properties. It will initialize the properties of the Vehicle object that it creates. You are to create an array of at least 4 Vehicle objects that the web site visitor can view. The starter files include two vehicle images that you can use, but you will need to supply your own images for other vehicles. You are to create a method named summarize() on the Vehicle objects. This method should concatenate the year, make, and model into a single string (such as "2010 Chevrolet Aveo"). You should use a single summarize() method for all Vehicle objects. In order to keep the Vehicle objects portable to other web pages, you are to create a method named showInfo() on the Vehicle objects that takes in 5 strings, representing the ID attributes of HTML elements that will display the various vehicle properties. For example, if you have a variable named myvehicle containing a Vehicle object, you would call: myVehicle.showInfo("yearID", "makeID", "modelID", "pricelD", "imgID"); where yearID, makeID, modelID, pricelD, and imgID are the id attributes of various elements in the web page. Your showinfo() method should also set the alt attribute of the image to the result of the summarize() method for that Vehicle. You should use a single showInfo() method for all Vehicle objects. Because the Vehicle objects are stored in an array, you are to create a variable that contains the index of the currently displayed Vehicle. You are to add event handlers to the Previous and Next buttons that will cause the previous and next Vehicles to be displayed. You should ensure that the first vehicle is displayed when the page loads using appropriate JavaScript commands. Place all JavaScript code related to the Vehicle object in a separate appropriately named JavaScript file and link that file into the carsales.html web page. Feel free to create any other functions, variables, methods, and properties that you need to complete this assignment. ADDITIONAL REQUIREMENTS Create a data folder in your assignment folder. In the data folder, create a vehicles.json file containing an array with the information about the vehicle objects in the JSON format. Note that this file will not be used at all by the web page or JavaScript files that you create - it is just an exercise to ensure that you know how to create and format JSON data. SUBMITTING YOUR WORK (acharset "UTF-8
