VISVESVARAYA TECHNOLOGICAL UNIVERSITY

“JnanaSangama”, Belagavi-590014, Karnataka, India

ASSIGNMENT REPORT ON
“Simple Calculator”

Submitted in partial fulfilment of the requirements of

WEB TECHNOLOGY AND ITS APPLICATIONS
for the Sixth Semester Bachelor of Engineering Degree

SUBMITTED BY
JIGYAS SUBEDI (1IC19CS011)

Under the guidance of

Ms. Rohini C.
Assistant Professor
Department of CS&E

IMPACT COLLEGE OF ENGINEERING AND APPLIED SCIENCE

SAHAKAR NAGAR, BANGALORE-560092

2021-2022
 IMPACT COLLEGE OF ENGINEERING AND APPLIED SCIENCES
SAHAKARNAGAR, BANGALORE -560092

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

CERTIFICATE
This is to certify that the assignment entitled "Simple Calculator" carried out by Mr.
Jigyas Subedi [1IC19CS011] bonafide student of Impact College of Engineering and
Applied Sciences has been submitted in partial fulfillment of requirements in Web
Technology and its applications of VI semester Bachelor of Engineering degree in
Computer Science & Engineering as prescribed by VISVESVARAYA
TECHNOLOGICAL UNIVERSITY during the academic year of 2021-2022.

Signature of the Guide Signature of HOD

Ms. Rohini C. Dr. Dhananjaya V
Assistant Professor Professor & HOD
Dept. of CS&E Dept. of CS&E

Name of Examiner Signature with date

1. 1.

2. 2.
 ACKNOWLEDGEMENT

The successful completion of this assignment was made possible with the help and guidance
received by me from the various quarters. I would like to avail this opportunity to express my
sincere gratitude to all of them.

I thank the management Dr. K.P Mathula, Founder and Director and Dr. A.N Khaleel
Ahmed, Principal for providing me with necessary infrastructure and good environment to
nourish my knowledge.

I would like to sincerely thank Dr. Dhananjaya V, Head of Department of Computer Science
and Engineering for his support and guidance.

I am grateful to my guide Ms. Rohini C. for her keen interest and encouragement in my project,
her guidance and cooperation helped me in nurturing the assessment in reality.

I am also in debt to my parents and friends for their continued moral and material support
throughout the course of the project and in helping me finalize the assignment.

My heartfelt thanks to all the people who have contributed to accomplish this assignment.

JIGYAS SUBEDI (1IC19CS011)

(i)
 ABSTRACT
Aim of proper is to develop a Simple Calculator for the calculation of numbers; moreover, it
is also helpful to get calculation results instantly. Within this simple calculator, users can
perform addition, subtraction, multiplication, and division operation. Firstly, the navigation
bar of the calculator displays the entered number, operators, and results. On the last column of
the calculator, it contains ‘+’ which performs “addition”, ‘-’ performs “subtraction”, ‘*’
performs “multiplication”, ‘/’ performs “division”. At the bottom, it contains ‘=’ which gives
the results of all these operations.

(ii)
 CONTENTS
ACKNOWLEDGEMENT (i)

ABSTRACT (ii)

CHAPTER NO. TITLE Pg No.

Chapter 1 INTRODUCTION

1.1 Introduction to Web 01

Development

Chapter 2 REQUIREMENTS ANALYSIS

2.1 Hardware/Software Analysis 03

Chapter 3 SOFTWARE REQUIREMENTS

SPECIFICATIONS

3.1 HTML 04

3.2 CSS 05

3.3 JavaScript 06

Chapter 4 ANALYSIS AND DESIGN 08

Chapter 5 IMPLEMENTATION

5.1 Introduction 09

5.2 Technical Information 09

5.3 Technical Feasibility 10

Chapter 6 SNAPSHOTS

6.1 Calculator 11

6.2 Addition 11

6.3 Subtraction 12

6.4 Multiplication 12

6.5 Division 13

CONCLUSION 14

REFERENCES 15

(iii)
 LIST OF FIGURES

FIG NO. FIGURE NAME Pg No.

1.1 Frontend Roadmap 01

1.2 Backend Roadmap 02

3.1 HTML Page Structure 04

4.1 Design Tools for a Webpage 08

6.1 Calculator 11

6.2 Addition 11

6.3 Subtraction 12

6.4 Multiplication 12

6.5 Division 13

(iv)
 LIST OF TABLES

TABLE NO. TITLE Pg No.

3.2 Most Commonly used CSS tag 05

(v)
Simple Calculator

CHAPTER 1

INTRODUCTION

1.1 INTRODUCTION TO WEB DEVELOPMENT

Web development is the work involved in developing a website for the Internet (World Wide
Web) or an intranet (a private network). Web development can range from developing a simple
single static page of plain text to complex web applications, electronic businesses, and social
network services. A more comprehensive list of tasks to which Web development commonly
refers may include Web engineering, Web design, Web content development client
liaison, client-side/server-side scripting, Web server, and network security configuration, and e-
commerce development.

Among Web professionals, "web development" usually refers to the main non-design aspects of
building Web sites: writing markup and coding. The word Web Development is made up of two
words, that is:

 Web: It refers to websites, web pages, or anything that works over the internet.
 Development: Building the application from scratch.
Web Development can be classified into two ways:
 Frontend Development
 Backend Development

Frontend Development: The part of a website that the user interacts with directly is termed as
frontend. It is also referred to as the ‘client side’ of the application.

Dept. of CS&E, ICEAS 2021-22 01

Simple Calculator

Fig 1.1: Frontend Roadmap

Dept. of CS&E, ICEAS 2021-22 01

Simple Calculator

 HTML: HTML stands for Hyper Text Markup Language. It is used to design the front-
end portion of web pages using a markup language. It acts as a skeleton for a website
since it is used to make the structure of a website.
 CSS: Cascading Style Sheets fondly referred to as CSS is a simple designed language
intended to simplify the process of making web pages presentable. It is used to style our
website.
 JavaScript: JavaScript is a scripting language used to provide a dynamic behavior to our
website.
Backend Development: The backend is the server-side of a website. It is the part of the website
that users cannot see and interact with. It is the portion of software that does not come in direct
contact with the users. It is used to store and arrange data.

Fig 1.2: Backend Roadmap

 PHP: PHP is a server-side scripting language designed specifically for web

development.
 Java: Java is one of the most popular and widely used programming languages. It is
highly scalable.
 Python: Python is a programming language that lets you work quickly and integrate
systems more efficiently.
 Node.js: Node.js is an open-source and cross-platform runtime environment for
executing JavaScript code outside a browser.

Dept. of CS&E, ICEAS 2021-22 02

Simple Calculator

Dept. of CS&E, ICEAS 2021-22 02

Simple Calculator

CHAPTER 2

REQUIREMENT ANALYSIS
2.1 Hardware/Software Requirements:

The Hardware requirements are

 Processor: Intel 3rd generation and above

 Hard Disks: 10 GB HDD

 RAM: 512 MB and above

The Software Specification are

 Operating System: Windows / Ubuntu

 HTML

 CSS

 JavaScript

Dept. of CS&E, ICEAS 2021-22 03

Simple Calculator

CHAPTER 3

SOFTWARE REQUIREMENTS SPECIFICATION

3.1 HTML

HTML stands for Hypertext Markup Language. It is used to design web pages using a markup
language. HTML is the combination of Hypertext and Markup language. Hypertext defines the
link between the web pages. A markup language is used to define the text document within the
tag which defines the structure of web pages. This language is used to annotate (make notes for
the computer) text so that a machine can understand it and manipulate text accordingly. Most
markup languages (e.g.HTML) are human-readable. The language uses tags to define what
manipulation has to be done on the text.

HTML is a markup language used by the browser to manipulate text, images, and other content,
in order to display it in the required format. HTML was created by Tim Berners-Lee in 1991.
The first-ever version of HTML was HTML 1.0, but the first standard version was HTML 2.0,
published in 1999.

Fig 3.1: HTML Page Structure

Dept. of CS&E, ICEAS 2021-22 04

Simple Calculator

3.2 CSS

Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to
simplify the process of making web pages presentable. CSS allows you to apply styles to web
pages. More importantly, CSS enables you to do this independent of the HTML that makes up
each web page. CSS is easy to learn and understand, but it provides powerful control over the
presentation of an HTML document.

The most commonly used CSS tags are

Table 3.2: Most Commonly Used Tags
TAGS DESCRIPTION
Background A shorthand property for
selecting all the background
properties in one declaration.
Color Sets the color of the text.

Opacity Sets the opacity level for an

element.
Border Sets the border properties in one
declaration.
Padding Sets the padding properties in
one declaration.
Font Sets the appearance of text.

Clear Specifies which sides of an

element are clear.

Dept. of CS&E, ICEAS 2021-22 05

Simple Calculator

3.3 JAVASCRIPT
JavaScript is a scripting language that is used to create and manage dynamic web pages,
basically anything that moves on your screen without requiring you to refresh your browser. It
can be anything from animated graphics to an automatically generated Facebook timeline.
JavaScript is a lightweight, cross-platform, interpreted scripting language. It is well-known for
the development of web pages; many non-browser environments also use it. JavaScript can be
used for Client-side developments as well as Server-side developments. JavaScript contains a
standard library of objects, like Array, Date, and Math, and a core set of language elements like
operators, control structures, and statements.
Client-side: It supplies objects to control a browser and its Document Object Model (DOM).
Like if client-side extensions allow an application to place elements on an HTML form and
respond to user events such as mouse clicks, form input, and page navigation. Useful libraries
for the client-side are AngularJS, ReactJS, Vue JS and so many others.
Server-side: It supplies objects relevant to running JavaScript on a server. Like if the server-side
extensions allow an application to communicate with a database, provide continuity of
information from one invocation to another of the application, or perform file manipulations on a
server. The useful framework which is the most famous these days is node.js. JavaScript can be
added to your HTML file in two ways:

 Internal JS: We can add JavaScript directly to our HTML file by writing the code inside the
<script> tag. The <script> tag can either be placed inside the <head> or the <body> tag
according to the requirement.

• External JS: We can write JavaScript code in another file having an extension .js and then
link this file inside the <head> tag of the HTML file in which we want to add this code.

What is JavaScript used for?

 Web pages with interactive elements: User interaction with web pages is enabled
through JavaScript. On a web page, JavaScript has essentially no bounds.
 Developing online and mobile applications: For web and mobile app development,
developers can employ a variety of JavaScript frameworks.
 Creating web servers and server applications: Aside from websites and apps,
developers may use JavaScript to create simple web servers and Node.js to construct
backend infrastructure.
 Game Development: Browser games can also be made using JavaScript. Beginning
developers can use these to hone their JavaScript skills.

Dept. of CS&E, ICEAS 2021-22 06

Simple Calculator

Why to learn JavaScript?

JavaScript is the most popular and hence the most loved language around the globe. Apart from
this, there are abundant reasons to learn it. Below is a listing of a few important points:
 No need of compilers: Since JavaScript is an interpreted language, therefore it does not
need any compiler for compilations.
 Used both the Client and Server-side: Earlier JavaScript was used to build client-side
applications only, but with the evolution of its frameworks namely Node.js and
Express.js, it is now widely used for building server-side applications too.
 Helps to build a complete solution: As we saw, JavaScript is widely used in both client
and server-side applications, therefore it helps us to build an end-to-end solution to a
given problem.
 Used everywhere: JavaScript is so loved because it can be used anywhere. It can be used
to develop websites, games or mobile apps, etc.
 Huge community support: JavaScript has a huge community of users and mentors who
love this language and take it’s legacy forward.

Dept. of CS&E, ICEAS 2021-22 07

Simple Calculator

CHAPTER 4

ANALYSIS AND DESIGN

Simple calculator helps the user calculate simple operations like addition, subtraction,
multiplication & division.

Fig 4.1: Design Tools for a Webpage

All the functionalities are achieved using vanilla JavaScript, HTML & CSS. To perform the
calculation, user have to input the data (numbers & operators) by clicking the button. All the
button click is recorded as trigger event and used to perform the calculation operations.

The main objective is to develop the website to help the user perform mathematical operations
used in daily life.

The website consists of the following web pages:

1. Index.html

Dept. of CS&E, ICEAS 2021-22 08

Simple Calculator

CHAPTER 5
IMPLEMENTATION
5.1 Introduction

This chapter discusses about the implementation of the system. It provides technical information
about the system. Systems implementation is the process of defining how the information
system should be built (i.e., physical system design), ensuring that the information system is
operational and used, and ensuring that the information system meets the quality standard (i.e.,
quality assurance). It reviews the directory structure of the directories and explains the
organization and design of the HTML files. This section also covers the activities, tools, audio,
and image components of the system.

The purpose of the implementation process is to design and create (or fabricate) a system
element conforming to that element’s design properties or requirements. The element is
constructed employing appropriate technologies and industry practices. This process bridges the
system definition processes and the integration process. It discusses the printed version of the
system.
5.2 Technical Information
System and Software Design

System and Software design is a mechanism to transform user requirements into some suitable
form, which helps the programmer in software coding and implementation. It deals with
representing the client's requirement, as described in SRS (Software Requirement Specification)
document, into a form, i.e., easily implementable using a programming language.

The software design phase is the first step in SDLC (Software Design Life Cycle), which moves
the concentration from the problem domain to the solution domain. In software design, we
consider the system to be a set of components or modules with clearly defined behaviors &
boundaries.

It is the process that decomposes a system into its component pieces for the purpose of
explaining how well those components interact to accomplish the set requirements.

The purpose of the System Design process is to provide sufficient detailed data and information
about the system and its system elements to enable the implementation consistent with
architectural entities as defined in models and views of the system architecture.

Dept. of CS&E, ICEAS 2021-22 09

Simple Calculator

One important issue in this project was design quality. Many factors contribute to the
quality of the design, including cohesion, coupling, understandability, and adaptability. Cohesion
is a measure of how closely the part of components relates to each other. It is the internal
relationship between that parts and components. It is desirable to have cohesion as it means that
a unit represents a single part of the problem solution.
5.3 Technical Feasibility

Technical feasibility is one of the first studies that must be conducted after the project has been
identified. In Technical Feasibility current resources both hardware software along with required
technology are analyzed/assessed to develop the project. This technical feasibility study gives
reports on whether there exists correct required resources and technologies which will be used
for project development. Along with this, the feasibility study also analyzes the technical skills
and capabilities of the technical team, existing technology can be used or not, maintenance and
up-gradation is easy or not for chosen technology, etc.

Determining the Requirements of the Project is also a part of Technical Feasibility. It involves
finding components that are required for the project.

Dept. of CS&E, ICEAS 2021-22 10

Simple Calculator

CHAPTER 6

SNAPSHOTS

6.1 Calculator

Fig 6.1: Calculator

This page shows the entire calculator where we can perform addition, subtraction, multiplication,
and division.

6.2 Addition

Fig 6.2: Addition

The ‘+’ performs an addition operation between any two numbers.

Dept. of CS&E, ICEAS 2021-22 11

Simple Calculator

Dept. of CS&E, ICEAS 2021-22 11

Simple Calculator

6.3 Subtraction

Fig 6.3: Subtraction

The ‘-’ performs subtraction between two numbers.

6.4 Multiplication

Fig 6.4: Multiplication

Dept. of CS&E, ICEAS 2021-22 12

Simple Calculator

The ‘*’ performs multiplication between two numbers.

Dept. of CS&E, ICEAS 2021-22 12

Simple Calculator

6.5 Division

Fig 6.5: Division

The ‘/’ performs division between two numbers.

Dept. of CS&E, ICEAS 2021-22 13

Simple Calculator

CONCLUSION

Simple Calculator was created by me to meet the requirement of the assessment by which I got
to explore HTML, CSS, and JavaScript. Simple Calculator was basically built for the calculation
of mathematical operations. I got to explore many more things and came up with practical use of
my knowledge. I had a good experience with the work and used ideas and knowledge to create
this assessment. My idea was to build a realistic calculator to meet the real-world requirement
and further I would like to work on many more assignment.

Dept. of CS&E, ICEAS 2021-22 14

Simple Calculator

REFERENCES
[1].www.w3schools.com
[2].www.geeksforgeeks.org
[3].https://www.tutorialspoint.com/javascript/index.htm
[4]. https://www.youtube.com/watch?v=yIdA6HvUi_Q&ab_channel=CodeWithHarry
[5].Vickler, A. (2021). Web Development: 3 Books in 1. Kindle e-books

Dept. of CS&E, ICEAS 2021-22 15