FUNCTIONAL

SPECIFICATION
Version 1.0
Author: Ragini Rachna Singh

Version 1.0 Page 1 of 13

 Table of Contents
1. INTRODUCTION ....................................................................................................................................... 3
1.1 Purpose .................................................................................................................................... 3
1.2 Scope ..................................................................................................................................................... 3
1.3 Terms and Acronym Definition .............................................................................................................. 4
1.3.1 Terms ............................................................................................................................................ 4
1.3.2 Acronyms ...................................................................................................................................... 4
2. USER INTERFACE (UI/UX) ......................................................................................................................... 5
2.1 Home Screen ............................................................................................................................. 5
2.1.1 Top Banner UI Screen ................................................................................................................... 5
2.1.2 Calculator...................................................................................................................................... 6
3. FUNCTIONAL REQUIREMENT ................................................................................................................... 7
3.1 Response time ....................................................................................................................................... 7
3.2 Numeric Keys......................................................................................................................................... 7
3.3 Display Screen ....................................................................................................................................... 7
3.4 Arithmetic Operations ........................................................................................................................... 8
3.4.1 Addition ........................................................................................................................................ 8
3.4.2 Subtraction ................................................................................................................................... 8
3.4.3 Multiplication ............................................................................................................................... 8
3.4.4 Division ......................................................................................................................................... 8
3.4.5 Percentage .................................................................................................................................... 9
3.4.6 Square Root .................................................................................................................................. 9
3.5 Special Keys ........................................................................................................................................... 9
3.5.1 Decimal Key .................................................................................................................................. 9
3.5.2 Integer Toggle Key ........................................................................................................................ 9
3.6 Clearing Keys ......................................................................................................................................... 9
3.6.1 C- Clear ......................................................................................................................................... 9
3.6.2 AC- All Clear .................................................................................................................................. 9
3.6.3 CE- Clear Entry .............................................................................................................................. 9
3.7 Error Handling ..................................................................................................................................... 10
4. TEST SCOPE............................................................................................................................................ 10
4.1 Unit Testing ......................................................................................................................................... 11
4.2 Functional Testing ............................................................................................................................... 11
5. FLEXIBILITY AND SCALABILITY ................................................................................................................ 13
6. ADDENDUM .......................................................................................................................................... 13

Version 1.0 Page 2 of 13

1. INTRODUCTION
QCAL is a quick, user-friendly, easy to use web calculator designed to perform basic arithmetic
calculations. It will be accessible through all web browsers and provide users with a simple
interface for performing the calculations.

1.1 Purpose
This document is intended to define the detailed functionalities, behaviours, and interactions of
QCAL. By outlining the specific features and operations that the calculator will perform, this
document aims to serve as a comprehensive guide for the development team, designers, and
stakeholders involved in the project. The specification will also serve as a central reference point for
discussions and decisions related to the application's features and behaviours.

The functional specification aims to achieve the following objectives:

a. Clarity of Requirements: Provide a clear and unambiguous description of how the QCAL
will operate. This includes specifying the various arithmetic operations it will support
(addition, subtraction, multiplication, division, percentage, and square root), the user
interface components (numeric buttons, operation buttons, display area), and the expected
user interactions.

b. Homogeneity: Ensure that all team members have a consistent understanding of the
application's requirements. By defining the expected behaviour and user flows, the
specification helps prevent misunderstandings and discrepancies in implementation.

c. Guidance for Development: Serve as a roadmap for developers to implement the QCAL's
functionalities accurately and efficiently. Developers can refer to the specification to
understand how to structure the code, handle user input, error handling and display
calculation results.

d. Digital Experience: Contribute to the creation of a user-friendly and easy to use calculator
that meets user expectations. By detailing user interface components, user interactions,
and error handling, the specification ensures that the calculator provides a seamless and
intuitive experience.

e. Testing Framework: Provide a basis for quality assurance and testing efforts. Testers can
create test cases and scenarios based on the specified requirements to verify that the
calculator functions as intended.

f. Flexibility and Scalability: Lay the foundation for potential future enhancements or
modifications to the QCAL. The specification's comprehensive overview enables
stakeholders to consider additional features or improvements in a well-structured manner.

1.2 Scope
The scope defines the features, functionalities, and limitation of QCAL- the QCAL. It defines the
boundaries of the project and outlines what is included and excluded from the application's
scope.

Version 1.0 Page 3 of 13

 a. Supported Arithmetic Operation: The QCAL will support four fundamental arithmetic
operations: addition, subtraction, multiplication, and division. It will also support widely
used functions of percentage and square root. Users will be able to perform these
operations on integer and decimal inputs.

b. User Interface Components: The webpage will be minimalist and contain the home and
help buttons other than the calculator . It will comprise numeric buttons (0-9), operation
buttons (+, -, *, ÷,%, √), an equal button (=) to calculate results, a decimal button and a clear
button (C,AC & CE) to reset inputs. Details on this follow in the document under section 2.
Interface

c. Input Handling: The calculator will accurately interpret user inputs, allowing them to build
numerical expressions through button clicks. The user can clear the input or start a new
calculation using the C, CE or AC button.

d. Calculation Display: The calculator will display both the input expression and the calculated
result in a designated display area. Results will be presented in a readable format.

e. Compatible Design: The QCAL's interface will be responsive, adapting to various screen
sizes/ browsers and orientations to ensure usability on different devices.

1.3 Terms and Acronym Definition

This section details out the definitions for the Terms and Acronyms used in this document and
in turn provides a consistent understanding for all stakeholders.

1.3.1 Terms
a. QCAL- Name of the web tool designed to perform arithmetic calculations through a
web browser.
b. User Interface (UI)- The visual and interactive elements that users interact with on the
QCAL, including buttons, input fields, and display areas.
c. User Experience (UX)- The overall experience a user has while interacting with the
QCAL, encompassing usability, accessibility, and satisfaction.
d. Numeric Buttons: Interactive buttons that allow users to input numerical values into the
calculator.
e. Operation Buttons-Buttons that represent arithmetic operations such as addition,
subtraction, multiplication, division, percentage, decimal and square root.
f. Display Area-The designated space where input expressions and calculation results are
displayed. It will also display errors.
g. Equal Button (=)- The button users click to calculate and display the result of the entered
expression.
h. Clear Buttons -Refers to the 3( C, CE & AC) buttons that user can use to clear entries on
the display screen and memory.

1.3.2 Acronyms
a. UI/UX: User Interface/User Experience - The combined design and usability aspects of
the calculator.
b. QA: Quality Assurance- Process of testing and ensuring that the calculation functions
correctly and meets the requirements.

Version 1.0 Page 4 of 13

 c. URL: Uniform Resource Locator- The web address used to access the calculator.

2. USER INTERFACE (UI/UX)

QCAL is a simplified web-based calculator accessible across browsers and devices. User can access
the tool using URL www.qcal.com

2.1 Home Screen

The home screen for QCAL is divided into 2 sections; top banner and the main calculator tool

HOME HELP

00

C CE AC

7 8 9

4 5 6 x

1 2 3 .
0

2.1.1 Top Banner UI Screen

The top banner consists of

o QCAL logo- Use the image file attached in the addendum of this document. The logo banner
should cover 1/6th of the screen height. Maintain aspect ratio.
o Home Button – This button brings back user to home page with all values on calculator
initialised and all entries cleared.
o Help Button- Upon clicking this button, following screen should come up with Support
Details.

Version 1.0 Page 5 of 13

 HOME HELP

00 Having trouble with our web

application Our support team is
AC here to help
C CE
Contact:
support qcal.com
+1800 -123-123
7 8 9

4 5 6 x

1 2 3 .
0

2.1.2 Calculator
The design of QCAL is a critical aspect that directly impacts the user's interaction and overall
experience. The design aims to provide a visually appealing, intuitive, and efficient user interface that
facilitates seamless calculation processes.

➢ User Interface Elements

o Numeric Buttons - Clearly labelled numeric buttons (0-9) are positioned in an organized
grid layout for easy input. These are in different colour than Operational buttons.
o Arithmetic Function Keys (+,-,*,÷,%,√). Easily recognizable operation buttons are placed
adjacent to the numeric buttons.
o Decimal point key
o Integer Toggle Key (-+) Switches between positive and negative numbers
o Equal Button (=): A prominently placed equal button calculates and displays the result.
Equal is executed for following
1. Equal button is pressed
2. Enter button on keyboard
3. When user enters second number of the equation e.g 3+2. When user enters 2, the
result 5 is automatically displayed on screen
o Clear Button (C, CE & AC): These are readily accessible clear buttons and reset the input
and allows users to start a new calculation.
o Display Area: A well-defined display area presents the entered expressions and
calculated results clearly.
➢ Responsive Design
o The QCAL's interface is designed to be responsive, adapting to various screen sizes and
orientations without compromising usability.

Version 1.0 Page 6 of 13

 o Elements are appropriately scaled and positioned to ensure readability and functionality
on different devices, including desktops, tablets, and mobile phones.
➢ Visual Hierarchy
o Operation buttons are visually distinct from numeric buttons to prevent user confusion.
o The equal button is designed to stand out, encouraging users to perform calculations.
➢ Clarity and Readability
o Clear typography with appropriate font sizes ensures that numbers and symbols are
easily legible.
o Sufficient contrast between text and background enhances visibility.
➢ Intuitive Interaction
o Buttons respond to user clicks with visual feedback (highlighting or pressing effect) to
indicate successful interaction.
o A single tap on a numeric button inputs the corresponding number, while successive taps
continue the number.
Colour Scheme & Shape
Display Screen White Rectangle Rounded corners
Numeric Keys Green Accent 6,Light 50% Circle except 0. 0- Oval
Equal Green Accent 6,Light 50% Oval
Arithmetic Function Keys Orange Accent 2, darker 25% Circle
Clearing Keys Orange Accent 2, darker 25% Circle
Integer Toggle Key Orange Accent 2, darker 25% Circle
Decimal Key Orange Accent 2, darker 25% Circle
Calculator Background Black Rectangle

3. FUNCTIONAL REQUIREMENT
QCAL is a QCAL and will be accessed through URL www.qcal.com. QCAL will be accessible across
all browsers and devices. The calculator will do calculations for integers ( negative numbers, zero
and positive numbers) and decimal.

3.1 Response time

The response time expectation for QCAL is .1 millisecond

3.2 Numeric Keys

o Integers Z – {..., -3, -2, -1, 0, 1, 2, 3, ...} Includes zero, positive neutral numbers (1,2,3…)
and Negative.
o Decimal Key

3.3 Display Screen

o The display screen will always default to Right justified 0 for Initial screen

The display screen will handle 13 characters for calculations. Out of these
o 12 characters are for numeric digits

Version 1.0 Page 7 of 13

 o 1 character is for sign ( negative or decimal ) – If both negative and decimal is present
then limit numeric digits to 11 characters.
o Displays Error Messages (Refer Error Handling Section 3.6)
o Display R on top left of screen when values have been rounded off to adjust to 12
characters ( or 11 in case when decimal and minus are present)

3.4 Arithmetic Operations

QCAL will perform the following arithmetic functions.

3.4.1 Addition
o The user can input numbers using the numeric buttons.
o The number can be switched to negative using the Integer Toggle Key
o Enter first number followed by + button then second number.
o Result is displayed on the screen
o Refer Error Handling Section 3.6 for exception handling.
o If result is greater than allowed characters ( 12 digits with 1 sign/11 digits with 2 sign)
then round off the result. Display R at top left to indicate that value is rounded off.

3.4.2 Subtraction
o The user can input numbers using the numeric buttons.
o The number can be switched to negative using the Integer Toggle Key
o Enter first number followed by - button then second number.
o Result is displayed on the screen
o Refer Error Handling Section 3.6 for exception handling.
o If result is greater than allowed characters ( 12 digits with 1 sign/11 digits with 2 sign)
then round off the result. Display R at top left to indicate that value is rounded off.

3.4.3 Multiplication
o The user can input numbers using the numeric buttons.
o The number can be switched to negative using the Integer Toggle Key
o Enter first number followed by * button then second number.
o Result is displayed on the screen
o Refer Error Handling Section 3.6 for exception handling.
o If result is greater than allowed characters ( 12 digits with 1 sign/11 digits with 2 sign)
then round off the result. Display R at top left to indicate that value is rounded off.

3.4.4 Division
o The user can input numbers using the numeric buttons.
o The number can be switched to negative using the Integer Toggle Key
o Enter first number followed by ÷ button then second number.
o Result is displayed on the screen
o Refer Error Handling Section 3.6 for exception handling.

Version 1.0 Page 8 of 13

 o If result is greater than allowed characters ( 12 digits with 1 sign/11 digits with 2 sign)
then round off the result. Display R at top left to indicate that value is rounded off.

3.4.5 Percentage
o The user can input numbers using the numeric buttons.
o The number can be switched to negative using the Integer Toggle Key
o Enter number followed by % button .
o Compute the percentage by dividing number by 100 . Result is displayed on the screen.
o Refer Error Handling Section 3.6 for exception handling.
o If result is greater than allowed characters ( 12 digits with 1 sign/11 digits with 2 sign)
then round off the result. Display R at top left to indicate that value is rounded off.

3.4.6 Square Root

o The user can input numbers using the numeric buttons.
o The number can be switched to negative using the Integer Toggle Key
o Enter number followed by √ button .
o Compute the square root for the number . Result is displayed on the screen.
o Refer Error Handling Section 3.6 for exception handling.
o If result is greater than allowed characters ( 12 digits with 1 sign/11 digits with 2 sign)
then round off the result. Display R at top left to indicate that value is rounded off.

3.5 Special Keys

3.5.1 Decimal Key
The decimal key is represented by a small dot or period (.) symbol. When you press the decimal key,
it enters a decimal point into the number you are inputting, allowing you to work with fractional
values.

3.5.2 Integer Toggle Key

This function is represented by buttons on the calculator. It will allow user to change a number to
negative by pressing this key. Same Key is used to switch back to positive

3.6 Clearing Keys

The calculator contains 3 clearing Keys

3.6.1 C Clear
This function will cancel or delete entire calculation.

3.6.2 AC All Clear

This function will clear the calculator and reset any functions.

3.6.3 CE Clear Entry

This function will delete last entry. If user made a mistake with the last number, or if they press the
wrong key to divide, add, subtract, ..., the last, previous entry will be ignored / canceled or deleted.

Version 1.0 Page 9 of 13

 3.7 Error Handling
QCAL is adept at error handling. Below scenarios will be handled to ensure that QCAL provides
accurate results and a smooth user experience.

Table 1 – Error Handling

Sno Scenario Error Code Error Message Reset Method

1 Division by zero E01 Cannot divide by 0 C/CE/AC/ Home
2 Input more than 12 digit E02 Input too long C/CE/AC/ Home
Calculated Result more
3 E03 Output too long CE/AC/ Home
than 12 digit
No message. The input is not
Invalid Input from
4 None registered on the display C/CE/AC/ Home
keyboard
screen
Square root of negative
5 E04 Invalid Operation C/CE/AC/ Home
number
6 Unresponsive Key on QCAL E05 Please refresh page Web browser is refreshed

Error Screen

HOME HELP

Cannot divide by 0

C CE AC

7 8 9

4 5 6 x

1 2 3 .
0

4. TEST SCOPE
Testing QCAL involves ensuring that it performs accurate calculations, handles different scenarios
correctly, and provides a seamless user experience. Here is a scope for testing QCAL

Version 1.0 Page 10 of 13

 4.1 Unit Testing
Unit testing is intended to check the functioning of different elements in isolation.

Table 2- Unit Testing

Test Platform
Sno Functionality Test Scenario Expected result Comments
Category Device Browser
QCAL home page should
Unit Enter URL www.qcal.com open up. Contrast and Test across all browser
1 URL Device1 Browser 1
Testing on the browser page aspect ratio is adjusted as and device combination
per browser & Device
Unit Numeric Press each numeric Key on Pressed Key value should Test across all browser
5 Device1 Browser 1
Testing Keys QCAL. appear on display and device combination
Unit Function Press each arithmetic Pressed Key value should Test across all browser
6 Device1 Browser 1
Testing Keys function Key on QCAL. appear on display and device combination
Unit Press Home button on the Initial webpage of QCAL is Test across all browser
7 Home Device1 Browser 1
Testing web page displayed and device combination
Unit Press Help button on Help screen of QCAL is Test across all browser
8 Help Device1 Browser 1
Testing webpage displayed and device combination
Unit Input numeric digits. Test Test across all browser
9 Display Unit Device1 Browser 1 Max digit length 12
Testing max Length and device combination
Input numeric digits and
Unit Test across all browser
10 Display Unit negative sign Test max Device1 Browser 1 Max 13 digits with sign
Testing and device combination
Length

4.2 Functional Testing

In this testing , the goal is to validate all QCAL capabilities in line with this functional specification. It
will encompass.

o Scenario Based Testing

o Functional Coverage
o User Interface Testing
o Data Validity
o Black Box Testing

Table 3- Data matrix for Testing. Use this combination chart to test all arithmetic operation
Numeric Type
Positive Negative
Positive Negative Zero Decimal Decimal

Version 1.0 Page 11 of 13

Table 4- Functional Testing

Test
Sno Functionality Test Scenario Expected result
Category

- Result is within display limit

-if result is whole number and exceeds display limit the Error
Functional Basic Arithmetic Add two numbers using message should appear
1
Testing Operations- Addition Data Type Matrix -If result is decimal and exceeds display limit then round off to
display limit. R should appear on display screen to show
results have been rounded off
- Result is within display limit
-if result is whole number and exceeds display limit the Error
Basic Arithmetic
Functional Subtract two numbers message should appear
5 Operations-
Testing using Data Type Matrix -If result is decimal and exceeds display limit then round off to
Subtraction
display limit. R should appear on display screen to show
results have been rounded off
- Result is within display limit
-if result is whole number and exceeds display limit the Error
Basic Arithmetic message should appear
Functional Multiply two numbers
6 Operations- -If result is decimal and exceeds display limit then round off to
Testing using Data Type Matrix
Multiplication display limit. R should appear on display screen to show
results have been rounded off

- Result is within display limit

-if result is whole number and exceeds display limit the Error
message should appear
-If result is decimal and exceeds display limit then round off to
display limit. R should appear on di
Functional Basic Arithmetic Divide two numbers using
7
Testing Operations- Division Data Type Matrix
splay screen to show results have been rounded off

- Result is within display limit

-if result is whole number and exceeds display limit the Error
Basic Arithmetic
Functional Find percentage of a given message should appear
8 Operations-
Testing number -If result is decimal and exceeds display limit then round off to
Percentage
display limit. R should appear on display screen to show
results have been rounded off
- Result is within display limit
-if result is whole number and exceeds display limit the Error
Basic Arithmetic
Functional Find square root of a given message should appear
9 Operations- Square
Testing number -If result is decimal and exceeds display limit then round off to
Root
display limit. R should appear on display screen to show
results have been rounded off
Perform some functions
and then use the clearing
Functional functions The display screen should clear up as per the clearing
10 Clearing Functions
Testing -C functions definitions
-CE
-AC

Functional
11 Error handling Division by zero Cannot divide by 0
Testing

Functional
12 Error handling Input more than 12 digit Input too long
Testing

Version 1.0 Page 12 of 13

 Functional Calculated Result more
13 Error handling Output too long
Testing than 12 digit

Functional Invalid Input from

14 Error handling No message. The input is not registered on the display screen
Testing keyboard

Functional Square root of negative

15 Error handling Invalid Operation
Testing number

Functional
16 Error handling Unresponsive Key on QCAL Please refresh page
Testing

5. FLEXIBILITY AND SCALABILITY

o Continuously monitor and analyse the application's performance metrics. Regularly optimize
and adjust the architecture as needed
o Stress Testing- Conduct stress tests to evaluate how the application handles extreme loads.
Identify performance limitations and address them proactively
o Use asynchronous processing for tasks that might take time (e.g., complex calculations) to
avoid blocking the main application thread
o Statelessness- Design the application to be stateless, meaning that user session data is not
stored on the server. This enables easier load balancing and scaling
o Caching- Implement caching mechanisms to store frequently used calculation results and
reduce the need for recalculations, improving response times.
o Conduct performance tests to assess the calculator's response time and processing speed
under varying user loads.
o Identify potential bottlenecks and optimize code to ensure fast and consistent performance
as user traffic increases.
o Future Planning- Anticipate future growth into different types of calculators and plan for
increased scalability needs. Design the application architecture to accommodate future
enhancements.

6. ADDENDUM
QCAL logo bar image file

Version 1.0 Page 13 of 13