MONTHLY EXPENSES CALCULATOR

Felix, the secretary of Gandhinagar colony association - decides to arrange for Music and Karate lessons to the
colony children. He wants the count of children who will be taking up Music and Karate lessons every month, so
that he can provide fund for their needs. The colony has a head, who will place fund-request to the colony-
association. Create a web page - which will allow this colony head to calculate the monthly expense before
placing request for fund. The monthly expense calculated must be displayed on the same page as shown in the
screen shots given below.

Plain web page design :

Web page after entering valid details and clicking on “Calculate Monthly Expense” button :

Use the Label Name and the Input Component Id as given. The Component Id can be given in any case
(Upper case or Lower case or Mixed case). All the necessary attributes for the Components should be
given. The Component Id should be specified for each HTML Component. If the Component Id is not
provided for an HTML component, marks will not be provided for that component. All Tags, Elements
and Attributes should conform to HTML5 Standards.
Provide the details as given in the table below.

Req. Req. Name Req. Description

#

1 Design an HTML Label Name Component Description

page for Name
“MONTHLY (Specify it for
EXPENSES the “name”
attribute)
CALCULATOR”
application Group Head groupHeadName To enter the name of the group head.
Name
Design Constraints:
 The text “Enter the Group Head
Name” should appear by default.
 It should be mandatory.
 Use type=“text” with pattern
attribute to accept the alphabets
and space only.

EMail ID groupHeadEmail To enter the email id of the group head.

Design Constraints:
 It should be mandatory.
 Use type=“email”.
Mobile Number groupHeadMobile To enter the mobile number of the
Number group head.

Design Constraints:
 The text “Enter the Mobile
Number” should appear by default.
 It should be mandatory.
 Use type=“text” with pattern
attribute to accept the 10 digit
mobile number to start with
either one of the following
numbers: 7,8 or 9

Extra-Curricular curricularActivity To Select the activity.

Activity
Design Constraints
Use Radio Button and its values should
be 'Karate' and 'Music'.
The field is mandatory.
(set required on both)

No of Girls noOfGirls To select the number of girls.

Design Constraints:
Provide the correct input type to make
 this component a range slider with min
value 0 and max value 500.
For this component set id attribute
value as ‘girlseval’
It should be mandatory.

No of Boys noOfBoys To select the number of boys.

Design Constraints:
Provide the correct input type to make
this component a range slider with min
value 0 and max value 500.
For this component set id attribute
value as ‘boyseval’.
It should be mandatory.

submit Submit Button to submit the form

Design Constraints
 The input type should be
“submit”.
 Value should be “Calculate
Monthly Expense”
reset On clicking this button, all fields
should be reset. Value should be
“Reset”

Note: The text highlighted in bold in the Description needs to be implemented in the
code to complete the web page design.

2 Apply the STYLING WITH ELEMENT SELECTORS

mentioned styles
using CSS to the 1. Body backgroud color should be “#E6E6FA”
components
2. The heading "MONTHLY EXPENSES CALCULATOR" should be done using
<h1> tag the text color should be “#800080”, font family should be “cursive” and it
should be aligned to center of the webpage.

3. Extra-Curricular Activity and Amount should be displayed as the table header(th)

with the back ground color as “#00FFFF”

Note: Fill in the style tag so as to have the given styles applied to the components. (Do
not use Inline CSS)
3 Use JavaScript for Use JavaScript for displaying the total monthlyexpense:
displaying the total
monthly expense. When the valid values are entered and the button component is clicked, the total
monthly amount should be displayed as follows:
Total Monthly Expenses is: totalMonthlyAmount
in a div tag with id as “result”.

Total Monthly Amount is calculated using the below formula:

(No of Girls + No of Boys) * 600 - if the extracurricular activity opted is Karate
Or
(No of Girls + No of Boys) * 500 - if the extracurricular activity opted is Music

Note:
 Use getElementsByName() or getElementById() function to retrieve the
values.
 Please do not use “let”. Instead, use “var”.
4 form tag with form tag is already given in the code template. Do not change the code template and do
attribute onsubmit the coding as per the requirements and specification.

Make sure that the onsubmit attribute in the form tag invokes the JavaScript function
like "return calculateExpenses()".

Also ensure that “return false;” statement should be the last line of the JavaScript
function “calculateExpenses()”.