Student projects for Murach s JavaScript and DOM Scripting The projects in this document give you a chance to apply your JavaScript and DOM scripting skills to new applications This is the true test of your skills If you review these projects you ll see that they move from the simple to complex and project 18 2 is demanding enough to challenge any programmer For each project you ll start with a folder that contains all of the files that you ll need for developing the application At the least this will include the XHTML and CSS files for the application so you won t have to write that code In addition the folder will contain the JavaScript files that you ll need although they will usually be empty or contain just a function or two Then your job is to write the code for the JavaScript files For instance the folder named project 08 01 is the folder for project 8 1 It contains the XHTML file the CSS file and a JavaScript file that contains just the function that is used in all of the book applications In contrast the folder for project 12 1 contains the XHTML file the CSS file a JavaScript file that contains two functions that you can use and three empty JavaScript files that you will need to write the code for When you start a project you should first read its description But then you should review the files that are in its folder so you know what you re going to start with You may even want to open the XHTML file to see what it looks like in your browser At that point you re ready to start developing the solution Project 2 1 Area and Perimeter Calculator 2 Project 7 1 Change Calculator 3 Project 8 1 Table of Powers 4 Project 8 2 Temperature Converter 5 Project 9 1 Student Scores 6 Project 10 1 Monthly Balance Calculator 7 Project 11 1 Dice Roller 8 Project 12 1 Monthly Balance Calculator with Validation 9 Project 13 1 Vending Machine 10 Project 15 1 Team Roster 11 Project 16 1 Progress Bar 12 Project 17 1 Sort Quarterly Report 13 Project 18 1 Card Dealer 14 Project 18 2 Video Poker 15 Project 19 1 Contact Manager 17 1 Project 2 1 Area and Perimeter Calculator User interface Operation This application allows the user to enter values for the length and width of a rectangle This application displays the area and perimeter of the rectangle after the user clicks on the Calculate button Specifications The formulas for calculating area and perimeter are area width length perimeter 2 width 2 length This application should make sure that the user enters a positive number for the length and width This application should accept decimal entries like 10 5 and 20 65 for the length and width This application should round the area and perimeter to 2 decimal places 2 Project 7 1 Change Calculator User interface Operation This application allows the user to enter a number of cents from 0 to 99 This application displays the minimum number of quarters dimes nickels and pennies that represent the coins that make up the specified number of cents Specifications Assume that the user will enter a valid integer for the number of cents 3 Project 8 1 Table of Powers User interface Operation The user can enter an integer and click on the Powers button to display a table of squares and cubes from 1 to the value entered by the user Specifications The formulas for calculating squares and cubes are square x x cube x x x Assume that the user will enter a valid integer 4 Project 8 2 Temperature Converter User interface Operation This application allows the user to select the type of temperature conversion If the user selects one of the radio buttons this application disables the text box that s used to display the results of the calculation it enables the text box that s used to get data from the user and it removes any data from both text boxes This application displays the converted temperature in the disabled text box when the user clicks on the Convert button Specifications The formula for converting temperatures from Fahrenheit to Celsius is c f 32 5 9 The formula for converting temperatures from Celsius to Fahrenheit is f c 9 5 32 This application should accept decimal entries like 77 5 but it should round the result of the conversion to the nearest integer value This application should validate data to make sure that the user enters a valid number for the conversion Note To disable or enable a text box you can set its disabled property to true or false 5 Project 9 1 Student Scores User interface Operation This application stores the last name first name and score for one or more students and it calculates the average score for all of the scores that have been entered When the user clicks on the Clear button this application clears the score data from this application When the user clicks on the Sort button this application sorts the data in alphabetical order by last name Specifications The program should use one or more arrays to store the data Assume that the user will enter valid data 6 Project 10 1 Monthly Balance Calculator User interface Operation This application allows the user to enter deposits and withdrawals for a bank account and it calculates and displays the deposits and withdrawals with a running balance as well as the starting balance total deposits total withdrawals and ending balance Specifications Store the transactions in an array of arrays Use functions to organize the code for this application Assume that the account will have a starting balance of 2000 Assume that the user will enter valid data 7 Project 11 1 Dice Roller User interface Operation If the user clicks on the Roll button this application rolls two six sided dice displays the results of each and displays a message for some special dice roll combinations Specifications Create an object type named Die to store the data for each die This object type should contain these constructors and methods var Die function sides Die prototype roll function Die prototype getValue function default to a six sided die Create an object type named PairOfDice to store two dice This class should refer to the two instances of the Die type and it should include these constructors and methods var PairOfDice function sides default to six sided dice PairOfDice prototype roll function PairOfDice prototype getValue1 function get value of die1 PairOfDice prototype getValue2 function get value of die2 PairOfDice prototype getSum get the sum of both dice You can use the random method of the Math class to generate a random number from 1 to the number of