Online Calculator using HTML, CSS, and JavaScript
A simple web-based calculator project
Presented by: Arav SIngh, Vipul Sharma, Harshit Shukla
Overview
• Current Completion Level: 40%
• Next Steps: add JavaScript and CSS for Functionality and Styling.
• Final Goal: A fully functional, interactive, and A simple web-based calculator
Purpose: To create a basic online calculator using web technologies.
Technologies Used:
HTML (Structure)
CSS (Styling)
JavaScript (Functionality)
HTML Structure
The HTML file defines the calculator layout.
Includes:
An input field to display calculations
Buttons for digits and operations
HTML Tag Highlights:
<input>: For showing user input
<button>: For each calculator key
<script>: For adding logic using JavaScript
Html Structure Code
<!DOCTYPE html>
<html lang="en"> <button onclick="append('0')" class="zero">0</button>
<head> <button onclick="append('.')">.</button>
<meta charset="UTF-8" /> </div>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> </div>
<title>Online Calculator</title>
<link rel="stylesheet" href="[Link]" /> <script>
</head> function append(value) {
<body> [Link]('display').value += value;
<div class="calculator"> }
<input type="text" id="display" disabled />
<div class="buttons"> function clearDisplay() {
<button onclick="clearDisplay()">C</button> [Link]('display').value = '';
<button onclick="append('/')">÷</button> }
<button onclick="append('*')">×</button>
<button onclick="backspace()">←</button> function backspace() {
let current = [Link]('display').value;
<button onclick="append('7')">7</button> [Link]('display').value = [Link](0, -1);
<button onclick="append('8')">8</button> }
<button onclick="append('9')">9</button>
<button onclick="append('-')">−</button> function calculate() {
try {
<button onclick="append('4')">4</button> [Link]('display').value = eval([Link]('display').value);
<button onclick="append('5')">5</button> } catch {
<button onclick="append('6')">6</button> [Link]('display').value = 'Error';
<button onclick="append('+')">+</button> }
}
<button onclick="append('1')">1</button> </script>
<button onclick="append('2')">2</button> </body>
<button onclick="append('3')">3</button> </html>
<button onclick="calculate()">=</button>
Explanation of the HTML code
🔹 <!DOCTYPE html>
This tells the browser that the file is an HTML5 document. It's always at the top of an HTML file.
🔹 <html lang="en">
This is the root of the webpage. All the content of your webpage goes inside this tag.
lang="en" means the language is English.
🔹 <head> section
This part is not visible on the webpage. It contains information about the page, like:
<meta charset="UTF-8" />: Makes sure all characters (like symbols, emojis, etc.) display correctly.
<meta name="viewport"...>: Makes your page responsive (mobile-friendly).
<title>Online Calculator</title>: Sets the name shown on the browser tab.
<link rel="stylesheet" href="[Link]" />: Connects your HTML to the CSS file to style the page.
🔹 <body>
This is where the visible content of the website goes.
🔸 <div class="calculator">
This is a container (box) that holds the entire calculator.
🔸 <input type="text" id="display" disabled />
This creates a box where the calculation is shown (like 2 + 2 = 4).
type="text": It’s a text box.
id="display": Gives it a name so JavaScript can use it.
disabled: Means users can't type in it directly.
🔸 <div class="buttons">
This is another container for all the buttons (numbers and operations).
🔸 <button onclick="...">
Each <button> creates a clickable key on the calculator.
Example: <button onclick="append('7')">7</button>
Shows the number 7 on the button.
When clicked, it runs a JavaScript function called append('7'), which adds 7 to the screen.
Some special buttons:
C: Clears everything → clearDisplay()
←: Deletes the last number → backspace()
=: Solves the equation → calculate()
🔸 <script> ... </script>
This is where the JavaScript code lives. It adds functionality.
Inside this:
append(value): Adds numbers or symbols to the display.
clearDisplay(): Clears the display.
backspace(): Removes last character.
calculate(): Solves the equation using eval().
Output Screenshot
Summary
Achieved a fully working online calculator
Learned:
Web page structure with HTML
Styling with CSS
DOM manipulation with JavaScript
Thank You!