Description

Assignment #2
JavaScript
CS193C Summer 2017, Young

For this assignment, you are not allowed to use WYSIWYG editors (e.g., no Dreamweaver) and should only use a text editor to compose your assignment. In addition, your files should work on both the latest version of Mozilla Firefox and Google Chrome.
Car Options
In this part of the assignment you will create a webpage which allows a user to configure a car to see how much it costs. Here is a screenshot showing my version of the assignment:

As you can see, the car comes in four different configurations:
• GT Manual $17,790.00
• GT Automatic $18,590.00
• GT-S Manual $22,455.00
• GT-S Sportshift $23,155.00
The user chooses a basic configuration and then chooses a factory options package and adds on any dealer options desired. Here are the factory options:
• Option Combo #1 $1235.00
– Power Windows, Doors, Cruise Control
• Option Combo #2 $3354.00
– Rear Spoiler and Fog Lamps
– Keyless Entry
– Power Tilt & Slide Moonroof
– Power Windows, Doors, Cruise Control
• No Combo $0
and here are the dealer options:
• CD Autochanger $550.00
• VIP Security System $399.00
• Auto-Dimming Mirror $295.00
When the user clicks on the “Calculate Total” button, you should determine the price of the car, given their configuration and option choices.
In addition, as you can see on the right of the webpage I’ve given the user an option to choose a color for their car. When they change the color in the list, the picture of the car should automatically change. I’ve included five car photos for you to use with this assignment.
Bookland
For this part of the assignment, you will create a webpage that allows the user to search for a book with a specific title and/or by a specific author. Then, you will display information about the book on the web page. We are providing book data that you can use in a file called books.txt. For each book, we provide the author’s name, the book’s title, and a short description of the book.
2
Since we are only displaying text on the page, we can just use a textarea in which to display the information. Here’s what the page might look like:

In this example, the user typed in “Isabel Allende” as the author’s name and “The House of Spirits” as the book title. When the user clicked “Find book”, the short description for this specific book was displayed in the textarea.
Things to note: You do not have to worry about case sensitivity. If you want to make the search case insensitive, go for it but it is not required. If a book is not found, your page should do something reasonable, i.e. either display “Book not found” in the textarea or display nothing. If the user enters both a name and a title, you should display the description of the first match, i.e. the first book found that satisfies the given criteria. If the user only enters an author name, you can either display the title and description of the first match, i.e. the first book that you found by that author, or you can display the titles and descriptions of all books by that author. Similarly, if the user only enters a title, you can display the author and description of the first match, i.e. the first book that you found with that title, or you can display the authors and descriptions of all books with that title. All information must be displayed in the textarea. Assume the user has to enter full names to get a match – so Isabel will not get a match, but Isabel Allende will.
Once you get the array search working, try to see how you can improve the page using style sheets. Several professional web pages actually use form elements to display text information on pages, as we are doing in this problem. However, they also use CSS to hide the form elements and to make their pages look better. We’d like you to experiment with different CSS to see how you can change the form elements. Here’s our version of the web page with CSS:
3

We have changed the appearance of the text fields, buttons and textarea using several different style attributes. Your page does not have to look like ours. Feel free to change things any way you want to, as long as you experiment with CSS and form elements.
Credits
The Car photos (and the car prices) are from a Toyota Celica and were originally from www.toyota.com. I’ve eliminated car options and car colors to keep the assignment simple.
4