this is a very basic level class. just make it work as it says. no need to use advance level work.
Learning Objectives: This assignment is designed to practice: 1. Creating an Event Driven JavaScript program. 2. Using Input Elements such as text boxes, buttons, and radio buttons in an event driven program 3. Implement JavaScript code which will respond to user events. 4. Use of variables: declaration, initialization, modification 5. Use of arithmetic and/or logical operators. 6. Use of comments. PROBLEM DESCRIPTION The Tax Processing program needs to be modernized. A GUI (Graphical User Interface) is now required. Radio buttons and text boxes are needed for input and output purposes. A button will be used for processing data. You are required to create a webpage to implement the interface required using the JavaScript programming language. The illustration below displays the format of the GUI screen required. Note: Choose a background color and a text color of your preference. As a reminder, the tax rates and deductions allowed are listed below: · Tax rates: EarningsTax Rate 0 to $20,000 10.00% More than $20,000 to $100,000 20.00% More than $100,000 35.00% ◦ Note: Amount of Tax owed: Earnings x Tax Rate · Deductions (reduce the tax owed amount): ◦ Pensioner: $1,000 ◦ Investor in renewable energy: 5% of invested amount ◦ Donations to charities: 10% of donated amount Inputs: · Earnings: earnings amount · Pensioner: Yes or No · Investments in Renewable Energy: amount invested (if any) · Donations to Charities: amount donated (if any) Output: · Tax Amount owed Processing: · Process button: ◦ It will read the content of the Earnings text box. ▪ Example of reading from text box: myVariable = myTextBoxID.value; · It loads the content of the text box whose ID is myTextBoxID into the variable myVariable. ▪ Notice that the Process button does not need to “read” the radio buttons since the radio buttons take care of loading the appropriate value to the variables involved. ◦ It will process the data from the Investments text box, the Donations text box as well as the data from the Pensioner radio button and generate the tax amount required. ◦ The code for the Process button is similar to the code for the previous assignment. However, it doesn’t need to inquire about being an Investor or Donor since the absence of an entry on those boxes can be interpreted as a negative answer. ◦ It will also place the result of the tax amount owed on the output box. ▪ Example of writing to a text box: myTextBoxID.value = myVariable; · It writes the content of the variable myVariable to the text box whose ID is myTextBoxID. SAMPLE TRACES THROUGH THE CORRECT ALGORITHM Sample 1 Sample 2 Inputs: Earnings 75,000 39,000 Pensioner Yes No Investments 20,000 Donations 500 Output: Tax Amount owed $13,000 $7,750 Additional Information: · Be sure to include a comment with your name and section in the part of your HTML code program. · Since the content of a text box which requires a number may be used in mathematical operations, use the function Number() to ensure that the numeric input is treated as numeric data. Syntax example: numericVariable = Number(myBoxID.value) · Syntax example to round up a number to 2 decimals. Just add .toFixed(2) to the variable name containing the number. someNumber.toFixed(2) · You will use several variables in this program. · It is good practice to store the surcharge (0.15) in a variable. · Examples related to radio buttons (these are examples, the name, id and onclick content should be related to your code): · Using radio buttons:
· In the example above, the two associated radio buttons, load the appropriate value to the variable sizeData based on the user’s selection. Point Values Screen format with Input Elements (radio buttons, button, text boxes) 6 Variable declarations 5 Student name inserted as comment in the head section 1 Process Button with appropriate code 7 Program execution 6 Page 1 of 5 Page 1 of 5 Page 1 of 5 Lavf58.45.100