HTML file: mycalc.html
<!-- my_calc.html
Author: VBhat
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VBhat's Simple Calculator</title>
<link rel="stylesheet" href="calc_style.css">
</head>
<body style="background-color:white;">
<div class="calculator">
<div class="hdg">VBhat's Math Calculator!</div>
<br>
<div class="display-container">
<div class="expression-display" id="expression-display"></div>
<div class="display" id="display">0</div>
</div>
<br>
<div class="buttons">
<button class="btn" onclick="clearDisplay()">CE</button>
<button class="btn" onclick="clearDisplay()">C</button>
<button class="btn" onclick="reciprocal()">1/x</button>
<button class="btn" onclick="appendOperator('÷')">÷</button>
<button class="btn" onclick="calculateSquare()">x²</button>
<button class="btn" onclick="calculateCube()">x³</button>
<button class="btn" onclick="calculateSquareRoot()">√</button>
<button class="btn" onclick="calculateCubeRoot()">∛</button>
<button class="btn" onclick="appendNumber('7')">7</button>
<button class="btn" onclick="appendNumber('8')">8</button>
<button class="btn" onclick="appendNumber('9')">9</button>
<button class="btn" onclick="appendOperator('x')">x</button>
<button class="btn" onclick="appendNumber('4')">4</button>
<button class="btn" onclick="appendNumber('5')">5</button>
<button class="btn" onclick="appendNumber('6')">6</button>
<button class="btn" onclick="appendOperator('-')">-</button>
<button class="btn" onclick="appendNumber('1')">1</button>
<button class="btn" onclick="appendNumber('2')">2</button>
<button class="btn" onclick="appendNumber('3')">3</button>
<button class="btn" onclick="appendOperator('+')">+</button>
<button class="btn" onclick="clearDisplay()">1/x</button>
<button class="btn" onclick="appendNumber('0')">0</button>
<button class="btn" onclick="appendNumber('.')">.</button>
<button class="equal" onclick="calculate()">=</button>
</div>
</div>
<script src="calc_script.js"></script>
</body>
</html>JavaScript file
/* calc_sript.js
Author: VBhat
*/
let display = document.getElementById('display');
let expressionDisplay = document.getElementById('expression-display');
let currentInput = '';
let operator = '';
let previousInput = '';
let expression = '';
// Configurable maximum number of characters
const maxCharacters = 20;
/*
In JavaScript, the || operator returns the first "truthy" value it finds from left to right. If the first value is falsy,
it moves on and returns the second one.
If currentInput has a value (like "5", "12", etc.), then use that.
If currentInput is empty or falsy (like "", null, or undefined), then fall back to '0'.
*/
function updateDisplay() {
expressionDisplay.innerText = expression;
display.innerText = currentInput || '0';
}
function appendNumber(number) {
if (currentInput.length >= maxCharacters) return;
currentInput += number;
updateDisplay();
}
function appendOperator(op) {
if (currentInput === '') return;
if (previousInput !== '') {
calculate();
}
operator = op;
previousInput = currentInput;
currentInput = '';
expression += ` ${previousInput} ${operator}`;
updateDisplay();
}
function clearDisplay() {
currentInput = '';
previousInput = '';
operator = '';
expression = '';
updateDisplay();
}
function reciprocal() {
if (parseFloat(currentInput) !== 0) {
currentInput = (1 / parseFloat(currentInput)).toString();
} else {
currentInput = "Error";
}
updateDisplay();
}
function calculate() {
let result;
/*
parseFloat() is a JavaScript built-in function
that converts a string into a floating-point number (i.e., a number with decimals).
It reads the string from left to right and converts as much as it can into a valid number.
If it can't convert the string at all, it returns NaN (Not a Number).
*/
const prev = parseFloat(previousInput);
const current = parseFloat(currentInput);
if (isNaN(prev) || isNaN(current)) return;
switch (operator) {
case '+':
result = prev + current;
break;
case '-':
result = prev - current;
break;
case 'x':
result = prev * current;
break;
case '÷':
if (current === 0) {
result = 'Error';
} else {
result = prev / current;
}
break;
default:
return;
}
expression += ` ${current} =`;
/*
Converts the result (which is likely a number) into a string so that
we can manipulate its characters.
.slice(0, maxCharacters)
slice(start, end) extracts a portion of the string from start (inclusive) to end (exclusive).
Here, slice(0, maxCharacters) means:
Start from index 0 (first character).
Extract up to maxCharacters characters.
If maxCharacters is 10,
it extracts the first 10 characters.
This ensures that currentInput doesn't exceed maxCharacters in length.
It is useful for limiting the number of digits displayed in a calculator
*/
currentInput = result.toString().slice(0, maxCharacters);
operator = '';
previousInput = '';
updateDisplay();
}
function calculateSquare() {
if (currentInput === '') return;
expression = `(${currentInput})² =`;
currentInput = Math.pow(parseFloat(currentInput), 2).toString().slice(0, maxCharacters);
updateDisplay();
}
function calculateCube() {
if (currentInput === '') return;
expression = `(${currentInput})³ =`;
currentInput = Math.pow(parseFloat(currentInput), 3).toString().slice(0, maxCharacters);
updateDisplay();
}
function calculateSquareRoot() {
if (currentInput === '') return;
expression = `√(${currentInput}) =`;
currentInput = Math.sqrt(parseFloat(currentInput)).toString().slice(0, maxCharacters);
updateDisplay();
}
function calculateCubeRoot() {
if (currentInput === '') return;
expression = `∛(${currentInput}) =`;
currentInput = Math.cbrt(parseFloat(currentInput)).toString().slice(0, maxCharacters);
updateDisplay();
}CSS file
/* Author: VBhat */
/* Beginning of CSS file */
/* Basic body styling */
body {
display: flex;
justify-content: center;
align-items: center;
background-color: #222;
margin: 0;
font-family: Arial, sans-serif;
font-size: 20px;
/* height: 100vh; */
}
/* Calculator styling */
.calculator {
background-color: #222;
border: 10px solid #2f2e2e;
border-radius: 10px;
padding: 5px;
margin: 20px;
/* box-shadow: 0 0 10px rgba(93, 4, 4, 0.1); */
box-shadow: 0 0 10px rgba(237, 240, 238, 0.95);
}
/* Display container for expression and result */
/*
1. display: flex;
This makes .display-container a flexbox container, allowing its child elements to be arranged flexibly.
2. flex-direction: column;
This sets the flex container to arrange its child elements vertically (top to bottom), instead of the default horizontal layout.
3. align-items: flex-end;
This aligns all child elements to the right (end of the flex container) along the cross-axis (horizontal axis in this case).
4. background-color: #333;
This sets the background color to a dark gray (#333).
5. color: white;
This changes the text color of the container and its children to white.
6. padding: 10px;
This adds 10px of space inside the container on all sides, preventing content from touching the edges.
7. border-radius: 5px;
This rounds the corners of the container with a 5px radius, giving it a smoother look.
8. margin-bottom: 10px;
This adds 10px of space below the container, ensuring separation from other elements.
*/
.display-container {
display: flex;
flex-direction: column;
align-items: flex-end;
background-color: #333;
color: white;
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
}
/* Expression display */
.expression-display {
/* font-size: 1.2em; */
font-size: 1em;
min-height: 20px;
padding:5px;
color: #bbb;
}
/* Main display */
.display {
/* font-size: 2em; */
font-size: 1.5em;
height: 50px;
color: white;
}
.hdg {
/* color: rgb(254, 250, 5); */
color:orange;
font-size: 1.5em;
text-align: center;
padding: 8px;
margin-bottom: 8px;
}
/*
1. display: grid;
This makes the .buttons container a CSS Grid container.
Grid allows arranging child elements in a structured, responsive layout.
2. grid-template-columns: repeat(4, 1fr);
This defines the layout for the grid columns.
repeat(4, 1fr) means:
There will be 4 equal-width columns.
1fr (fractional unit) ensures each column takes up an equal portion of the available space.
3. gap: 10px;
This sets the spacing between grid items (both rows and columns) to 10 pixels.
This CSS rule creates a grid layout for .buttons where:
It has 4 equal columns.
Each item inside .buttons is placed in one of these columns.
A 10px gap is maintained between items.
*/
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
/*
font-size: 1.5em; => Here em is a relative unit:
It is based on the font size of the parent element.
Calculation:
If the parent element has a font size of 16px (default browser font size),
then: 1.5em=1.5×16px=24px
If the parent element's font size is 20px, then:
1.5em=1.5×20px=30px
*/
.btn {
padding: 20px;
/* font-size: 2em; */
font-size: 1.5em;
border: none;
border-radius: 5px;
background-color: #2f2e2e;
color: #f0f0f0;
cursor: pointer;
transition: background-color 0.3s;
}
.equal {
padding: 20px;
font-size: 2em;
border: none;
border-radius: 5px;
background-color: #078409;
color: #f0f0f0;
cursor: pointer;
transition: background-color 0.3s;
}
.btn:hover {
background-color: white;
color: black;
}