MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION, MUMBAI

A Project Report
On
„CALCULATOR‟

DIPLOMA
In
Computer ENGINEERING
Submitted by
Mr. Shankar Maruti Morti
Mr. Shreyash Tanaji Magdum
Mr. Bhushan Siddhappa Karguppi
Mr. Prathmesh Yashwant Sardesai

Under guidance of,

Mrs R.S.Patil

DEPARTMENT OF COMPUTER ENGINEERING

SANT GAJANAN MAHARAJ RURAL POLITECHNIC, MAHAGAON

ACADEMIC YEAR 2023-2024

1
 SANT GAJANAN MAHARAJ RURAL HOSPITAL &RESEARCH CENTER, MAHAGAON
“SANT GAJANAN MAHARAJ RURAL POLYTECHNIC”
A/P –MAHAGAON, SITE –CHINCHEWADI, TAL-GADHINGLAJ, DIST-KOLHAPUR
Certificate
This is to certify that the following students of Fifth semester of Diploma in Computer
Engineering of Institute SANT GAJANAN RURAL POLYTECHNIC, MAHAGAON-416503.(CODE-0965)
has completed Micro project on ‘CALCULATOR’ in subject CSS subject-code(22519) for academic year
2023 to 2024 as prescribed in the curriculum.

ROLL ENROLLMENT NO NAME OF STUDENT

SEAT NO
NO
22 2109650147 Mr Bhushan Siddhappa Karguppi
33 2109650173 Mr.Shankar Maruti Morti
35 2109650175 Mr.Shreyash Tanaji Magdum
28 2109650163 Mr.Prathmesh Yashwant Sardesai

DATE: PLACE: Mahagaon

Mrs. R. S. Patil Mr. G. K. Birangaddi Mrs. R. S. Patil

(Project Guide) (Head of Department) (Principal)

2
 Table of Content

Table of No
Contents

1 Micro-Project-Annexure-I

2 Micro-Project-Annexure-II

3 Source Code

3
 Annexure-I
CALCULATOR
1.0 Rationale

Basic calculators can do only addition, subtraction, multiplication and division mathematical
calculations. However, more sophisticated calculators can handle exponential operations,
square roots, logarithms, trigonometric functions and hyperbolic functions.

2.0 Course Outcomes Addressed

 Create interactive web pages using program flow control structure.
 Implement Arrays and functions in Java script.
 Create event-based web forms using Java script.
 Create interactive webpage using regular expressions for validations.
 Create Menus and navigations in web Pages.

3.0 Literature Review

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,we will
create a calculator program in JavaScript.

4.0 Proposed Methodology

 We will focus on selection of appropriate topic for Micro project.
 Select the topic Calculator.
 Then we will with our brief study on our topic.
 Then we will gather all information based on the topic of micro-project.
 We will check or view our micro-project.

4
5.0 Action plan

SR.NO. Details Of Activity Planned Planned Name Of

Start Date Finish Date Responsible Team
Members

1 Discussion and finalization of All Members

topic

2 Preparation and submission of Bhushan Karguppi

abstract

3 Collection of data Shankar Morti

4 Preparing Algorithm and Shreyash Magdum

Flowchart
5 Development of program Prathmesh Sardesai

6 Presentation/Seminar All Members

7 Submission Micro-Project All Members

5
6.0Resources Required

Sr. No Name of resource/material

1 Operating System (Windows 10)

Software:- Notepad++,MS Word
2
Browser:- Firefox, Google Chrome
3

7.0 Name of Team Members with Roll No‟s:-

Sr Roll Name of Student Enrollment Number

No. No
Mr.Bhushan Siddhappa Karguppi
1 22 2109650147

Mr.Shankar Maruti Morti

2 33 2109650173

Mr.Shreyash Tanaji Magdum

3 38 2109650175

Mr.Prathmesh Yashwant Sardesai

4 35 2109650163

6
 Annexure-II

CALCULATOR

1.0 Introduction
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.

2.0 Literature Review

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,we will create a calculator program in JavaScript.

3.0 Aim of the Micro-Project

JavaScript is a limited-featured client-side programming language. JavaScript runs at the

client end through the user’s browser without sending back and forth to the server. It is
widely used by web developers. In this project the main aim is as followed- To understand
the concept of “Calculator” using form validation.
.

4.0 Course Outcomes Achieved

 Create interactive web pages using program flow control structure.
 Implement Arrays and functions in Java script.
 Create event-based web forms using Java script.
 Create interactive webpage using regular expressions for validations.
 Create Menus and navigations in web Pages.

7
5.0 Actual Methodology Followed

 In this micro-project, first of all we will focus on selection of appropriate topic for
Micro project.

 Select the topic Calculator.

 Then we will with our brief study on our topic.

 Then we will gather all information based on the topic of micro-project.

 We organized all information about our topic in proper manner.

 We will check or view our micro-project.

8
  Source Code:

!DOCTYPE html>
<html lang = "en">
<head>
<title> JavaScript Calculator </title>

<style>
h1 {
text-align: center;
padding: 23px;
background-color: skyblue;
color: white;
}

#clear{
width: 270px;
border: 3px solid gray;
border-radius: 3px;
padding: 20px;
background-color: red;
}

.formstyle
{
width: 300px;
height: 530px;
margin: auto;
border: 3px solid skyblue;
border-radius: 5px;
padding: 20px;
}

input
{
width: 20px;
background-color: green;

9
color: white;
border: 3px solid gray;
border-radius: 5px;
padding: 26px;
margin: 5px;
font-size: 15px;
}

#calc{
width: 250px;
border: 5px solid black;
border-radius: 3px;
padding: 20px;
margin: auto;
}

</style>

</head>
<body bgcolor="black">
<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>
<!-- Display the calculator button on the screen. -->
<!-- onclick() function display the number prsses by the user. -->
<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' ">
<input type = "button" value = "-" onclick = "form1.answer.value += '-' ">
<br> <br>

10
 <input type = "button" value = "7" onclick = "form1.answer.value += '7' ">
<input type = "button" value = "8" onclick = "form1.answer.value += '8' ">
<input type = "button" value = "8" 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 += '.' ">
<!-- When we click on the '=' button, the onclick() shows the sum results on the
calculator screen. -->
<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>

Output of the Micro project:

11
12
13
5.0Actual Resources Used

Sr. No Name of resource/material

1 Operating System (Windows 10)

Software:- Notepad++,MS Word
2
Browser:- Firefox, Google Chrome
3

14
6.0 Outputs of Micro-Project
We understood the how calculator works and results the equation.

We understood how to improve calculator from the feedback of customers.

6.0 Skill Developed/Learning Outcome of this Micro-Project

 We acquired the knowledge about to Regular Expression

 Creating forms
 Create Banners
 Image Rollover

7.0 Skills Developed

We acquired the knowledge about “Calculator”.

8.0 References
https://www.w3schools.com/howto/howto_website.asp
https://www.coursera.org/learn/html-css-javascript-for-web-
developers https://www.freecodecamp.org/news/html-css-and-
javascript-explained-for-beginners/

9.0 Area of future Improvement

A future value compound interest calculator is a helpful tool for calculating the value of
any investment at a future date. The initial investment, periodic investment, interest rate,
and period number are entered in the future value calculator's formula input box.

15