DEPARTMENT OF COMPUTER ENGINEERING

S.S.M. ADSUL POLYTECHNIC COLLEGE,

CHAS, AHMEDNAGAR-414 005(M.S)

CERTIFICATE
This is to certify that the micro project report entitled

Submitted by

NAME OF STUDENT ENROLLEMENT NO PROGRAM

Shinde Siddhi Subhash 2214640070 CO2I
Shinde Srushti Ashok 2214640058 CO2I
Ghungarde Rutuja shivaji 2214640024 CO2I
Kale Antara Vijay 2214640071 CO2I
Jadhav Payal Bhausaheb 2214640038 CO2I
Karle Nita Satish 2214640041 CO2I

Of semester I institute, Sau. Sundarabai Manik Adsul Polytechnic, Chas, Ahmednagar

(code: 1464) has completed the micro project satisfactorily in course (22014) for the
Academic year 2023-24 as prescribed in the MSBTE curriculum.

Place: Ahmednagar
Date: / /2022-23

Prof.Palwe.P.D Prof.Hole.P.P Prof.Gadakh.R.S

(Micro Project guide) (Head of Dept.) (Principal)
 A
MICRO PROJECT REPORT
ON
Create a calculator using html

Program & Program code : CO2I

Course : CPH
Course code : 22014

Submitted by,

NAME OF STUDENT ENROLLEMENT NO PROGRAM

Shinde Siddhi Subhash 2214640070 CO2I
Shinde Srushti Ashok 2214640058 CO2I
Ghungarde Rutuja shivaji 2214640024 CO2I
Kale Antara Vijay 2214640071 CO2I
Jadhav Payal Bhausaheb 2214640038 CO2I
Karle Nita Satish 2214640041 CO2I

Under the Guidance of

PROF.Palwe.P.D
In partial fulfillment of requirement for the award of
Diploma in Computer Engineering
MSBTE, Mumbai.

Academic Year: 2022-23

DEPARTMENT OF COMPUTER ENGINEERING

S.S.M. ADSUL POLYTECHNIC COLLEGE
CHAS, AHMEDNAGAR-414 005(M.S)
 ACKNOWLEDGEMENT

I take this opportunity to acknowledge the constant encouragement and continuous help
given to me by my guide Prof.Palwe.P.D convey my sincere thanks to his valuable timely
suggestion.
I would also like to thanks principal Prof. Gadakh R.S. and Head of Computer
Department Prof.Hole.P.P I would also like to thank teaching staff of Computer Department for
helping us to achieve this goal.
I am also thankful to those who directly or indirectly helped me for completing this micro
project. I would like to thank my parents without whose supports; the completion ofthe micro
project would not have been possible.

Shinde Siddhi Subhash

Shinde Srushti Ashok
Ghungarde Rutuja Shivaji
Kale Antara Vijay
Jadhav Payal Bhausaheb
Karle Nita Satish
Web Page Designing With HTML

INDEX

Sr.no Content Page No.

PART A
1 Introduction
2 Properties
3 Features
4 Advantages/Disadvantages
5 Tag Information
6 Action plan
7 Resources required
PART B
1 Coding
2 Output
3 Actual resources required
4 Conclusion
 PART- A

Introduction
HTML is an acronym which stands for Hyper Text Markup
Language which is used for creating web pages and web applications.
Let's see what is meant by Hypertext Markup Language, and Web page.

Hyper Text: HyperText simply means "Text within Text." A text has a
link within it, is a hypertext. Whenever you click on a link which brings
you to a new webpage, you have clicked on a hypertext. HyperText is a
way to link two or more web pages (HTML documents) with each other.

Markup language: A markup language is a computer language that is

used to apply layout and formatting conventions to a text document.
Markup language makes text more interactive and dynamic. It can turn
text into images, tables, links, etc.

Web Page: A web page is a document which is commonly written in

HTML and translated by a web browser. A web page can be identified by
entering an URL. A Web page can be of the static or dynamic type. With
the help of HTML only, we can create static web pages

Loaded: Skip 10s

Properties
• All HTML elements can have attributes
• Attributes provide additional information about
elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs
like: name="value"
Features

1. User Friendly & Simple

2. Semantic Structure

3. SEO – Search Engine Optimisation

4. localStorage & IndexedDB – Client-side data storage

5. Offline Capabilities (PWA) with Cache API & Service Workers

6. Canvas for Game Development

7. Platform Independent

8. Media Support

Advantages/Disadvantages
Advantages :

• HTML helps to build structure of a website and is a widely used

Markup language.
• It is easy to learn.
• Every browser supports HTML Language.
• HTML is light weighted and fast to load.
• Storage of big files are allowed because of the application cache
feature.
• Do not get to purchase any extra software because it’s by default in
every window.
• Loose syntax (although, being too flexible won’t suit standards).
• HTML is simple to edit as being a plain text.
• It integrates easily with other languages such as JavaScript, CSS etc.
• HTML is that it is easy to code even for novice programmers.
• HTML also allows the utilization of templates, which makes
designing a webpage easy.
• It is fast to download as the text is compressible.
• Very useful for beginners in the web designing field.
• HTML can be supported to each and every browser, if not supported
 to all the browsers.
• HTML is built on almost every website, if not all websites.
• HTML is increasingly used for data storage as like XML syntax.
• HTML has many tag and attributes which can short your line of
code.

Disadvantages :

• It cannot produce dynamic output alone, since it’s a static language.

• Making the structure of HTML documents becomes tough to
understand.
• Errors can be costly.
• It is the time consuming as the time it consume to maintain on the
color scheme of a page and to make lists, tables and forms.
• We need to write a lot of code for just creating a simple webpage.
• We have to check up the deprecated tags and confirm not to use them
to appear because another language that works with HTML has
replaced the first work of the tag, and hence the opposite language
needs to be understood and learned.
• Security features offered by HTML are limited.
• If we need to write down long code for creating a webpage then it
produces some complexity.
• HTML can create only static and plain pages so if we’d like dynamic
pages then HTML isn’t useful.
• Editing of web page need to be done separately , they are not
centralized.

Syntax of html

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Tag Information

Tag name Description

<!-- --> This tag is used to apply comment in an

HTML document.

<!DOCTYPE> This tag is used to specify the version of

HTML

<b> It is used to make a text bold.

<blockquote> It is used to define a content which is taken

from another source.

<body> It is used to define the body section of an

HTML document.

<br> It is used to apply single line break.

<center> It is used to align the content in

center. (Not supported in HTML5)

<colgroup> It is used to define group of columns in a

table.

<dd> It is used to provide definition/description

of a term in description list.

<dl> It is sued to define a description list.

<dt> It is used to define a term in description list.

<font> It defines the font, size, color, and face for

the content. (Not supported in HTML5)

<frame> It defines a particular area of webpage

which can contain another HTML file. (Not
supported in HTML5)
<frameset> It defines group of Frames. (Not supported
in HTML5)

<h1> to <h6> It defines headings for an HTML document

from level 1 to level 6.

<head> It defines the head section of an HTML

document.

<hr> It is used to apply thematic break between

paragraph-level elements.

<html> It represents root of an HTML document.

<img> It is used to insert an image within an HTML

document.

<li> It is used to represent items in list.

<noframes> It provides alternate content to represent in

browser which does not support the
<frame> elements.

<ol> It defines an ordered list of items.

<p> It represents a paragraph in an HTML

document.

<strike> It is used to render strike through the text.

<style> It is used to contain style information for an

HTML document.

<sub> It defines a text which displays as a

subscript text.

<sup> It defines a text which represent as

superscript text.
<table> It is used to present data in tabular form or
to create a table within HTML document.

<td> It is used to define cells of an HTML table

which contains table data

<tr> It defines the row cells in an HTML table

<tt> It is used to define teletype text.

<u> It is used to render enclosed text with an

underline.

<ul> It defines unordered list of items.

ACTION PLAN

Name of
Planned Planned
Sr.No Details of Activity Responsible Team
Start Date Finish Date
Members
1 Finalization of topic 18-04-2023 18-04-2023 Rutuja Ghungarde
2 Project definition and 19-04-2023 19-04-2023 Srushti Shinde
planning
3 Requirement Gathering 21-04-2023 21-04-2023 Antara Kale
4 Implementation of Code 22-04-2023 24-04-2023 Siddhi Shinde
5 Integration and Testing 25-04-2023 26-04-2023 Jadhav Payal
6 Documentation 27-04-2023 28-04-2023 Karle Nita

RESOURCES REQUIRED

Name Of
Sr.no. Specifications Quantity Remarks
Resource/material
1 Computer System Any desktop or laptop computer 1 -
2 Software package 1 -
Text editor, Web browser
 PART B

CODE
<!DOCTYPE html>
<html>

<head>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/mathjs/10.6.4/math.js"
integrity=
"sha512-
BbVEDjbqdN3Eow8+empLMrJlxXRj5nEitiCAK5A1pUr66+jLVejo3PmjIaucRnjlB
0P9R3rBUs3g5jXc8ti+fQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/mathjs/10.6.4/math.min.js"
integrity=
"sha512-
iphNRh6dPbeuPGIrQbCdbBF/qcqadKWLa35YPVfMZMHBSI6PLJh1om2xCTWhp
VpmUyb4IvVS9iYnnYMkleVXLA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<!-- for styling -->
<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>
<!-- create table -->

<body>
<table id="calcu">
<tr>
<td colspan="3"><input type="text" id="result"></td>
<!-- clr() function will call clr to clear all value -->
<td><input type="button" value="c" onclick="clr()" /> </td>
</tr>
<tr>
<!-- create button and assign value to each button -->
<!-- dis("1") will call function dis to display value -->
<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>
<!-- solve function call function solve to evaluate value -->
<td><input type="button" value="=" onclick="solve()"> </td>
 <td><input type="button" value="+" onclick="dis('+')"
onkeydown="myFunction(event)"> </td>
</tr>
</table>

<script>
// Function that display value
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 that evaluates the digit and return result

function solve() {
let x = document.getElementById("result").value
let y = math.evaluate(x)
document.getElementById("result").value = y
}

// Function that clear the display

function clr() {
document.getElementById("result").value = ""
}
</script>
</body>

</html>
OUTPUT
ACTUAL RESOURCES USED

Name Of
Sr.no. Specifications Quantity Remark
Resource/material
s
1 Computer System Any desktop or laptop computer 1
2 Software package 1
Text editor, Web browser

CONCLUSION
In this work we have developed a calculator for exact real number computation and
performed a theoretical analysis of the algorithms and experimented on their
implementation.