A

Micro project report On

"Calculator”

SUBMITTED TO M.S.B.T.E., Mumbai

For the Award of

DIPLOMA IN COMPUTER ENGINEERING

Roll no Name of Student Enrollment no

07 Raj Deepak Debadwar 2110740009

11 Vedant Radhakrishna Badave 2110740013

32 Prathamesh Chandrakant Shinde 21110740037

54 Sanket Ravindra Badave 2110740069

UNDER THE GUIDANCE OF

Mr.P.S.Bhandare
DEPARTMENT OF COMPUTER ENGINEERING
NBA ACCREDIATED

SVERI‟s College of Engineering (Polytechnic), Pandharpur

Gopalpur Pandharpur-413304
2023-24
AFFILIATED TO

M.S.B.T.E.
Evolution sheet for Micro Project

Academic Year:- 2023-24 Name of Faculty:- Mr.P.S.Bhandare

Course:- Computer Engineering Course code:- CO5I
Subject:- Client Side Scripting Subject Code:- 22519

Semester:- 5 Scheme:- I

Calculator
Title of Project:-

COs addressed by the Micro Project:

Create interactive web pages using program flow control structure.
CO 1
Implement Arrays and functions in Java script
CO 2
Create event based web forms using Java scrip
CO 3

Comments/Suggestions about team work/leadership/inter-personal communication (if any)

Marks out of 4
Marks out of 6 Total
for
for mars
Roll No Name of students performance
performance in out
in oral/
group activity of 10
Presentation

07 Raj Deepak Debadwar

11 Vedant Radhakrishna Badave

32 Prathamesh Chandrakant Shinde
54 Sanket Ravindra Badave

Name and
Signature of Mr. P.S.Bhandare
faculty
 SVERI’s COLLEGE OF ENGINEERING (POLYTECHNIC), PANDHARPUR.

CERTIFICATE

This is to certify that the Project report entitled

“Calculator”
Submitted by

Roll no Name of Student Enrollment no

07 Raj Deepak Debadwar 2110740009

11 Vedant Radhakrishna Badave 2110740013

32 Prathamesh Chandrakant Shinde 2110740037

54 Sanket Ravindra Badave 2110740069

is a bonafide work carried out by above students, under the guidance of MrP.S.Bhandare and it is
submitted towards the fulfillment of requirement of MSBTE, Mumbai for the award of Diploma in
computer Engineering at SVERI‟s COE (Polytechnic), Pandharpur during the academic year 2023-2024.

(Mr.P.S.Bhandare)
Guide
(Mr.P.S.Bhandare) (Dr. Misal N. D.)
HOD Principal

Place: Pandharpur

Date: / /
 Acknowledgement

“Calculator” has been developed successfully with a great contribution of four students in a period of two
months. We like to appreciate their guidance, encouragement and willingness since without their support the
project would not have been a success. We would like to give our heartfelt gratitude to Principal Dr. N. D.
Misal, Guide & HOD Mr.Bhandare P.S who is the supervisor of our project for helping and encouraging us
in many ways to make our project a success. We would never been able to finish our work without great
support and enthusiasm from friends and support from our family. We would like to thank the department of
Information Technology, for giving us permission to initiate this project and successfully finish it.
 Introduction

As we know, the Calculator is a portable device used in our daily life to perform various
mathematical functions such as addition, subtraction, multiplication, division, root, etc.
However, we have scientific or sophisticated calculators used to solve complex tasks such
as trigonometry functions, degrees, exponential operators, log functions, hyperbolic
functions, square root, and so on. In this topic, we will create a calculator program in
JavaScript.

Resources Used

Sr. Specificati Remark

No. on
1 Intel Core i7, RAM 16GB As per
requirement
2 Operating System – Windows 11 As per
requirement
3 Application – Microsoft Word 2019 As per
requirement

Hardware and Software Requirements

Hardware Requirements
1. Hard Disk
2. RAM
3. Monitor
4. Keyboard

Software Requirements
1. Notepad++
2. Browser
 Concepts Used

 display() function

This function accepts the values clicked as a parameter and returns the same to the textbox. The value could be
a digit, a decimal point, or an operator except „=‟.

function display(val){

document.getElementById('result').value += val

return val

 solve() function

The solve() method is called when the user clicks on the „=‟ operator. The variable x accepts the mathematical
expression provided by the user. This expression is evaluated and stored in the variable y. The result is
displayed in the textbox.

function solve(){
let x = document.getElementById('result').value
let y = eval(x);
document.getElementById('result').value = y
return y
}

 clearScreen()

This function is called when the user clicks on the C or the clear button.

function clearScreen(){
document.getElementById('result').value = ''
}
 Approach:

 HTML Table is used to create a grid structure and <input type=”button”> adds the buttons on the grid.
 <input type=”text”> is used to add an input text field to display the expression.
 When the user clicks on the button, the button value will display on the input field.
 When the equal button ( = ) is clicked, solve() function is called and evaluates the expression, and displays
the result on the input text field.
 The button “c” is used to clear the text input field. When the button is clicked, the clr() function is called,
and it resets the value to empty.
 The solve() function uses Math.js evaluate() function to evaluate the mathematical expression.

Code –

<html>
<head>
<title>JavaScript Calculator</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/mathjs/10.6.4/math.js"
integrity=
"sha512-
BbVEDjbqdN3Eow8+empLMrJlxXRj5nEitiCAK5A1pUr66+jLVejo3PmjIaucRnjlB0P9R3rBUs3g5jXc8ti+f
Q=="
crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/mathjs/10.6.4/math.min.js"
integrity=
"sha512-
iphNRh6dPbeuPGIrQbCdbBF/qcqadKWLa35YPVfMZMHBSI6PLJh1om2xCTWhpVpmUyb4IvVS9iYnnY
MkleVXLA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<style>
table {
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}
input[type="button"] {
width: 100%;
padding: 20px 40px;
background-color: green;
color: white;
font-size: 24px;
font-weight: bold;
 border: none;
border-radius: 5px;
}
input[type="text"] {
padding: 20px 30px;
font-size: 24px;
font-weight: bold;
border: none;
border-radius: 5px;
border: 2px solid black;
}
</style>

</head>
<body>
<table id="calcu">
<tr>
<td colspan="3"><input type="text" id="result"></td>
<td><input type="button" value="c" onclick="clr()" /> </td>
</tr>
<tr>
<td><input type="button" value="1" onclick="dis('1')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="2" onclick="dis('2')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="3" onclick="dis('3')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="/" onclick="dis('/')"
onkeydown="myFunction(event)"> </td>
</tr>
<tr>
<td><input type="button" value="4" onclick="dis('4')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="5" onclick="dis('5')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="6" onclick="dis('6')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="*" onclick="dis('*')"
onkeydown="myFunction(event)"> </td>
</tr>
<tr>
<td><input type="button" value="7" onclick="dis('7')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="8" onclick="dis('8')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="9" onclick="dis('9')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="-" onclick="dis('-')"
 onkeydown="myFunction(event)"> </td>

</tr>
<tr>
<td><input type="button" value="0" onclick="dis('0')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="." onclick="dis('.')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="=" onclick="solve()"> </td>

<td><input type="button" value="+" onclick="dis('+')"

onkeydown="myFunction(event)"> </td>
</tr>
</table>
<script>
function dis(val) {
document.getElementById("result").value += val
}
function myFunction(event) {
if (event.key == '0' || event.key == '1'
|| event.key == '2' || event.key == '3'
|| event.key == '4' || event.key == '5'
|| event.key == '6' || event.key == '7'
|| event.key == '8' || event.key == '9'
|| event.key == '+' || event.key == '-'
|| event.key == '*' || event.key == '/')
document.getElementById("result").value += event.key;
}
var cal = document.getElementById("calcu");
cal.onkeyup = function (event) {
if (event.keyCode === 13) {
console.log("Enter");
let x = document.getElementById("result").value
console.log(x);
solve();
}
}
function solve() {
let x = document.getElementById("result").value
let y = math.evaluate(x)
document.getElementById("result").value = y
}
function clr() {
document.getElementById("result").value = ""
}
</script>
</body>
</html>
Output-
 COs addressed by the Micro Project:
Create interactive web pages using program flow control structure.
CO 1
Implement Arrays and functions in Java script
CO 2
Create event based web forms using Java scrip
CO 3

Conclusion

JavaScript Calculator is used to perform mathematical operations like – Addition, Subtraction, Multiplication,
Division, etc.
HTML, CSS, and JavaScript are used to design the JavaScript Calculator. HTML is used to design the basic
structure of the calculator. CSS styles are used to apply styles on the calculator and JavaScript is used to add
the calculation functionality. Also, Math.js is used to evaluate the calculations.

References
https://www.section.io/engineering-education/building-a-calculator-a-javascript-project-for-beginners/