Minorproject SRS

A Project Report on
SCIENTIFIC CALCULATOR
Submitted for partial fulfillment of the requirements for the of
BACHELOR OF COMPUTER APPLICATION
BY
Varsha Chaurasia (210613106279)

Vanshaj Arora (210613106278)
Under the guidance of
Mr. Raj Kishor Chauhan

Designation
Department of BCA
Chaudhary Charan Singh University

MEERUT – 250005
CERTIFICATE
This is to certify that the project work entitled

“SCIENTIFIC CALCULATOR” is a bonafide work
carried out by Varsha Chaurasia (210613106279) and
Vanshaj Arora (210613106278) in partial fulfillment of
the requirements for the award of degree of
BACHELOR OF COMPUTER APPLICATION by CCS
UNIVERSITY, Meerut, under our guidance and
supervision.
The results embodied in this report have not been

submitted to any other university or institute for the
award of any degree or diploma.
Raj Kishor Chauhan

Department of BCA
Student’s Declaration
We hereby declare that the work being presented in this
report entitled “SCIENTIFIC CALCULATOR” is an
authentic record of our own work carried out under the
supervision of Mr. Raj Kishor Chauhan.
The matter embodied in this report has not been
submitted by us for the award of any other degree.
Dated: Signature of Students

Varsha Chaurasia (210613106279)
Vanshaj Arora (210613106278)
Department of BCA
This is to certify that the above statement made by the

candidate is correct to the best of my knowledge.
Signature of HOD Signature of Supervisor
Mr. Jitendra Kumar Mr. Raj Kishor Chauhan

(Department of BCA) (Assistant Professor)
Date:
ACKNOWLEDGEMENT
I would like to express my sincerest gratitude and
indebtedness to the person who gave me a moral and
technical support& whose kind assistance has been
instrumental in completion to this industrial training. It
gives me immense pleasure to own my humble
gratefulness to my faculty ‘Mr. Raj Kishor Chauhan’ for
this indispensable guidance and providing necessary
ideas and facilities to carry out this project.
I would like to place on record my best regards and

deepest sense of gratitude to ‘Mr. Jitendra Kumar’
(Department Head), ‘Mr. Raj Kishor Chauhan’ (Project
Guide), of IIMT College of Management for their careful
and precious guidance which were extremely valuable
for my study both theoretically and practically.
Signature of Student
Vanshaj Arora
Varsha Chaurasia
LIST OF FIGURES
ABSTRACT
A scientific calculator is a device that can perform
various mathematical operations and functions, such as
trigonometry, logarithms, exponentiation, and more. The
aim of this project is to design and implement a scientific
calculator using HTML, CSS and Javascript
programming. The calculator will have a graphical user
interface (GUI). The calculator will also have standard
and scientific modes, which can be switched by the user.
The calculator will be able to handle different types of
inputs, such as integers, decimals, fractions, and
complex numbers, and display the results in different
formats, such as binary, octal, hexadecimal, and ASCII.
The calculator will also have error handling and
validation features, such as checking for invalid inputs,
division by zero, overflow, and underflow. The project
will demonstrate the use of built-in modules, as well as
external libraries, for performing various mathematical
computations. The project will also showcase the use of
object-oriented programming principles, such as
classes, inheritance, polymorphism, and encapsulation,
for designing and organizing the code. The project will
be tested and evaluated using various test cases and
scenarios, and the performance and accuracy of the
calculator will be compared with other existing
calculators. The project will also discuss the challenges,
limitations, and future scope of the scientific calculator.
TABLE OF CONTENTS
Page No.
Certificate ............................................................................................ i
Declaration........................................................................................... ii
Acknowledgements.............................................................................. iii
List of Figures....................................................................................... iv
List of Tables......................................................................................... v
Abstract................................................................................................. vi
CHAPTER 1
INTRODUCTION
1.1 Objectives
1.2 Problem specification
1.3 Methodologies
CHAPTER 2
LITERATURE REVIEW
CHAPTER 3
PROBLEM DEFINITION
•Modules and Their Functionalities
•Hardware/ Software Requirement
CHAPTER 4
SYSTEM DESIGN
•Data Flow Diagrams
•UML Diagrams
•ER Diagrams
CHAPTER 5
IMPLEMENTATION
CHAPTER 6
CONCLUSIONS & FUTURE ENHANCEMENTS
6.1 Observations
6.2 Result Analysis
6.3 Limitations
6.4 Future works
REFERENCES
APPENDIX
SAMPLE CODE SEGMENT
CHAPTER-1
INTRODUCTION
1.1 Objectives of the Project:
A scientific calculator project is a software application

that can perform various mathematical operations and
functions, such as addition, subtraction, multiplication,
division, trigonometry, logarithms, exponentials, etc. The
objectives of such a project may vary depending on the
scope, design, and implementation of the calculator.
However, some common objectives are:
 To provide a fast, accurate, and user-friendly
tool for solving complex mathematical
problems.
 To demonstrate the knowledge and skills of
programming, data structures, algorithms, and
user interface design.
 To explore the applications and challenges of
scientific computing, such as precision, error
handling, and performance optimization.
 To learn and apply the concepts of object-
oriented programming, such as classes,
inheritance, polymorphism, and abstraction.
 To use appropriate software engineering
practices, such as documentation, testing,
debugging, and version control.
1.2 Problem Specification:

The project aims to develop a scientific calculator that
can perform various mathematical operations and
functions, such as arithmetic, trigonometry, logarithms,
exponentials, etc. The calculator should have a user-
friendly interface, a clear display, and a memory
function. The calculator should also be able to handle
complex numbers, fractions, and conversions of units.
The project will follow the software development life
cycle, which includes analysis, design, implementation,
testing, and evaluation. The project will use the Casio fx-
83ES model as a reference, but will also explore other
features and enhancements. The project will target
students and professionals who need a reliable and
versatile scientific calculator.
Following are some points:

 Non-functional requirements: This section
specifies the quality attributes and constraints
that the scientific calculator should meet, such
as performance, usability, reliability, security,
portability, etc. It also defines the standards
and methodologies that will be followed in the
project, such as programming languages, tools,
frameworks, testing techniques,
documentation, etc.
 User interface design: This section describes
the layout, appearance, and interaction of the
scientific calculator’s user interface, such as
buttons, menus, icons, colors, fonts, etc. It also
provides mockups or prototypes of the
interface, and explains the design principles
and guidelines that were applied.
 System architecture: This section presents
the high-level structure and components of the
scientific calculator system, such as modules,
classes, functions, data structures, etc. It also
shows the relationships and interactions among
the components, and the design patterns and
principles that were used.
1.3 Methodologies:
A scientific calculator is an electronic device that can
perform various mathematical operations and functions,
such as arithmetic, trigonometry, exponentials, etc. To
develop a scientific calculator, one needs to follow a
systematic methodology that covers the following
stages:
 Analysis: This stage involves defining the
problem, identifying the requirements, and
specifying the objectives and scope of the
project., and determining the target audience
and stakeholders of the project.
 Design: This stage involves designing the user

interface, the system architecture, and the
algorithms for the calculator. It also involves
choosing the programming languages, tools,
frameworks, and standards that will be used in
the project. The design should follow the
principles of usability, reliability, performance,
and security.
 Implementation: This stage involves coding,

testing, debugging, and documenting the
calculator. It also involves integrating the
different components and modules of the
system, and ensuring that they work correctly
and efficiently. The implementation should
follow the best practices of software
engineering, such as modularity, readability,
and reusability.
 Evaluation: This stage involves evaluating the

calculator against the requirements, objectives,
and expectations of the project. It also involves
collecting feedback from the users and
stakeholders, and measuring the quality and
effectiveness of the calculator. The evaluation
should follow the criteria of functionality,
accuracy, usability, and satisfaction.
CHAPTER-2
LITERATURE REVIEW
A scientific calculator is an electronic device that can
perform various mathematical operations and functions,
such as arithmetic, trigonometry, exponentials, etc. They
are widely used by students, teachers, engineers,
scientists, and other professionals who need to perform
complex calculations quickly and accurately. However,
developing a scientific calculator is not a trivial task, as it
involves many challenges and considerations in terms of
design, implementation, evaluation, and usability. This
literature review aims to provide an overview of the
existing research on scientific calculators, and identify
the gaps and opportunities for future work.
The literature on scientific calculators can be divided into
four main categories:
Design, implementation, evaluation, and usability.
Each category covers different aspects and issues
related to the development and use of scientific
calculators.
 Design: The design of a scientific calculator

involves deciding the features, functions, interface,
and appearance of the device. The design should
consider the needs and preferences of the target
users, the context and environment of use, and the
technical and economic constraints.
 Implementation: The implementation of a scientific
calculator involves programming the logic,
algorithms, and data structures that enable the
device to perform the desired operations and
functions. The implementation should ensure the
correctness, efficiency, and reliability of the
calculations, as well as the compatibility and
interoperability of the device with other systems and
platforms. Some of the implementation challenges
that have been addressed in the literature are: the
representation and manipulation of numbers,
especially floating-point numbers, fractions, and
complex numbers, the handling of errors and
exceptions, the optimization of speed and memory
usage, the testing and debugging of the code, and
the choice and use of programming languages,
tools, frameworks, and standards.
 Evaluation: The evaluation of a scientific calculator

involves assessing the quality and effectiveness of
the device in terms of its functionality, accuracy,
performance, and user satisfaction. The evaluation
should use appropriate methods, techniques, and
criteria to measure and compare the outcomes and
impacts of the device. Some of the evaluation
methods that have been applied in the literature
are: mathematical analysis, simulation,
experimentation, benchmarking, user testing,
survey, interview, observation, and feedback.
 Usability: The usability of a scientific calculator
refers to the ease of use and learnability of the
device for the intended users and tasks. The
usability should enhance the user experience,
productivity, and satisfaction, as well as reduce the
user errors, frustration, and fatigue. Some of the
usability factors that have been investigated in the
literature are: the intuitiveness and consistency of
the interface, the readability and clarity of the
display, the responsiveness and feedback of the
device, the learnability and memorability of the
functions, the accessibility and adaptability of the
device, and the user preferences and expectations.
The literature review reveals that scientific calculators

have been extensively researched and developed over
the years, and have achieved remarkable improvements
and innovations in terms of design, implementation,
evaluation, and usability. However, there are still some
gaps and limitations in the existing literature, such as:
the lack of comprehensive and comparative studies on
different models and types of scientific calculators, the
lack of user-centered and participatory approaches in
the design and evaluation of scientific calculators, the
lack of consideration of the social and ethical
implications of scientific calculators, and the lack of
exploration of the potential applications and benefits of
scientific calculators in various domains and contexts.
Therefore, this project aims to address these gaps and
limitations by developing a scientific calculator that is
user-friendly, reliable, and versatile, and by evaluating
its usability and effectiveness in different scenarios and
settings.
CHAPTER-3
PROBLEM DEFINITION
A scientific calculator is a device that can perform
various mathematical operations and functions, such as
addition, subtraction, multiplication, division,
exponentiation, logarithms, trigonometry, and more. A
scientific calculator can help students and professionals
to solve problems that require quick and accurate
calculations. A scientific calculator can also display
numbers in different formats, such as scientific notation,
fractions, decimals, and binary.
A problem definition of a scientific calculator is a
statement that describes the purpose, scope, and
requirements of the device. A problem definition can
help to identify the goals, inputs, outputs, and functions
of the calculator. A problem definition can also specify
the design constraints, such as the size, shape, cost,
and power consumption of the calculator. A problem
definition can be written as follows:
Problem Definition of a Scientific Calculator

The scientific calculator is a handheld electronic device
that can perform various mathematical operations and
functions on numbers. The scientific calculator is
intended to be used by students and professionals who
need to solve problems that involve arithmetic, algebra,
geometry, trigonometry, calculus, statistics, and other
branches of mathematics. The scientific calculator can
also be used for scientific and engineering applications
that require precise and complex calculations.
The scientific calculator has the following features and
specifications:
 The scientific calculator has a two-line LCD display
that can show up to 12 digits and a floating-point
exponent. The display can also show symbols,
fractions, and equations.
 The scientific calculator has a keyboard that
consists of numeric keys, function keys, and cursor
keys. The numeric keys can enter numbers in
decimal, fraction, or scientific notation. The function
keys can access various mathematical operations
and functions, such as addition, subtraction,
multiplication, division, square root, power,
logarithm, trigonometry, and more. The cursor keys
can move the cursor on the display and edit the
input or output.
 The scientific calculator can store up to 10 numbers
in memory and recall them using the memory keys.
The scientific calculator can also store up to 20
equations or expressions and solve them using the
equation solver function.
 The scientific calculator can perform calculations in
different modes, such as degree, radian, or gradian
for angle measurements, or normal, fixed, or
scientific for number formats. The scientific
calculator can also switch between different number
systems, such as decimal, binary, octal, or
hexadecimal, and perform bitwise logical
operations.
 The scientific calculator can perform conversions
between different units of measurement, such as
length, mass, temperature, and more. The scientific
calculator can also access a list of physical
constants, such as the speed of light, the
gravitational constant, and more.
 The scientific calculator is powered by two AAA
batteries that can last for up to 500 hours of
continuous use. The scientific calculator has an
auto power-off function that turns off the device
after 10 minutes of inactivity. The scientific
calculator also has a solar panel that can
supplement the battery power in bright light
conditions.
 The scientific calculator has a plastic casing that is
durable and lightweight. The scientific calculator
has a dimension of 15 cm x 8 cm x 2 cm and a
weight of 120 g. The scientific calculator has a black
color and a sleek design.
CHAPTER-4
SYSTEM DESIGN
System design is the solution for the creation of a
new system. This phase focuses on the detailed
implementation of the feasible system. It emphasis
on translating design. Specifications to performance
specification. System design has two phases of
development:
 Logical design
 Physical design
4.1 Data Flow Diagrams:

A data flow diagram (DFD) is a graphical representation
of the flow of data within a system. It shows how data is
input and output from the system, as well as where it is
stored and how it is processed. A DFD can help you
visualize the data flow of any project, such as a
calculator project.
To create a DFD for a calculator project, you need to
identify the main components of the system, such as:
 The external entities that interact with the system,
such as the user and the display.
 The processes that perform calculations, such as
addition, subtraction, multiplication, division, etc.
 The data stores that store the input and output
values, such as the memory and the register.
 The data flows that show the movement of data
between the components, such as the operands,
the operators, the results, etc.
You can use symbols to represent these components,
such as circles for processes, rectangles for external
entities, parallel lines for data stores, and arrows for
data flows. You can also label each component with a
descriptive name.
4.2 UML Diagram:

4.3 ER Diagram:
CHAPTER-5
IMPLEMENTATION
Implementing a scientific calculator project involves

creating a program that can perform various scientific
calculations beyond basic arithmetic operations. Here's
a step-by-step outline for implementing a basic version
of a scientific calculator using JS:
1. Choose Development Environment and

Language:
 JS: Use JS as the programming language.
 IDE: Select an IDE or text editor like VSCode, or
Jupyter Notebook.
2. Design the User Interface:

 Use JS library for creating a graphical user interface
(GUI).
 Design the layout with buttons representing different
functions (trigonometric, logarithmic, exponential,
etc.).
 Include a display area to show the entered
expressions and results.
3. Handle User Inputs and Display:
 Set up event handlers for button clicks to capture
user input.
 Display the entered values and expressions in the
display area.
4. Implement Calculation Logic:

 Define functions to handle various scientific
operations.
 Implement functions for trigonometric calculations
(sin, cos, tan), logarithmic functions, exponentials,
square root, etc.
 Utilize JS module for mathematical calculations.
5. Evaluate Expressions:
Use JS's function or libraries like for evaluating
mathematical expressions entered by the user.
6. Error Handling:
Implement error handling for invalid inputs or
operations that may throw exceptions (like division
by zero).
7. Testing and Debugging:
 Test the calculator with various inputs to ensure
accurate calculations.
 Debug and fix any issues or errors encountered
during testing.
8. Finalize and Optimize:
 Optimize the code for performance and readability.
 Enhance the user interface and add features for
better usability.
IMPLEMENTATION DIAGRAM FOR
SCIENTIFIC CALCULATOR
CHAPTER 6
CONCLUSIONS & FUTURE
ENHANCEMENTS
CONCLUSION OF THE PROJECT:

 The calculator was written by Rolf Howarth in early
1996.
 A fully featured scientific calculator with proper
operator precedence is implemented, including trig
functions and logarithms, factorials, 12 levels of
parentheses, logs to base 2 bitwise logical
operators, hex, octal, binary and ASCII display.
 The calculator is written in JavaScript and you are
welcome to view the JavaScript source (visible
within the HTML page) for personal educational
purposes as long as you recognize that it is
copyrighted and not in the public domain.
 The basic functions of the calculator include
addition, subtraction, multiplication, division, sign,
square, square root, raise to the power, natural
exponential, logarithm, and natural logarithm.
 The calculator also has trigonometric functions such
as sin, cos, and tan.
 The calculator has a memory function that allows
you to store and recall values.
 The calculator has a history function that allows you
to view your previous calculations.
 The calculator is available online and can be used
for free.
FUTURE ENHANCEMENTS OF THE
PROJECT
Future enhancements for scientific calculators are:

 Adding more functions and features, such as
complex numbers, matrices, vectors, statistics,
calculus, graphing, and programming.
 Improving the display and interface, such as

using color, touch screen, high resolution, voice
input and output, and gesture recognition.
 Increasing the speed and accuracy of

calculations, such as using faster processors,
more memory, and better algorithms.
 Integrating with other devices and platforms,

such as smartphones, tablets, computers,
cloud services, and online learning systems.
 Enhancing the user experience and education,

such as providing feedback, hints,
explanations, examples, and interactive games.
REFERENCES
 (PDF) PROJECT REPORT Scientific Calculator SUBMITTED

BY : GUIDED BY : NAME -D. Murali krishna ATMAJA
MADAM BATCH -ITAP 203 CRANES VARSITY CRANES
VARSITY BENGALURU BENGALURU | Murali Dommeti -
Academia.edu
 Computer calculation model of the calculation process. |

Download Scientific Diagram (researchgate.net)
 https://www.slideshare.net/
 Creating a Calculator using HTML, CSS & JavaScript -

YouTube
 JavaScript Tutorial (w3schools.com)
 How to make a Calculator using HTML CSS JavaScript -

YouTube
INDEX FILE OF THE PROJECT
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scientific Calculator</title>

<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">

<link rel="stylesheet" href="style/style.css">

<script src="script/script.js" defer></script>
<script src="script/app.js" defer></script>

<title>Scientific Calculator</title>
<meta name="title" content="Scientific Calculator">
<meta name="description" content="A standard calculator made by SR TAMIM">

<meta property="og:type" content="website">
<meta property="og:url" content="https://sr-tamim.github.io/scientific-calculator/">
<meta property="og:title" content="Scientific Calculator">
<meta property="og:description" content="A standard calculator made by SR TAMIM">
<meta property="og:image" content="https://sr-tamim.github.io/scientific-calculator/img/meta-

image.png">

<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://sr-tamim.github.io/scientific-calculator/">
<meta property="twitter:title" content="Scientific Calculator">
<meta property="twitter:description" content="A standard calculator made by SR TAMIM">

<meta property="twitter:image" content="https://sr-tamim.github.io/scientific-calculator/img/meta-
image.png">

<meta name="google-site-verification" content="E-R_i4w34dxXKDERq4XFzwb8r6cvwYP2sdQRySV2QuI" />
</head>
<body>
<div class="container">
<div class="topBar">

<a href="https://sr-tamim.vercel.app" class="signature" target="_blank">Calculator made by Varsha</a>
<a href="https://twitter.com/SR__Tamim" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-

2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-
2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581
4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29
2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-
2.549z" />
</svg>
</a>
</div>
<div class="calculator">
<div class="input-area">
<div id="topDisplay-container">
<div id="topDisplay"></div>
</div>
<input type="text" id="display" readonly value="0">
<div id="exponential-container">
×10<sup id="exponential"></sup>
</div>
</div>
<div class="button-container">
<div class="trigonometry">
<span id="trigonometric-mode"></span>
<span id="trigono-toggle">
<span>Trigonometry ↓</span>
<span id="trigonometric-container">
<span class="operationButton trigono-operator" data-button-symbol="trigo(Math.sin,">sin(
</span>
<span class="operationButton trigono-operator" data-button-symbol="trigo(Math.cos,">cos(
</span>
<span class="operationButton trigono-operator" data-button-symbol="trigo(Math.tan,">tan(
</span>
<span class="operationButton trigono-operator"

data-button-symbol="1/trigo(Math.sin,">cosec(
</span>
<span class="operationButton trigono-operator" data-button-symbol="1/trigo(Math.cos,">sec(
</span>
<span class="operationButton trigono-operator" data-button-symbol="1/trigo(Math.tan,">cot(
</span>
<span class="operationButton trigono-operator" data-button-symbol="trigo(Math.asin,">
sin<sup>-1</sup>(</span>
<span class="operationButton trigono-operator" data-button-symbol="trigo(Math.acos,">
cos<sup>-1</sup>(</span>
<span class="operationButton trigono-operator" data-button-symbol="trigo(Math.atan,">
tan<sup>-1</sup>(</span>
</span>
</span>
</div>
<div class="button-area">
<span class="button" id="visibility-toggler">⇄</span>

<span class="button-pair">
<span class="button bracketButton paired-button">(</span>
<span class="button bracketButton paired-button">)</span>
</span>
<span class="button" id="del">DEL</span>
<span class="button" id="ac">AC</span>
<span class="button operationButton" data-button-symbol="Math.PI">π</span>
<span id="sqrtBut" class="button toggle-visibility visible" data-button-symbol="√(">√</span>
<span id="cubeRootButton" class="button toggle-visibility" data-button-symbol="³√(">³√</span>
<span id="logButton" class="button operationButton" data-button-symbol="Math.log10(">log
(</span>
<span id="lnButton" class="button operationButton" data-button-symbol="Math.log(">ln (</span>
<span class="button" id="powerButton" data-button-symbol="^(">x<sup>□</sup></span>
<span class="button" id="squareBut">x<sup>2</sup></span>
<span class="button" id="power-1">x<sup>-1</sup></span>
<span class="button operationButton" data-button-symbol="/">÷</span>
<span class="button numberButton input-button">7</span>
<span class="button operationButton" data-button-symbol="*">×</span>
<span class="button operationButton" data-button-symbol="-">−</span>
<span class="button operationButton" data-button-symbol="+">+</span>
<span id="dot" class="button numberButton">.</span>
<span class="button" id="ansButton">ANS</span>
<span class="button" id="equalBut">=</span>
</div>
</div>
</div>
</div>
</body>
</html>
CSS FILE OF THE PROJECT

:root {
--body-background: rgb(22, 22, 22);
--button-color: #2a2a2a;
--button-hover: #3d3d3d;
--max-width: 35rem;
font-size: 16px;
/* ------------- fonts ---------------- */
@font-face {
font-family: 'Charm';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/charm.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-

206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
@font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/pt-sans.woff2) format('woff2');

@font-face {
font-family: 'Tangerine';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/tangerine.woff2) format('woff2');

/* ----------- css styles ------------ */
*{
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
font-family: 'PT Sans', serif;
body {
background: var(--body-background);
margin: 0;
position: absolute;
width: 100%;
height: 100%;
min-width: 300px;
max-width: 100vw;
max-height: 100vh;
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.topBar {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: var(--max-width);
margin: auto;
padding: 5px 2.5vw;
.topBar svg {
width: 2.5vh;
height: 2.5vh;
fill: rgb(140, 140, 140);
transition: fill 500ms;
.topBar svg:hover {
fill: rgb(180, 180, 180);
.signature {
font-family: 'Tangerine', sans-serif;
font-size: 2.3vh;
font-weight: bold;
text-align: center;
text-decoration: none;
color: rgb(140, 140, 140);
letter-spacing: 2px;
margin: 0;
.signature:hover {
text-decoration: underline;
.calculator {
flex-grow: 1;
width: 100%;
max-width: var(--max-width);
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 0 2.5vw;
margin: 0 auto;
.input-area {
color: white;
position: relative;
background: transparent;
padding: 0.5rem 0.5rem 1rem;
width: 100%;
#topDisplay-container {
position: relative;
width: 100%;
height: 4.8vh;
margin: 1vh 0;
overflow-x: auto;
direction: rtl;
/* Hide scrollbar for Chrome, Safari and Opera */
#topDisplay-container::-webkit-scrollbar {
display: none;
/* Hide scrollbar for IE, Edge and Firefox */
#topDisplay-container {
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
#topDisplay {
position: absolute;
right: 0;
color: #dddddd;
font-size: 3.5vh;
height: 100%;
margin: 0;
direction: initial;
cursor: grab;
#display {
color: rgb(255, 255, 255);
width: 100%;
text-align: right;
font-size: 6vh;
border: 0;
outline: 0;
#exponential-container {
position: absolute;
right: 10px;
margin-top: 5px;
color: rgb(73, 73, 73);
font-size: 1.1rem;
#exponential-container.active {
color: whitesmoke
.button-container {
width: 100%;
.trigonometry {
color: white;
font-size: 2.5vh;
cursor: pointer;
user-select: none;
margin: 0.6rem 0.2rem;
}
#trigonometric-mode {
text-transform: capitalize;
margin-right: 0.8rem;
#trigono-toggle {
position: relative;
display: inline-block;
margin-top: 10px;
#trigonometric-container {
background: var(--button-color);
position: absolute;
top: 150%;
width: max-content;
display: grid;
grid-template-columns: repeat(3, 1fr);
box-shadow: 0 0 10px rgb(73, 73, 73);
z-index: 10;
transform: rotateX(90deg);
transform-origin: top;
transition: transform 300ms;
#trigonometric-container.visible {
display: grid;
transform: rotateX(0);
.trigono-operator {
text-align: center;
padding: 15px;
.trigono-operator:hover {
background: var(--button-hover);
}
.button-area {
width: 100%;
display: grid;
grid-gap: 5px;
border-bottom-left-radius: 10px;
.button {
color: white;
text-align: center;
font-size: 2.7vh;
justify-content: center;
cursor: pointer;
border-radius: 5px;
user-select: none;
padding: 2vh 0 1.8vh;
/* transition: background 80ms, transform 20ms; */
.button.click-animation {
animation: clickAni 150ms linear forwards;
@keyframes clickAni {
30% {
transform: scale(0.9);
background: var(--button-hover);
80% {
transform: scale(1.05);
}
.toggle-visibility {
display: none;
.toggle-visibility.visible {
display: inline-flex;
.button-pair {
display: grid;
grid-gap: 5px;
background: var(--body-background) !important;
padding: 0 !important;
.paired-button {
padding: 2vh 0 1.8vh;
#powerButton,
#squareBut,
#power-1 {
font-family: 'Charm', serif;
sup {
font-size: 0.7rem;
position: relative;
top: -5px;
z-index: 1;
sub {
position: relative;
top: 5px;
z-index: 1;
@media screen and (min-width: 768px) {
:root {
font-size: 18px;
:root {
font-size: 22px;
:root {
font-size: 25px;
JAVASCRIPT FILE OF THE PROJECT
const screen = document.getElementById('display');
const topScreen = document.getElementById('topDisplay');
const numBut = document.querySelectorAll('.numberButton');
const operationBut = document.querySelectorAll('.operationButton');
const bracketBut = document.querySelectorAll('.bracketButton');
const powerBut = document.getElementById('powerButton');
const squareBut = document.querySelector('#squareBut');
const powerMinus1Button = document.getElementById('power-1')
const sqrtBut = document.querySelector('#sqrtBut');
const cubeRootBut = document.getElementById('cubeRootButton');
const percentBut = document.querySelector('#percentBut');
const equalBut = document.querySelector('#equalBut');
const acBut = document.querySelector('#ac');

const delBut = document.querySelector('#del');
const dotBut = document.getElementById('dot');
const trigonometricMode = document.getElementById('trigonometric-mode');
const trigonoToggle = document.getElementById('trigono-toggle');
const exponentialNum = document.getElementById('exponential');
const answerButton = document.getElementById('ansButton');
document.getElementById('visibility-toggler').addEventListener('click', function () {
document.querySelectorAll('.toggle-visibility').forEach(element => {
element.classList.toggle('visible');
})
})
window.addEventListener('load', acFunc);
let calculation = [], showOnScreen = [];
const operators = ['+', '-', '*', '/'];
let trigonoMode = 'deg';
trigonometricMode.innerText = trigonoMode;
function calculate(equationArray) {
return eval(equationArray.join(''))
function updateScreen() {
topScreen.innerText = showOnScreen.join('');
acBut.addEventListener('click', acFunc);
function acFunc() {
calculation = [];
showOnScreen = [];
screen.value = 0;
updateScreen();
clearExponential();
delBut.addEventListener('click', () => {
calculation.pop();
showOnScreen.pop();
updateScreen();
})
trigonometricMode.addEventListener('click', trigonometricModeFunction);
function trigonometricModeFunction() {
if (trigonoMode == 'rad') { trigonoMode = 'deg' }
else { trigonoMode = 'rad' }
trigonometricMode.innerText = trigonoMode;
trigonoToggle.addEventListener('click', () => {
document.getElementById('trigonometric-container').classList.toggle('visible');
})
function trigo(operator, angle) {
// convert degree angle to radian angle (not for inverse trigonometry)
if (trigonoMode == 'deg' && operator.name[0] !== 'a') {
angle = angle * Math.PI / 180;
let result;
if (operator.name == 'sin' && angle == (Math.PI)) {
result = 0;
return result;
else if (operator.name == 'cos' && (angle == (Math.PI / 2) || angle == (3 * Math.PI / 2))) {
result = 0;
return result;
else if (operator.name == 'tan' && angle == (Math.PI / 2)) {
result = 'Invalid Input';
return result;
result = operator(angle);
// convert result for degree angle (only for inverse trigonometry)

if (trigonoMode == 'deg' && operator.name[0] === 'a') {
result = result * 180 / Math.PI
return result;
numBut.forEach(element => {
element.addEventListener('click', numButFunction);
})
function numButFunction(event) {
calculation.push(event.target.innerText);
showOnScreen.push(event.target.innerText);
updateScreen();
operationBut.forEach(element => {
element.addEventListener('click', operationButFunction);
})
function operationButFunction(event) {
calculation.push(event.target.dataset.buttonSymbol);
updateScreen();
element.removeEventListener('click', removeAns);
})
bracketBut.forEach(element => {
element.addEventListener('click', bracketFunc);
});
function bracketFunc(event) {
let bracketCount = 0;
for (let value of calculation.join('')) {
if (value == '(') { bracketCount++ }
if (value == ')') { bracketCount-- }
if (isNaN(parseFloat(showOnScreen[showOnScreen.length - 1])) == false &&

event.target.innerText == '(') {
calculation.push('*');
} else if (event.target.innerText == ')') {
if (bracketCount == 0) { return }
calculation.push(event.target.innerText);
updateScreen();
})
function autoCloseBracket() {
let startParenthesis = 0;
let endParenthesis = 0;
for (element of calculation) {
element = element.toString();
if (element.indexOf('(') != -1) { startParenthesis++ }
else if (element.indexOf(')') != -1) { endParenthesis++ }
for (let i = endParenthesis; i < startParenthesis; i++) {
calculation.push(')');
powerBut.addEventListener('click', event => {
calculation.push('power(');
showOnScreen.push(event.target.dataset.buttonSymbol);
updateScreen();
});
function powerFunction() {
if (calculation.includes('power(')) {
let powerStart, powerEnd; // keep the index of the number from where to start power function
let powerOf = []; // keep the number which have to powered
let power = ['(']; // keep the number of power

// if there are any end bracket before power
if (calculation[calculation.indexOf('power(') - 1] == ')') {
for (let i = calculation.indexOf('power(') - 1; i >= 0; i--) {
powerStart = i; // starting index
if (calculation[i] === '(') { bracketCount++ }
if (calculation[i] === ')') { bracketCount-- }
powerOf.unshift(calculation[i]);
if (bracketCount === 0) { break } // if start brackets are equal to end brackets then break this loop
} // if there are no end brackets before power
else {
for (let i = calculation.indexOf('power(') - 1; i >= 0; i--) {
if (operators.includes(calculation[i])) { break }
powerStart = i; // starting index
powerOf.unshift(calculation[i]);
// get the index of last number where power function ends
for (let i = calculation.indexOf('power(') + 1; i < calculation.length; i++) {
if (calculation[i] == '(') { bracketCount++ }
if (calculation[i] == ')') { bracketCount-- }
power.push(calculation[i]);
powerEnd = i; // ending index
if (bracketCount == 0) { break } // if start brackets are equal to end brackets break this loop
// calculate power
let powered = Math.pow(calculate(powerOf), calculate(power));
// replace power and power numbers with powered
calculation.splice(powerStart, powerEnd - powerStart + 1, powered);
powerFunction(); // check if there is any other power in calculation array

}
squareBut.addEventListener('click', event => {
calculation.push('power(', '2', ')');
showOnScreen.push('^(', '2', ')');
updateScreen();
});
powerMinus1Button.addEventListener('click', event => {
calculation.push('power(', '-1', ')');
showOnScreen.push('^(', '-1', ')');
updateScreen();
})
// mathematical root functions
sqrtBut.addEventListener('click', event => {
rootFunc(event, 'Math.sqrt(');
});
cubeRootBut.addEventListener('click', event => {
rootFunc(event, 'Math.cbrt(');
})
function rootFunc(event, root) {
!operators.includes(calculation.slice(-1)) ?
calculation.push(`*${root}`)
: calculation.push(root);
showOnScreen.push(event.target.dataset.buttonSymbol);
updateScreen();
})
equalBut.addEventListener('click', equalFunc);
function equalFunc() {
clearExponential();
autoCloseBracket();
powerFunction();
let answer;
try {
answer = calculate(calculation).toString();
// javascript floating calculation issue fix
if (!answer.includes('e') &&
answer.includes('.') &&
answer.slice(0, -1).split('.')[1].endsWith('000000')) {
answer = parseFloat(answer.slice(0, -1)).toString()
} catch (error) {
if (error instanceof SyntaxError) {
screen.value = 'Syntax Error!';
return;
calculation = [answer];
showOnScreen = [answer];
localStorage.setItem('ans', answer);
if (answer.indexOf('e') != -1) {
const newAnswer = answer.split('e');
exponentialNum.innerText = newAnswer[1];
exponentialNum.parentElement.classList.add('active');
answer = newAnswer[0];
screen.value = answer;
// clear answer when number button clicked
element.addEventListener('click', removeAns);
})
function removeAns(event) {
calculation = [];
showOnScreen = [];
updateScreen();
console.log('remove ans')
})
numButFunction(event);
function clearExponential() {
exponentialNum.innerText = '';
exponentialNum.parentElement.classList.remove('active');
answerButton.addEventListener('click', () => {
let answer = localStorage.getItem('ans');
calculation.push(answer);
showOnScreen.push('ANS');
updateScreen();
})
// add keyboard functionality for computers
document.addEventListener('keydown', e => {
let targetElement = e.key === 'Enter' ? equalBut :
e.key === 'Backspace' ? acBut :
e.key === 'Delete' ? delBut :
!isNaN(e.key) ? [...numBut].find(element => element.innerText === e.key)
: [...operationBut].find(element => element.dataset.buttonSymbol === e.key);
targetElement && e.preventDefault();
targetElement && targetElement.click()
})
// button click animation
document.querySelectorAll('.button').forEach(button => {
button.addEventListener('click', () => {
button.classList.add('click-animation')
button.addEventListener('animationend', () => button.classList.remove('click-animation'), { once: true })
// button.style.backgroundColor = "#3d3d3d"
// button.style.transform = "scale(0.9)"
// setTimeout(() => {
// button.style.transform = "scale(1.05)"
// }, 90)
// setTimeout(() => {
// button.style.backgroundColor = "#2a2a2a"
// button.style.transform = "scale(1)"
// }, 150)
})
})
OUTPUT SCREENSHOT OF THE PROJECT:

Minorproject SRS

Uploaded by

Copyright:

Available Formats

You might also like

Minorproject SRS

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Minorproject SRS

Uploaded by

Copyright:

Available Formats

A Project Report on

BACHELOR OF COMPUTER APPLICATION

Varsha Chaurasia (210613106279)

Under the guidance of

Mr. Raj Kishor Chauhan

Chaudhary Charan Singh University

This is to certify that the project work entitled

The results embodied in this report have not been

Raj Kishor Chauhan

Dated: Signature of Students

This is to certify that the above statement made by the

Signature of HOD Signature of Supervisor

Mr. Jitendra Kumar Mr. Raj Kishor Chauhan

I would like to place on record my best regards and

A scientific calculator project is a software application

1.2 Problem Specification:

Following are some points:

 Design: This stage involves designing the user

 Implementation: This stage involves coding,

 Evaluation: This stage involves evaluating the

 Design: The design of a scientific calculator

 Evaluation: The evaluation of a scientific calculator

The literature review reveals that scientific calculators

Problem Definition of a Scientific Calculator

4.1 Data Flow Diagrams:

4.2 UML Diagram:

Implementing a scientific calculator project involves

1. Choose Development Environment and

2. Design the User Interface:

4. Implement Calculation Logic:

CONCLUSION OF THE PROJECT:

Future enhancements for scientific calculators are:

 Improving the display and interface, such as

 Increasing the speed and accuracy of

 Integrating with other devices and platforms,

 Enhancing the user experience and education,

 (PDF) PROJECT REPORT Scientific Calculator SUBMITTED

 Computer calculation model of the calculation process. |

 Creating a Calculator using HTML, CSS & JavaScript -

 JavaScript Tutorial (w3schools.com)

 How to make a Calculator using HTML CSS JavaScript -

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">

<link rel="stylesheet" href="style/style.css">

<script src="script/script.js" defer></script>

<script src="script/app.js" defer></script>

<meta name="title" content="Scientific Calculator">

<meta name="description" content="A standard calculator made by SR TAMIM">

<meta property="og:type" content="website">

<meta property="og:url" content="https://sr-tamim.github.io/scientific-calculator/">

<meta property="og:title" content="Scientific Calculator">