MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION, MUMBAI

Micro Project Report On

“Responsive Calculator”
Karjule Girish 23612260291
Raskar Pratik 2215600113
Bhosle Abhishek 23612260287
Laware Vaishnavi 23612260293

Under the Guidance Prof.

D.J.Trihuvan

DEPARTMENT OF COMPUTER ENGINEERING

Ashok Gramin Shikshan Santha’s
Ashok Institute of Engineering & Technology (Polytechnic),Ashoknagar
(2024-2025)
 Ashok Gramin Shikshan Santha’s
Ashok Institute of Engineering & Technology (Polytechnic), Ashoknagar

CERTIFICATE
Certified that the micro project entitled

“Responsive Calculator”
Karjule Girish 23612260291
Raskar Pratik 2215600113
Bhosle Abhishek 23612260287
Laware Vaishnavi 23612260293

As partial fulfillment of Diploma in Computer Engineering under the

Maharashtra State Board of Technical Education, Mumbai during academic
year 2024-2025.
The said work has been assessed by us and we are satisfied that the same
is up to the standard envisaged for the level of the course and that the said work
may be presented to the external examiner.

(Prof.D.J.Tribhuvan) (Prof. V.D.Ghogare)

Guide HOD

(Prof. A.P.Shinde)
(External Examiner) Principal

Inst. Code: 1560

 Acknowledgement

I fell great pleasure in expressing my deepest sense of gratitude and sincere

thanks to my guide by Prof. .D.J.Tribhuvan sir for valuable guidance.

I have no word to express my sincere thanks for valuable guidance, extreme

assistance and co-operation extend to all my Staff Member of my Depar tment.

This acknowledgement would be incomplete without expression my special

thanks to Prof V. D. Ghogare , Head of the Department (Computer Engineering)
for their support during the work.

I would also like to extend my heartfelt gratitude to my Principal, A. J .Shinde

who provide a lot of valuable support , mostly begin behind the veils of college
bureaucracy .

Last but not least I would like to thanks all the Teaching , Non Teaching staff
member of my department , my parent and my colleges those who help me
directly or indirectly for completing of this project is successfully.

Date :

/ / 2024
 INDEX

Sr .no Content Page.no

1 Introduction 1

2 Description 2

3 Text 3

4 Program code 4-7

5 Output 8-13

6 Conclusion 14

7 References 15
Chapter 1
Introduction:

 Building a Responsive Calculator in JavaScript is a good beginner project

for learning Web Development, and it is quite simple if you know basics
like HTML, CSS, and JavaScript (beginner level).
 A Calculator is a device used to perform various mathematical operations
such as addition, subtraction, multiplication, division and so on. We will
be building a simple Calculator in JavaScriptthat performs the four main
operations: addition, subtraction, multiplication and divis ion.
 In this project, we will be building a Simple Functional Calculatorin
JavaScript.
 We will also make calculators using textboxes and buttons in
JavaScript in this project.
 This calculator can perform basic mathematical operations likeaddition,
subtraction, multiplication, and division.

1
Chapter 2
Description:
Button:

There are various ways in HTML to create clickable buttons. You can also
create a clickable button using <input>tag by setting its type attribute to button.
The type attribute can take the following values –

 name- denotes the name of button

 value- is for writing some text on the button align- specifies

alignment of the button

 submit - This creates a button that automatically submits a form.

 reset- This creates a button that automatically resets form controls to their
initial values.

 button- This creates a button that is used to trigger a client- side scriptwhen the
user clicks that button.
 image- This creates a clickable button but we can use an image as
background of the button.

2
Chapter3

Text:

Text is typically required to place one line text. For example, if you want to
enter some name then it is always preferred to have text field on the form.

The text field can be set using

< input type=" text” size="30” name="username" value=" " >

The input type is text and the value of this this text field is " " that means the
blank text field is displayed initially and we can enter the text of our choice into
it.

Some other parameters or attributes can be

Maxlength: that allows us to enter the text of some maximum length.Name:

indicates name of the text field.

Align: denotes the alignment of the text in the text field. The alignmentcan be
left, right, bottom and top.

3
Chapter 4

Program code:

<!DOCTYPE html>

<html lang = "en">

<head>

<title> JavaScript Calculator </title>

<style>

h1 {

text-align: center;

padding: 23px;

background-color: Brown;

color: white;

#clear{

width: 270px;

border: 3px solid gray;

border-radius: 3px;

padding: 20px;

background-color: red;

4
{

width: 300px;

height: 530px;

margin: auto;

border: 3px solid black;

border-radius: 5px;

padding: 20px;

input

width: 20px;

background-color: grey;

color: white;

border: 3px solid gray;

border-radius: 5px;

padding: 26px;

margin: 5px;

font-size: 15px;

#calc{

width: 250px;

5
border: 5px solid black;

border-radius: 3px;

padding: 20px;

margin: auto;

</style>

</head>

<body>

<h1> Calculator Program in JavaScript </h1>

<div class= "formstyle">

<form name = "form1">

<!-- This input box shows the button pressed by the user in calculator. -->

<input id = "calc" type ="text" name = "answer"><br><br>

<input type = "button" value = "1" onclick = "form1.answer.value += '1' ">

<input type = "button" value = "2" onclick = "form1.answer.value += '2' ">

<input type = "button" value = "3" onclick = "form1.answer.value += '3' ">

<input type = "button" value = "+" onclick = "form1.answer.value += '+' ">

<br><br>

<input type = "button" value = "4" onclick = "form1.answer.value += '4' ">

<input type = "button" value = "5" onclick = "form1.answer.value += '5' ">

<input type = "button" value = "6" onclick = "form1.answer.value += '6' ">

6
<input type = "button" value = "-" onclick = "form1.answer.value += '-' ">

<br><br>

<input type = "button" value = "7" onclick = "form1.answer.value += '7' ">

<input type = "button" value = "8" onclick = "form1.answer.value += '8' ">

<input type = "button" value = "9" onclick = "form1.answer.value += '9' ">

<input type = "button" value = "*" onclick = "form1.answer.value += '*' ">

<br><br>

<input type = "button" value = "/" onclick = "form1.answer.value += '/' ">

<input type = "button" value = "0" onclick = "form1.answer.value += '0' ">

<input type = "button" value = "." onclick = "form1.answer.value += '.' ">

<input type = "button" value = "=" onclick = "form1.answer.value = eval(form1.answer.value)

">

<br>

<!-- Display the Cancel button and erase all data entered by the user. -->

<input type = "button" value = "Clear All" onclick = "form1.answer.value = ' ' " id= "clear" >

<br>

</form>

</div>

</body>

</html>

7
Chapter 5
Output:

 Calculator:

8
 Addition operation:

Figure 2: Calculator

 Clear operation:
When to click on ‘C’ Button, the textbox is clear.

9
 Figure 3: Calculator

 Subtraction operation:

Figure 4: Calculator

10
 Multiplication operation:

Figure 5: Calculator

11
 Figure 6: Calculator

 Decimal point operation:

Figure 7: Calculator

12
 Multiple operations at once:

Figure 8: Calculator

 Division by zero:

Figure 9: Calculator
13
Chapter6
Conclusion:

We have build a simple JavaScript calculator application, which

performs the basic arithmetic operations such as Addition(+), subtraction(-),
multiplication(*), division(/) and so on.

14
Chapter 7
References:

http://www.geeksforgeeks.com
http://www.programmingearth.com

15