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

Guide Department of Computer Engg.

Examiner Dr.R.D.Patil
Principal
JTMCOE,Fiazpu

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 anydegree.

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 2-8
HTML graphical user interfaces (GUIs)

HTML TKINTER GUI

Tkinter Widgets Geometry
Management
CHAPTER-2 IMPLEMENTATION
Technologies used Language used

2 CODE OF PROJECT 9-16

Tags used in HTML code

CHAPTER-3 SYSTEM
3 REQUIREMENTS 17
CHAPTER-4 SCREENSHOTS
4 18-22
CHAPTER-5 ADVANATAGES
5 23
CHAPTER-6 DISADVANATAGES
6 24
CHAPTER-7 APPLICATIONS
25
7

CONCLUSION
26
8

REFERENCES
27-28
9
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
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
 CHAPTER-2
IMPLEMENTATION

2.1 When choosing a calculator, there are several factors to consider:

1. Purpose:

Determine What Tasks You Need The Calculator For, Such As Basic Arithmetic, Scientific Calculations,
Financial Calculations, Or Graphing.

2. Features:

Look For Features That Match Your Needs, Such As Memory Functions, Unit Conversions, Trigonometric
Functions, Statistical Analysis, Or Programming Functions.

3. Display:

Consider The Size And Clarity Of The Display, Whether It Is A Basic LCD Or A High-Resolution Color
Screen.

4. Keypad:

Check The Layout And Size Of The Keypad, Whether It Has A Comfortable Key Press And Whether It Is
User-Friendly.

5. Power Source:

Decide Whether You Want A Battery-Powered Or Solar-Powered Calculator, Or One That Can Be
Plugged In.

6. Size And Portability:

Page 9
Consider The Size And Weight Of The Calculator, Whether It Is Easy To Carry Around, And Whether It
Fits Your Needs.

7. Brand and price:

Choose a reputable brand that offers good customer support and warranty, and compare prices to find the
best value for your budget.
These are some of the factors to consider when choosing a calculator. Depending on your needs and
preferences, you might prioritize certain features or brands over others.

2.2 HERE ARE THE BASIC STEPS FOR IMPLEMENTING A CALCULATOR PROGRAM
USING HTML:

1. Define the data types and variables:

Depending on the requirements of your program, you might need to use different data types to represent
numbers, operators, and other variables. For example, you might use integers for whole numbers, doubles
for decimal numbers, and characters for operators.

2. Get user input:

The program should prompt the user to enter the numbers and operators they want to use in their
calculation. You can use the scanf function to read user input from the console.

3. Parse the input:

The program should parse the user input to identify the numbers and operators. You can use string
manipulation functions to split the input into substrings, and then convert the substrings to the appropriate
data types.

4. Perform the calculation:

Page 10
The program should perform the calculation based on the operator and numbers entered by the user. You
can use conditional statements (if-else) or switch statements to determine which operation to perform, and
then use arithmetic operators to calculate the result.

5. Display the result:

The program should display the result of the calculation to the user. You can use the printf function to
format and print the result to the console.

6. Repeat or exit:

Depending on the requirements of your program, you might need to ask the user if they want to perform
another calculation or exit the program. You can use a loop (while or do-while) to repeat the program until
the user chooses to exit.

These are the basic steps for implementing a calculator program using C. Depending on the complexity of
your program, you might need to add more features or error handling to make it more robust and user-
friendly.

2.3 HERE ARE THE BASIC STEPS FOR IMPLEMENTING A CALCULATOR PROGRAM
USING HTML:

1. Define the data types and variables:

Depending on the requirements of your program, you might need to use different data types to represent
numbers, operators, and other variables. For example, you might use integers for whole numbers, doubles
for decimal numbers, and characters for operators.

2. Get user input:

The program should prompt the user to enter the numbers and operators they want to use in their
calculation. You can use the scanf function to read user input from the console.
Page 11
3. Parse the input:

The program should parse the user input to identify the numbers and operators. You can use string
manipulation functions to split the input into substrings, and then convert the substrings to the appropriate
data types.

4. Perform the calculation:

The program should perform the calculation based on the operator and numbers entered by the user. You
can use conditional statements (if-else) or switch statements to determine which operation to perform, and
then use arithmetic operators to calculate the result.

5. Display the result:

The program should display the result of the calculation to the user. You can use the printf function to
format and print the result to the console.

6. Repeat or exit:

Depending on the requirements of your program, you might need to ask the user if they want to perform
another calculation or exit the program. You can use a loop (while or do-while) to repeat the program until
the user chooses to exit.

These are the basic steps for implementing a calculator program using C. Depending on the complexity of
your program, you might need to add more features or error handling to make it more robust and user-
friendly.

2.4 HERE ARE SOME BASIC FUNCTIONS THAT YOU CAN IMPLEMENT IN A
CALCULATOR PROGRAM USING HTML:

Page 12
1. Addition: The program should be able to add two or more numbers together and return the result.

2. Subtraction: The program should be able to subtract one number from another and return the result.

3. Multiplication: The program should be able to multiply two or more numbers together and return the
result.

4. Division: The program should be able to divide one number by another and return the result.

5. Square root: The program should be able to calculate the square root of a number and return the result.

6. Exponentiation: The program should be able to raise a number to a power and return the result.

7. Trigonometric functions: The program should be able to calculate the sine, cosine, and tangent of an
angle (in radians or degrees) and return the result.

8. Memory functions: The program should be able to store a number in memory, recall it later, and clear
the memory.

10. Error handling: The program should be able to detect and report any errors or invalid inputs, such as
division by zero or square root of a negative number.

These are just some of the basic functions that you can implement in a calculator program using C.
Depending on the requirements and complexity of your program, you might need to add more functions or
features.

Page 13
Tags used in HTMl code:

 <!DOCTYPE html>: Specifies the HTML document type being used as HTML5.

 <html>: Represents the root element of an HTML page.

 <head>: Contains meta-information about the HTML document, such as the character encoding,
title, and external resources.

 <meta>: Specifies the character encoding for the HTML document as UTF-8.

 <title>: Sets the title of the HTML document, which appears in the browser's title bar or tab.

 <link href>: Links an external CSS file from the Google Fonts API to import the "Cookie" font.

 <style>: Defines the internal CSS styles for the HTML document.

 <div>: Represents a division or a container element used for grouping and styling purposes.

 <form >: Creates a form element with the name "Calculator" and assigns it the "calculator" class
for styling.

 <table border="">: Creates a table element with border, alignment, cell padding, cell spacing,
and background color attributes.

 <tr>: Represents a table row.

 <td>: Represents a table cell.

 <input>: Creates an input field, such as text input or button, within the form.

Page 14
 type="text": Specifies the input field as a text input type.

 type="button": Specifies the input field as a button input type.

 <br>: Inserts a line break, creating a new line in the document.

Page 15
Attributes used in HTML code:

 id: Specifies a unique identifier for an HTML element.

 class: Defines one or more class names for an HTML element, used for styling or JavaScript
manipulation.
 style: Specifies inline CSS styles for an HTML element.
 src: Specifies the source URL of an external resource, such as an image or a script.
 href: Specifies the destination URL of a hyperlink.
 alt: Provides alternative text for an image if it cannot be displayed.
 title: Specifies additional information about an element, often displayed as a tooltip.
 disabled: Disables an input or button element, preventing user interaction.
 readonly: Makes an input element read-only, allowing its value to be displayed but not edited.
 value: Sets or retrieves the value of an input element.
 placeholder: Provides a short hint or example text within an input element.
 name: Specifies the name of an HTML element, often used when submitting form data.
 type: Defines the type or behavior of an input element, such as text, checkbox, or button.
 required: Specifies that an input element must be filled out before submitting a form.
 maxlength: Specifies the maximum number of characters allowed in an input element.
 rows and cols: Determine the number of rows and columns in a textarea element.
 colspan and rowspan: Specifies the number of columns or rows an HTML table cell should span.
 checked: Specifies that a checkbox or radio button should be pre-selected.
 selected: Specifies that an option in a select element should be pre-selected.
 target: Specifies the target window or frame for a hyperlink.

Page 16
 CHAPTER -3
SYSTEM REQUIREMENTS

Recommended Operating Systems

 Windows: 7 or newer

 MAC: OS X v10.7 or higher

 Linux: Ubuntu

Hardware Requirements

We strongly recommend a computer fewer than 5 years old.

 Processor: Minimum 1 GHz; Recommended 2GHz or more

 Ethernet connection (LAN) OR a wireless adapter (Wi-Fi)

 Hard Drive: Minimum 32 GB; Recommended 64 GB or more

 Memory (RAM): Minimum 1 GB; Recommended 4 GB or above

 Sound card w/speakers

 Some classes require a camera and microphone

Recommended Software

Supported Browsers

People often ask what browser they should use. There is no single answer for this. Use whichever browser works best on
your computer. However, we recommend downloading Firefox and/or Chrome in addition to having Internet Explorer or
Safari.

 Firefox

 Chrome

Page 17
 CHAPTER-4
SCREENSHOTS
GUI – Main display window with name of the calculator
1.Standard HTMLCalculator

Page 18
Operations:

1. ADDITION
Input:

Output:

Page 19
2. SUBTRACTION
Input:

Output:

Page 20
3. DECIMAL MULTIPLICATION
Input:

Output:

Page 21
4. DIVISION
Input:

Output:

Page 22
 CHAPTER-5
ADVANTAGES

1. Platform Independence: HTML calculators can run on any device with a web browser, ensuring
compatibility across platforms.

2. Easy Accessibility: Users can access HTML calculators through web browsers without the need for
additional software or installations.

3. User-Friendly Interface: HTML allows for customizable and intuitive calculator designs, enhancing
user experience.

4. Dynamic Functionality: JavaScript integration enables real-time calculations and interactive user
feedback.

5. Integration with Other Web Technologies: HTML calculators can be combined with server-side
scripting for advanced functionality and data manipulation.

6. Easy Maintenance and Updates: HTML-based calculators can be easily modified and updated
without requiring users to install updates.

7. Compatibility: HTML calculators are supported by major web browsers, ensuring broad
accessibility.

8. Scalability and Extensibility: HTML provides a scalable platform for adding features and
customizing calculator functionalities.

Page 23
 CHAPTER-6
DISADVANTAGES

1. Browser Dependence: HTML calculators rely on web browsers, which can introduce compatibility
and performance issues.

2. Internet Requirement: HTML calculators need an internet connection to function, limiting offline
accessibility.

3. Processing Limitations: HTML calculators may have limitations in processing power, affecting
performance with complex calculations.

4. Security Vulnerabilities: Web-based calculators may be prone… to security risks, requiring robust
measures to protect against attacks.

5. Offline Limitations: Without internet access, HTML calculators may become inaccessible, unlike
standalone calculator devices or apps.

6. Device Compatibility: Compatibility issues may arise on older devices or browsers, impacting
functionality and user experience.

7. Limited Integration: HTML calculators may have constraints when integrating with the operating
system or accessing device-specific features.

8. Customization Constraints: Customization options for HTML calculators may be limited compared
to other programming languages or frameworks.

Page 24
 CHAPTER-7
APPLICATIONS

1. Online Calculators: Used on websites and platforms for a wide range of calculations, such as
financial, scientific, or conversion tasks.

2. Mobile-Friendly Calculators: Optimized for mobile apps and responsive interfaces, providing
convenient calculation tools for users on the go.

3. Educational Tools: Employed in e-learning platforms, online courses, and tutorials to teach
mathematical concepts and perform practice exercises.

4. Financial and Accounting Software: Integrated into applications for financial calculations like
budgeting, investments, loan payments, and tax computations.

5. Conversion Tools: Facilitate unit, currency, and measurement conversions in various applications
and websites.

6. Health and Fitness Applications: Calculate BMI, calorie intake, target heart rate, or workout
intensity, aiding individuals in monitoring their health and fitness goals.

7. Engineering and Scientific Calculations: Assist with complex technical calculations and data
analysis, supporting engineering designs, scientific experiments, and research.

8. Real Estate and Mortgage Calculations: Used in real estate and mortgage websites or applications
for mortgage payments, loan affordability, interest rates, and property valuations.

9. Gaming and Simulations: Integrated into games and simulations for in-game calculations, character
statistics, score tracking, and resource management.

10. Personal and Productivity Tools: Provide everyday calculations, budget planning, tip calculations,
time conversions, and measurement conversions, improving efficiency and organization in personal
and professional tasks.

Page 25
 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 26
 REFERENCES

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–
2. 65. doi:10.1126/science.1200970. Archived from the original (PDF) on 2012-10-26.
3. John Lewis, the Pocket Calculator Book. (London: Usborne, 1982)
4. ^ 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.
5. "Decimal CORDIC Rotation based on Selection by Rounding: Algorithm and
6. Architecture" (PDF). British Computer Society. Archived (PDF) from the original on 2016-03- 04.
Retrieved 2015-08-14.
7. "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.
8. 6. Ifrah (2001), p. 11.
9. 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.
10. 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....
11. 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."
12. "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
Page 27
 serve as a substitute for human intelligence in the combination of figures.
13. Jim Falk. "Pascal vs Schickard: An empty debate?". Things that Count. Archived from the original
on 2014-04-08.
14. 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-
15. 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 28