Calculator Using HTML

S.E. MINI PROJECT REPORT

Submitted to Dr. Babasaheb Ambedkar Technological University in Lonere

in Partial Fulfillment of the
Requirements for the Degree of BACHELOR OF TECHNOLOGY
in Computer Engineering.

By

MAYUR SANJY CHAUDHARY

RUSHIKESH ISWAR MAHAJAN
YOGESH VINOD WAGHODE

Guide
Miss M.S.Chaudhari

DEPARTMENT OF COMPUTER ENGINEERING

J.T. MAHAJAN COLLEGE OF ENGINEERING, FAIZPUR
 J.T. MAHAJAN COLLEGE OF ENGINEERING,
FAIZPUR Department of Computer Engineering

CERTIFICATE

This is to certify that the project entitled, “Calculator Using HTML”,

which is being submitted herewith for the award of B.E. is the result of the work
completed by MAYUR SANJAY CHAUDHARY, RUSHIKESH ISWAR
MAHAJAN, YOGESH VINOD WAGHODE under my supervision and
guidance within the four walls of the institute and the same has not been
submitted elsewhere for the award of any degree.

Miss.M.S.Chaudhari Dr.K.S.Bhagat
Department of Computer
Engg.
Guide

Examiner Dr.R.D.Patil
Principal
JTMCOE,Fiazpur
I
 DECLARATION
I hereby declare that the project entitled, “Calculator Using
HTML” was carried out and written by me/ us under the guidance of Miss
M.S.Chaudhari, Assistant Professor, Department of Computer
Engineering. This work has not been previously formed the basis for the
award of any degree nor has been submitted elsewhere for the award of any
degree.

Place:
Faizpur Date:

II
 ACKNOLEDGEMENT

I would like to express my special thanks of gratitude to my assistant

professor guide Miss M.S. Chaudhari and our principal who gave me the golden
opportunity to do this project on the topic Calculator Using HTML. It helped me
in doing a lot of Research and i came to know about a lot of things related to this
topic.

Finally, I would also like to thank my parents and friends who helped me a lot in
finalizing this project within the limited time frame.

MAYUR SANJY CHAUDHARY

RUSHIKESH ISWAR MAHAJAN
YOGESH VINOD WAGHODE

III
 INDEX

Sr.No TITLE PAGE

. NO
CHAPTER 1-INTRODUCTION
HTML
HTML Language Introduction History of
HTML
HTML Features
1 4 - 10
HTML graphical user interfaces (GUIs)

HTML TKINTER GUI

Tkinter Widgets
Geometry Management

CHAPTER-2 IMPLEMENTATION
Technologies used

2 Language used CODE 11 - 22

OF PROJECT

CHAPTER-3 SCREENSHOTS
3 23 - 25

CHAPTER-4 CONCLUSION
4 26

Page 1
 CHAPTER 1-
INTRODUCTION
HTML
HTML Language Introduction
HTML is a widely used general-purpose, high level programming language. It was initially
designed by Guido van Rossum in 1991 and developed by HTML Software Foundation. It was
mainly developed for emphasis on code readability, and its syntax allows programmers to
express concepts in fewer lines of code.
HTML is a programming language that lets you work quickly and integrate systems more
efficiently.
HTML is a high-level, interpreted, interactive and object-oriented scripting language. HTML is
designed to be highly readable. It uses English keywords frequently where as other languages
use punctuation, and it has fewer syntactical constructions than other languages.
 HTML is Interpreted − HTML is processed at runtime by the interpreter. You do not
need to compile your program before executing it. This is similar to PERL and PHP.
 HTML is Interactive − You can actually sit at a HTML prompt and interact with the
interpreter directly to write your programs.
 HTML is Object-Oriented − HTML supports Object-Oriented style or technique of
programming that encapsulates code within objects.
 HTML is a Beginner's Language − HTML is a great language for the beginner-level
programmers and supports the development of a wide range of applications from simple text
processing to WWW browsers to games.

Page 2
History of HTML

HTML was developed by Guido van Rossum in the late eighties and early nineties at the
National Research Institute for Mathematics and Computer Science in the Netherlands.
HTML is derived from many other languages, including ABC, Modula-3, C, C++, Algol-68,
SmallTalk, and Unix shell and other scripting languages.
HTML is copyrighted. Like Perl, HTML source code is now available under the GNU General
Public License (GPL).
HTML is now maintained by a core development team at the institute, although Guido van
Rossum still holds a vital role in directing its progress.

HTML Features

HTML's features include −

 Easy-to-learn − HTML has few keywords, simple structure, and a clearly definedsyntax.
This allows the student to pick up the language quickly.
 Easy-to-read − HTML code is more clearly defined and visible to the eyes.

 Easy-to-maintain − HTML's source code is fairly easy-to-maintain.

 A broad standard library − HTML's bulk of the library is very portable and cross-
platform compatible on UNIX, Windows, and Macintosh.
 Interactive Mode − HTML has support for an interactive mode which allows
interactive testing and debugging of snippets of code.
 Portable − HTML can run on a wide variety of hardware platforms and has the
same interface on all platforms.
 Extendable − You can add low-level modules to the HTML interpreter. These
modules enable programmers to add to or customize their tools to be more efficient.
 Databases − HTML provides interfaces to all major commercial databases.

 GUI Programming − HTML supports GUI applications that can be created and ported
to many system calls, libraries and windows systems, such as Windows MFC, Macintosh, and

the X Window system of Unix.

Page 3
 Scalable − HTML provides a better structure and support for large programs than shell
scripting.
Apart from the above-mentioned features, HTML has a big list of good features, few are listed
below −
 It supports functional and structured programming methods as well as OOP.

 It can be used as a scripting language or can be compiled to byte-code

for building large applications.
 It provides very high-level dynamic data types and supports dynamic type checking.

 IT supports automatic garbage collection.

 It can be easily integrated with C, C++, COM, ActiveX, CORBA, and Java.

HTML graphical user interfaces (GUIs)

 Tkinter − Tkinter is the HTML interface to the Tk GUI toolkit shipped with HTML. We
would look this option in this chapter.
 wxHTML − This is an open-source HTML interface
for wxWindows http://wxHTML.org.
 JHTML − JHTML is a HTML port for Java which gives HTML scripts seamless access
to Java class libraries on the local machine http://www.jython.org.
There are many other interfaces available, which you can find them on the net.

Tkinter is the standard GUI library for HTML. HTML when combined with Tkinter provides a
fast and easy way to create GUI applications. Tkinter provides a powerful object-oriented
interface to the Tk GUI toolkit.

Creating a GUI application using Tkinter is an easy task. All you need to do is perform the
following steps −
 Import the Tkinter module.

Page 4
 Create the GUI application main window.

 Add one or more of the above-mentioned widgets to the GUI application.

 Enter the main event loop to take action against each event triggered by the user.

Page 5
Tkinter Widgets
Tkinter provides various controls, such as buttons, labels and text boxes used in a GUI
application. These controls are commonly called widgets.
There are currently 15 types of widgets in Tkinter. We present these widgets as well as a
brief description in the following table −

Sr.No. Operator &

Description
1 Button
The Button widget is used to display buttons in your application.

2 Canvas
The Canvas widget is used to draw shapes, such as lines, ovals, polygons and
rectangles, in your application.

3 Checkbutton
The Checkbutton widget is used to display a number of options as checkboxes.
The user can select multiple options at a time.

4 Entry
The Entry widget is used to display a single-line text field for accepting values
from a user.

5 Frame
The Frame widget is used as a container widget to organize other widgets.

6 Label
The Label widget is used to provide a single-line caption for other widgets. It can
also contain images.

7 Listbox
The Listbox widget is used to provide a list of options to a user.

Page 6
8 Menubutton
The Menubutton widget is used to display menus in your application.

9 Menu
The Menu widget is used to provide various commands to a user. These
commands are contained inside Menubutton.

10 Message
The Message widget is used to display multiline text fields for accepting values
from a user.

11 Radiobutton
The Radiobutton widget is used to display a number of options as radio buttons.
The user can select only one option at a time.

12 Scale
The Scale widget is used to provide a slider widget.

13 Scrollbar
The Scrollbar widget is used to add scrolling capability to various widgets, such as
list boxes.

14 Text
The Text widget is used to display text in multiple lines.

15 Toplevel
The Toplevel widget is used to provide a separate window container.

16 Spinbox
The Spinbox widget is a variant of the standard Tkinter Entry widget, which can
be used to select from a fixed number of values.

17 PanedWindow
A PanedWindow is a container widget that may contain any number of panes,

Page 7
 arranged horizontally or vertically.

18 LabelFrame
A labelframe is a simple container widget. Its primary purpose is to act as a spacer
or container for complex window layouts.

19 tkMessageBox
This module is used to display message boxes in your applications.

Geometry Management
All Tkinter widgets have access to specific geometry management methods, which have the
purpose of organizing widgets throughout the parent widget area. Tkinter exposes the following
geometry manager classes: pack, grid, and place.
 The pack() Method − This geometry manager organizes widgets in blocks before
placing them in the parent widget.
 The grid() Method − This geometry manager organizes widgets in a table-like structure
in the parent widget.
 The place() Method − This geometry manager organizes widgets by placing them in
a specific position in the parent widget.

Page 8
Page 9
 CHAPTER-2
IMPLEMENTATION

Technologies used - HTML 2.7

HTML Tkinter GUI
Language used - HTML

CODE OF PROJECT

<! DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>
Calculator using HTML
</title>
<link href="https://fonts.googleapis.com/css2?family=Cookie&display=swap "
rel="stylesheet">
<!-- CSS property to create interactive
calculator interface -->
<style>
html {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #2d3436;
background-image: linear-gradient(315deg, #2d3436 0%, #000000
74%);
font-family: 'Cookie', cursive;
}
.title {
margin-bottom: 10px;
padding: 5px 0; font-
size: 40px; font-
weight: bold; text-
align: center; color:
Page 10
red;
font-family: 'Cookie', cursive;
}
input[type=button] {
width: 60px; height:
60px;
float: left;
padding: 0;
margin: 5px;
box-sizing: border-box;
background: #ecedef;
border: none;
font-size: 30px;
line-height: 30px;
border-radius: 50%;
font-weight: 700;
color: #5E5858;
cursor: pointer;
}
input[type=text] {
width: 270px;
height: 60px;
float: left;
padding: 0;
box-sizing: border-box;
border: none;
background: none; color:
red;
text-align: right;
font-weight: 700;
font-size: 60px;

line-height: 60px;
margin: 0 25px;
}
.calculator {
background-color: #c0c0c0;
box-shadow: 0px 0px 0px 10px #666;
border: 5px solid black;
border-radius: 10px;
Page 11
}
#display {
height: 40px;
text-align: right;
background-color: black;
border: 3px solid white;
font-size: 18px;
left: 2px;
top: 2px;
color: red;
}
.btnTop {
color: white;
background-color: #6f6f6f;
font-size: 14px;
margin: auto;
width: 50px;
height: 25px;
}
</style>
</head>
<body>
<div class = "title" align="center">
Example of Calculator using HTML
</div>
<form name="Calculator" class = "calculator" >
<table border="2" align="center" cellpadding="15" cellspacing="12"

bgcolor="#c0c0c0">
<tr>
<td>
<input type="text" name="Input" Size="35" id="display">
<br>
</td>
</tr>
<tr>
<td>
<input type="button" name = "one" style="font-size:30px" value=" 1 "
OnClick="Calculator.Input.value += '1'">
<input type="button" name = "two" style = "font-size:30px" value=" 2 "
Page 12
OnCLick="Calculator.Input.value += '2'">
<input type="button" name = "three" style="font-size:30px" value=" 3 "
OnClick="Calculator.Input.value += '3'">
<input type="button" name="add" class ="btnTop" style="font- size:30px"
value=" + " OnClick="Calculator.Input.value += ' + '">
<br>
<input type="button" name = "four" style="font-size:30px" value=" 4 "
OnClick="Calculator.Input.value += '4'">
<input type="button" name = "five" style="font-size:30px" value=" 5 "
OnCLick="Calculator.Input.value += '5'">
<input type="button" name = "six" style="font-size:30px" value=" 6 "
OnClick="Calculator.Input.value += '6'">
<input type="button" name = "minus" style="font-size:30px" value="
- " OnClick="Calculator.Input.value += ' - '">
<br>
<input type="button" name = "seven" style="font-size:30px" value=" 7 "
OnClick="Calculator.Input.value += '7'">
<input type="button" name = "eight" style="font-size:30px" value=" 8 "
OnCLick="Calculator.Input.value += '8'">
<input type="button" name = "nine" style="font-size:30px" value=" 9 "
OnClick="Calculator.Input.value += '9'">
<input type="button" name = "mul" style="font-size:30px" value=" * "

OnClick="Calculator.Input.value += ' * '">

<br>
<input type="button" name = "clear" style="font-size:30px" value=" c "
OnClick="Calculator.Input.value = ''">
<input type="button" name="zero" style="font-size:30px" value=" 0 "
OnClick="Calculator.Input.value += '0'">
<input type="button" name="DoIt" style="font-size:30px" value=" = "
OnClick="Calculator.Input.value = eval(Calculator.Input.value)">
<input type="button" name="div" style="font-size:30px" value=" / "
OnClick="Calculator.Input.value += ' / '">
<br>
</td>
</tr>
</table>
</form>
</body>
</html>
Page 13
Page 14
 CHAPTER-3
SCREENSHOTS
GUI – Main display window with name of the calculator
1.Standard Calculator

Page 15
 CHAPTER-4
CONCLUSION

This project has really been faithful and informative. It has made us learn and understand
the many trivial concepts of HTML Language. As we have used HTML Tkinter as a GUI it
provides various controls, such as buttons, labels and text boxes to build a user friendly
application.
The fast growing use of internet confirms the good future and scope of the proposed
project.
Finally it has taught us a valuable lifelong lesson about the improvements and working and
interacting in a group.

Page 16
 CHAPTER-5
REFRENCE
1. Martin Hilbert; Priscila López (1 April 2011). "The World's Technological Capacity to Store,
Communicate, and Compute Information" (PDF). Science. 332 (6025): 60–
65. doi:10.1126/science.1200970. Archived from the original (PDF) on 2012-10-26.
2. ^ John Lewis, The Pocket Calculator Book. (London: Usborne, 1982)
3. ^ University of Alicante. "A Cordic-based Architecture for High Performance Decimal
Calculations" (PDF). IEEE. Archived (PDF) from the original on 2016-03-03. Retrieved 2015-
08-15.
4. ^ "Decimal CORDIC Rotation based on Selection by Rounding: Algorithm and
Architecture" (PDF). British Computer Society. Archived (PDF) from the original on 2016-03-
04. Retrieved 2015-08-14.
5. ^ "David S. Cochran, Algorithms and accuracy in the HP35, Hewlett Packard Journal, June
1972" (PDF). Archived (PDF) from the original on 2013-10-04. Retrieved 2013-10-03.
6. ^ Ifrah (2001), p. 11.
7. ^ Jim Falk. "Early Evolution of the Modern Calculator, Part 2. The Modern Era: 4.1
Schickard's Calculating Clock". Things that Count. Archived from the original on 2014-04-16.
8. ^ Chapman (1942), pp. 508, 509; "Pascal's invention of the calculating machine. Pascal
invented his machine just four hundred years ago, as a youth of nineteen. He was spurred to it
by sharing the burden of arithmetical labor involved in his father's official work as supervisor
of taxes at Rouen. He conceived the idea of doing the work mechanically, and developed a
design appropriate for this purpose ; showing herein the same combination of pure science and
mechanical genius that characterized his whole life. But it was one thing to conceive and design
the machine, and another to get it made and put into use. Here were needed those practical gifts
that he displayed later in his inventions....
In a sense, Pascal's invention was premature, in that the mechanical arts in his time were not
sufficiently advanced to enable his machine to be made at an economic price, with the accuracy
and strength needed for reasonably long use. This difficulty was not overcome until well on into
the nineteenth century, by which time also a renewed stimulus to invention was given by the
need for many kinds of calculation more intricate than those considered by Pascal."
9. ^ "A New Calculator". The Gentleman's magazine. Vol. 202. p. 100. Pascal and Leibnitz, in the
seventeenth century, and Diderot at a later period, endeavored to construct a machine which
might serve as a substitute for human intelligence in the combination of figures.
10.^ Jim Falk. "Pascal vs Schickard: An empty debate?". Things that Count. Archived from
the original on 2014-04-08.
11.^ Ginsburg, Jekuthiel (1933). Scripta Mathematica. Science. Vol. 86. Kessinger Publishing,
LLC. p. 149. doi:10.1126/science.86.2218.13-a. ISBN 978-0-7661-3835-
3. PMID 17737911. S2CID 28216043. In 1893, the German calculating machine inventor
Arthur Burkhardt was asked to put Leibniz machine in operating condition if possible.
His report was favorable except for the sequence in the carry.

Page 17