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/
