Cognizant Academy

Piggy Bank Deposit Automation

HTML TechnologiesKnock Out Challenge

Version 1.0

Prepared By / Last
Reviewed By Approved By
Updated By

Name

Role

Signature

Date
 Table of Contents

1.0 Introduction 3

1.1 Purpose 3

1.2 Definitions & Acronyms 3

1.3 Project Overview 3

1.4 Scope 3

1.5 Target Audience 3

1.6 Hardware and Software Requirements 3

1.6.1 Hardware Requirements 3
1.6.2 Software Requirements 4

2.0 Functional Requirements 4

2.1 Functional Requirements 4

3.0 Design Specification 5

3.1 UI Design 5

3.2 General Design Constraints 5

4.0 Submission 6

4.1 Code submission instructions 6

5.0 Change Log 6

1.0 Introduction

1.1 Purpose of this document

Piggy bank is an investment policy for savings managed by Lombard Investments. They have customers who
opt for schemes for their saving and investment purposes. As the company does all the calculations
manually , they want to help the customer by automating all the schemes like the FD, RD, Kids Future Plan
and Trip Saver online so that the calculations can be made easy.

Piggy Bank Deposit Automation wants to design a web page for calculating the Savings amount based on the
type of savings opted.

Design a Web page that requires the customer to provide all the details required and calculate the saving
amount. Create a Web page “PIGGY BANK SAVINGS CALCULATOR” that has the following fields - name,
customer type, Address & ID Proof, mobile number, type of savings, amount and tenure. The Interest Rate
Chart should also be displayed on the same web page. The savings type needs to be chosen as FD or RD. The
styles have to be applied using CSS3 and the savings amount should be calculated and displayed using
Javascript.

1.2Definitions & Acronyms

Definition / Acronym Description

Nil

1.2 Project Overview

This project enables to implement Web technologies concepts such as HTML5, CSS3 and Javascript and
helps to acquire the skills required by a Web designer. The HTML5, CSS3 and Javascript requirements are
given precisely so that the associate can implement the various concepts learned in all these web
technologies. The individual associate is expected to execute the knock out challenge and complete it
within 2 hours.

1.3 Scope

The scope of the Piggy Bank Automation is focused on the following

1. Designing a Web page “PIGGY BANK SAVINGS CALCULATOR” with the specified fields.

2. Applying the styles using CSS to the components.

3. Using JavaScript for calculating the savings amount

1.4 Target Audience

Learner Level
 1.5 Hardware and Software Requirements

1.5.1

# Item Specification/Version

1.5.2 Software Requirements

# Item Specification/Version

1. HTML 5

2. CSS 3

3. Javascript

Note: All the required hardware and software will be provided in the TekStac platform

2.0 Functional Requirements

2.1 Functional Requirements

Req. # Req. Name Req. Description

1 Design a Web
page “PIGGY Label Name Component  Name Description
BANK SAVINGS Customer Name customerName To enter the name of the customer. It
CALCULATOR” should be mandatory.
(Specify it for the “name”
with the
attribute)
specified fields.
Customer Type customerType Select the customer Type.  Provide the
correct input type to make this
component a radio button. It should be
mandatory.

Address & ID Proof addressProof Select the address and id proof. Use
Check Box.
Mobile Number customerMobileNumber To enter the mobile number.
Use type=”tel” or type=”text or
type=”number”. If you use type=”text”
or type=”number”, use “pattern”
attribute to accept whether the 10 digit
 mobile no starts with either one of the
following numbers:
7,8 or 9
It should be mandatory.
Type of Savings savingType An auto-complete feature should be
available to the user for the following
options.
FD,RD
(Use DataList with id attribute’s value
as “savings” to make use of auto-
complete feature with options
FD,RD).
It should be mandatory.
Amount amount To enter the amount. It should be
mandatory.
Tenure tenure Choose the tenure using a slider control.
Tenure represents the number of years.
It should be mandatory.
Calculate Savings submit The input type submit must be used.
Reset reset Reset Button.  On clicking this button, all
fields should be reset.
Provide the input type for this
component.

 NOTE: The text highlighted in bold in the Description needs to be implemented in the code to
complete the web page design. Use the Label Name and the Component Name as given. . The
Component Name can be given in any case (Upper case or Lower case or Mixed case).All the
necessary attributes for the Components should be given.

2 Apply the 1.Body color should be “#F0E68C”.

mentioned styles 2.The heading should be done using <h1> tag, the text color should be “#800080”, style
using CSS to the should be “cursive” and it should be aligned to the center of the webpage.
components.
Note: Fill in the  style tag so that the given styles are applied to the components.
(Do not use Inline CSS)

3 Use JavaScript Use JavaScript for doing the following calculation: 

for calculating When the customer enters valid values and clicks the submit button, the total amount has to
the savings be calculated based on the interest rate chart given below and displayed as “Total Savings
amount done totalSavings” in a div tag with  id  “result”.  
Formula for FD & RD:  totalSavings = amount + (amount*tenure*interest)/100;
For the customer type “Senior Citizen” there should be an additional of 0.5% interest rate
for FD/RD 
 Note: Use getElementsByName() or getElementById() function to retrieve the values
Refer to the Interest Rate Chart below:

Type Tenure Interest Rate

FD 1 – 2 years 7

Above 2 years to 4 years 7.5

Above 4 years to 5 years 8

 RD 1 – 2 years 6.5

Above 2 years to 4 years 6

Above 4 years to 5 years 5.5

4 form Tag with form Tag is already given in the code template. Do not change the code template and do the
attribute coding as per the requirement and specification.
onsubmit Make sure that the onsubmit attribute in the form tag is invoking the JavaScript function like
"return calculateTotalSavings()".
Also ensure that “return false;” statement is the last line of the JavaScript function
“calculateTotalSavings()”.

3.0 Design Specification

3.1 UI Design

1. The Sample web page should look as shown,

2. The interest rate chart should be designed as shown in the above sample webpage. And on
providing the values the web page should look as shown :
 3.2 General Design Constraints

All validations should be based on HTML 5(Do not use Javascript)

 The component name should be the same as given above.

 The Customer Name should contain only letters and space.
 Customer Type should be either ‘Normal Citizen’ or ‘Senior Citizen’.
 Address & ID Proof should contain the values as Aadhar Card, Pan Card, Driving License, Passport, Voter Id.
 Customer Mobile Number should be of 10 digits and should start with 9/8/7.
 The interest should be calculated based on the tenure. Tenure should be a slider control. Tenure can take a value
between 1 to 5.  By default the tenure value should be 1.
 The amount should be 500 and above.

4.0 Submission

4.1 Code submission instructions

1. Do not change the given code skeleton as your code will be auto evaluated.

2. You can validate your solution against sample test cases during the assessment duration.

3. Your last submitted solution will be considered for detailed evaluation.

4. Make sure to submit the solution before the specified time. Once the time is up, you will not be
allowed to submit the solution.

5.0 Change Log

Changes Made
 V1.0.0 Initial baseline created on <dd-Mon-yy> by <Name of Author>
Vx.y.z <Please refer to the configuration control tool / change item status form if the details of
changes are maintained separately. If not, the template given below needs to be followed>
Section Changed Effective Changes Effected
No. By Date