Scribd
Upload
1 views9 pages

Final Code

The document is an HTML code for a calculator user interface, featuring a menu for selecting between mechanical and scientific calculator modes. It includes styles for backgrounds, buttons, displays, and animations, designed to create a visually appealing and interactive experience. The calculator functionality is implemented through JavaScript functions linked to button actions for performing calculations.

Uploaded by

alexlapwin1356
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
1 views9 pages

Final Code

The document is an HTML code for a calculator user interface, featuring a menu for selecting between mechanical and scientific calculator modes. It includes styles for backgrounds, buttons, displays, and animations, designed to create a visually appealing and interactive experience. The calculator functionality is implemented through JavaScript functions linked to button actions for performing calculations.

Uploaded by

alexlapwin1356
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Final Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator UI</title>
<link href="[Link]
family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap" rel="stylesheet">

<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
font-family: 'Share Tech Mono', monospace;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
transition: background 0.6s ease;
overflow: hidden;
}

/* ── MENU BACKGROUND ── */
.menu-bg {
background:
radial-gradient(ellipse at 15% 25%, rgba(0,201,255,0.45) 0%, transparent 55%),
radial-gradient(ellipse at 85% 75%, rgba(255,78,205,0.45) 0%, transparent 55%),
radial-gradient(ellipse at 50% 55%, rgba(0,255,136,0.25) 0%, transparent 50%),
#0d0d1a;
}

/* ── CALC BACKGROUND ── */
.calc-bg {
background:
radial-gradient(ellipse at 10% 10%, rgba(0,255,200,0.2) 0%, transparent 50%),
radial-gradient(ellipse at 90% 90%, rgba(0,120,255,0.3) 0%, transparent 50%),
#040f1a;
}

/* ── PARTICLES ── */
#particles {
position: fixed; inset: 0; pointer-events: none; z-index: 0;
overflow: hidden;
}
.particle {
position: absolute;
border-radius: 50%;
opacity: 0.15;
animation: floatUp linear infinite;
}
@keyframes floatUp {
0% { transform: translateY(100vh) scale(0.5); opacity: 0; }
10% { opacity: 0.15; }
90% { opacity: 0.15; }
100% { transform: translateY(-100px) scale(1.2); opacity: 0; }
}

/* ── CARD ── */
.card {
position: relative; z-index: 1;
backdrop-filter: blur(20px) saturate(1.6);
-webkit-backdrop-filter: blur(20px) saturate(1.6);
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 8px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
padding: 28px 24px 24px;
border-radius: 24px;
width: 340px;
text-align: center;
color: #e8f4ff;
animation: slideIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes slideIn {
from { opacity: 0; transform: translateY(30px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}

h2 {
font-family: 'Orbitron', sans-serif;
font-weight: 900;
font-size: 1.6rem;
letter-spacing: 3px;
margin-bottom: 6px;
background: linear-gradient(135deg, #00c9ff, #ff4ecd, #00ff88);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
h3 {
font-family: 'Orbitron', sans-serif;
font-weight: 700;
font-size: 1rem;
letter-spacing: 2px;
color: #7ecfff;
margin-bottom: 14px;
}
.subtitle {
font-size: 0.7rem;
color: rgba(255,255,255,0.4);
letter-spacing: 2px;
margin-bottom: 22px;
text-transform: uppercase;
}

/* ── MENU BUTTONS ── */
.menu-btn {
display: block;
width: 100%;
padding: 14px;
margin: 10px 0;
border: 1px solid rgba(255,255,255,0.15);
border-radius: 12px;
cursor: pointer;
background: rgba(255,255,255,0.07);
color: white;
font-family: 'Orbitron', sans-serif;
font-size: 0.8rem;
letter-spacing: 2px;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.menu-btn::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(0,201,255,0.3), rgba(255,78,205,0.3));
opacity: 0;
transition: opacity 0.2s;
}
.menu-btn:hover::before { opacity: 1; }
.menu-btn:hover { border-color: rgba(255,255,255,0.4); transform: translateY(-2px); box-shadow:
0 6px 20px rgba(0,0,0,0.3); }
.menu-btn:active { transform: translateY(0); }

/* ── DISPLAY ── */
.display-wrap {
background: rgba(0,0,0,0.5);
border: 1px solid rgba(0,200,255,0.2);
border-radius: 12px;
padding: 10px 14px 8px;
margin-bottom: 14px;
text-align: right;
box-shadow: inset 0 2px 8px rgba(0,0,0,0.4), 0 0 12px rgba(0,200,255,0.05);
}
.display-expr {
font-size: 0.7rem;
color: rgba(126,207,255,0.5);
min-height: 16px;
word-break: break-all;
letter-spacing: 1px;
margin-bottom: 4px;
}
.display-main {
font-family: 'Orbitron', sans-serif;
font-size: 1.8rem;
font-weight: 700;
color: #00ffcc;
word-break: break-all;
min-height: 2.2rem;
text-shadow: 0 0 15px rgba(0,255,200,0.4);
letter-spacing: 2px;
}
.[Link] { color: #ff6b6b; font-size: 1.1rem; text-shadow: none; }

/* ── BUTTON GRID ── */
.buttons {
display: grid;
gap: 6px;
}
.buttons-mech { grid-template-columns: repeat(4, 1fr); }
.buttons-sci { grid-template-columns: repeat(4, 1fr); }

/* ── CALC BUTTONS ── */
.btn {
padding: 13px 6px;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
cursor: pointer;
background: rgba(255,255,255,0.05);
color: #d0e8ff;
font-family: 'Share Tech Mono', monospace;
font-size: 0.95rem;
transition: all 0.12s ease;
position: relative;
overflow: hidden;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.btn::after {
content: '';
position: absolute; inset: 0;
background: rgba(255,255,255,0.1);
opacity: 0;
transition: opacity 0.1s;
}
.btn:hover { border-color: rgba(255,255,255,0.2); transform: translateY(-1px); }
.btn:active::after { opacity: 1; }
.btn:active { transform: scale(0.95); }

/* Operator buttons */
.btn-op {
background: rgba(0,150,255,0.15);
border-color: rgba(0,150,255,0.3);
color: #7ecfff;
font-size: 1.1rem;
}
.btn-op:hover { background: rgba(0,150,255,0.28); }

/* Equals button */
.btn-eq {
background: linear-gradient(135deg, rgba(0,255,150,0.25), rgba(0,200,255,0.25));
border-color: rgba(0,255,180,0.4);
color: #00ffcc;
font-size: 1.2rem;
font-weight: bold;
text-shadow: 0 0 10px rgba(0,255,200,0.4);
}
.btn-eq:hover { background: linear-gradient(135deg, rgba(0,255,150,0.4),
rgba(0,200,255,0.4)); }

/* Clear / util */
.btn-clear {
background: rgba(255,80,80,0.15);
border-color: rgba(255,80,80,0.3);
color: #ff8080;
}
.btn-clear:hover { background: rgba(255,80,80,0.28); }

.btn-del {
background: rgba(255,160,0,0.12);
border-color: rgba(255,160,0,0.3);
color: #ffb830;
}
.btn-del:hover { background: rgba(255,160,0,0.25); }

/* Sci function buttons */


.btn-fn {
background: rgba(180,0,255,0.12);
border-color: rgba(180,0,255,0.25);
color: #dd88ff;
font-size: 0.78rem;
letter-spacing: 0.5px;
}
.btn-fn:hover { background: rgba(180,0,255,0.25); }

/* Span 2 cols for = in mech */


.span2 { grid-column: span 2; }

/* ── BACK BUTTON ── */
.btn-back {
margin-top: 12px;
width: 100%;
padding: 11px;
border: 1px solid rgba(255,107,107,0.4);
border-radius: 10px;
cursor: pointer;
background: rgba(255,107,107,0.1);
color: #ff8080;
font-family: 'Orbitron', sans-serif;
font-size: 0.7rem;
letter-spacing: 2px;
transition: all 0.2s;
}
.btn-back:hover { background: rgba(255,107,107,0.22); border-color: rgba(255,107,107,0.6); }

/* ── HIDDEN ── */
.calculator { display: none; }
</style>
</head>

<body class="menu-bg" id="body">

<!-- Ambient particles -->


<div id="particles"></div>

<!-- ── MENU ── -->


<div class="card" id="menu">
<h2>CALCULATOR</h2>
<p class="subtitle">Select Mode</p>
<button class="menu-btn" onclick="showCalc('mechanical')"> ⚙ Mechanical Calculator</button>
<button class="menu-btn" onclick="showCalc('scientific')"> 🔬 Scientific Calculator</button>
</div>

<!-- ── MECHANICAL CALCULATOR ── -->


<div class="card calculator" id="mechanical">
<h3>MECHANICAL</h3>
<div class="display-wrap">
<div class="display-expr" id="mechExpr"></div>
<div class="display-main" id="mechDisplay">0</div>
</div>

<div class="buttons buttons-mech">


<button class="btn btn-clear" onclick="[Link]()">C</button>
<button class="btn btn-fn" onclick="[Link]()">+/−</button>
<button class="btn btn-fn" onclick="[Link]()">%</button>
<button class="btn btn-op" onclick="[Link]('/')">÷</button>

<button class="btn" onclick="[Link]('7')">7</button>


<button class="btn" onclick="[Link]('8')">8</button>
<button class="btn" onclick="[Link]('9')">9</button>
<button class="btn btn-op" onclick="[Link]('*')">×</button>

<button class="btn" onclick="[Link]('4')">4</button>


<button class="btn" onclick="[Link]('5')">5</button>
<button class="btn" onclick="[Link]('6')">6</button>
<button class="btn btn-op" onclick="[Link]('-')">−</button>
<button class="btn" onclick="[Link]('1')">1</button>
<button class="btn" onclick="[Link]('2')">2</button>
<button class="btn" onclick="[Link]('3')">3</button>
<button class="btn btn-op" onclick="[Link]('+')">+</button>

<button class="btn" onclick="[Link]('0')">0</button>


<button class="btn" onclick="[Link]()">.</button>
<button class="btn btn-del" onclick="[Link]()">⌫</button>
<button class="btn btn-eq" onclick="[Link]()">=</button>
</div>
<button class="btn-back" onclick="goBack()">◀ BACK</button>
</div>

<!-- ── SCIENTIFIC CALCULATOR ── -->


<div class="card calculator" id="scientific">
<h3>SCIENTIFIC</h3>
<div class="display-wrap">
<div class="display-expr" id="sciExpr"></div>
<div class="display-main" id="sciDisplay">0</div>
</div>

<div class="buttons buttons-sci">


<button class="btn btn-clear" onclick="[Link]()">C</button>
<button class="btn btn-del" onclick="[Link]()">⌫</button>
<button class="btn btn-fn" onclick="[Link]()">+/−</button>
<button class="btn btn-fn" onclick="[Link]()">%</button>

<button class="btn btn-fn" onclick="[Link]('sin')">sin</button>


<button class="btn btn-fn" onclick="[Link]('cos')">cos</button>
<button class="btn btn-fn" onclick="[Link]('tan')">tan</button>
<button class="btn btn-fn" onclick="[Link]('log')">log</button>

<button class="btn btn-fn" onclick="[Link]('ln')">ln</button>


<button class="btn btn-fn" onclick="[Link]('sqrt')">√</button>
<button class="btn btn-fn" onclick="[Link]('sq')">x²</button>
<button class="btn btn-fn" onclick="[Link]('inv')">1/x</button>

<button class="btn btn-fn" onclick="[Link]('pow')">xʸ</button>


<button class="btn btn-fn" onclick="[Link]('pi')">π</button>
<button class="btn btn-fn" onclick="[Link]('e')">e</button>
<button class="btn btn-fn" onclick="[Link]()">( )</button>

<button class="btn" onclick="[Link]('7')">7</button>


<button class="btn" onclick="[Link]('8')">8</button>
<button class="btn" onclick="[Link]('9')">9</button>
<button class="btn btn-op" onclick="[Link]('/')">÷</button>

<button class="btn" onclick="[Link]('4')">4</button>


<button class="btn" onclick="[Link]('5')">5</button>
<button class="btn" onclick="[Link]('6')">6</button>
<button class="btn btn-op" onclick="[Link]('*')">×</button>

<button class="btn" onclick="[Link]('1')">1</button>


<button class="btn" onclick="[Link]('2')">2</button>
<button class="btn" onclick="[Link]('3')">3</button>
<button class="btn btn-op" onclick="[Link]('-')">−</button>

<button class="btn" onclick="[Link]('0')">0</button>


<button class="btn" onclick="[Link]()">.</button>
<button class="btn btn-fn" onclick="[Link]('abs')">|x|</button>
<button class="btn btn-op" onclick="[Link]('+')">+</button>

<button class="btn btn-eq span2" onclick="[Link]()">=</button>


<button class="btn btn-fn span2" onclick="[Link]()">DEG / RAD</button>
</div>
<button class="btn-back" onclick="goBack()">◀ BACK</button>
</div>

<script>
/* ══════════════════════════════════════════
PARTICLE SYSTEM
══════════════════════════════════════════ */
(function spawnParticles() {
const container = [Link]('particles');
const colors = ['#00c9ff','#ff4ecd','#00ff88','#7ecfff','#ffb830'];
for (let i = 0; i < 22; i++) {
const p = [Link]('div');
[Link] = 'particle';
const size = 4 + [Link]() * 18;
[Link] = `
width:${size}px; height:${size}px;
left:${[Link]()*100}%;
background:${colors[[Link]([Link]()*[Link])]};
animation-duration:${8+[Link]()*14}s;
animation-delay:${-[Link]()*20}s;
`;
[Link](p);
}
})();

/* ══════════════════════════════════════════
SCENE TRANSITIONS
══════════════════════════════════════════ */
function showCalc(type) {
[Link]('menu').[Link] = 'none';
[Link](type).[Link] = 'block';
[Link]('body').className = 'calc-bg';
}
function goBack() {
[Link]('menu').[Link] = 'block';
[Link]('mechanical').[Link] = 'none';
[Link]('scientific').[Link] = 'none';
[Link]('body').className = 'menu-bg';
}

/* ══════════════════════════════════════════
SHARED CALCULATOR ENGINE
══════════════════════════════════════════ */
function CalcEngine(displayId, exprId) {
const disp = () => [Link](displayId);
const expr = () => [Link](exprId);

let current = '0';


let stored = null;
let operator = null;
let freshNum = true; // next digit replaces display
let exprStr = '';

function render(val, ex) {


const d = disp();
[Link]('error');
[Link] = val;
expr().textContent = ex !== undefined ? ex : exprStr;
}

function renderError(msg) {
const d = disp();
[Link]('error');
[Link] = msg;
exprStr = '';
expr().textContent = '';
current = '0'; stored = null; operator = null; freshNum = true;
}

function numStr(n) {
// Pretty-print: limit floating digits, remove trailing zeros
if (!isFinite(n)) return n > 0 ? '∞' : '−∞';
if (isNaN(n)) return 'Error';
const s = parseFloat([Link](10)).toString();
return s;
}

[Link] = function(d) {
if (freshNum) { current = (d === '0') ? '0' : d; freshNum = false; }
else {
if (current === '0' && d !== '.') current = d;
else current += d;
}
if ([Link] > 14) current = [Link](0, 14);
render(current);
};

[Link] = function() {
if (freshNum) { current = '0.'; freshNum = false; render(current); return; }
if (![Link]('.')) { current += '.'; render(current); }
};
[Link] = function(op) {
const n = parseFloat(current);
if (stored !== null && !freshNum) {
// Chain operations
const result = compute(stored, operator, n);
if (result === null) { renderError('Error'); return; }
stored = result; current = numStr(result); freshNum = true;
} else {
stored = n;
}
operator = op;
freshNum = true;
const sym = {'+':'+','−':'-','-':'−','*':'×','/':'÷'}[op] || op;
exprStr = numStr(stored) + ' ' + ({'+':'+','-':'−','*':'×','/':'÷'}[op] || op);
render(current, exprStr);
};

[Link] = function() {
if (stored === null || operator === null) { exprStr = ''; expr().textContent = '';
return; }
const n = parseFloat(current);
const result = compute(stored, operator, n);
const sym = {'+':'+','-':'−','*':'×','/':'÷'}[operator] || operator;
exprStr = numStr(stored) + ' ' + ({'+':'+','-':'−','*':'×','/':'÷'}[operator]||
operator) + ' ' + numStr(n) + ' =';
if (result === null) { expr().textContent = exprStr; renderError('Error'); return; }
current = numStr(result);
stored = null; operator = null; freshNum = true;
render(current, exprStr);
};

function compute(a, op, b) {


switch(op) {
case '+': return a + b;
case '-': return a - b;
case '*': return a * b;
case '/': return b === 0 ? null : a / b;
}
return null;
}

[Link] = function() {
current = '0'; stored = null; operator = null; freshNum = true; exprStr = '';
const d = disp(); [Link]('error'); [Link] = '0';
expr().textContent = '';
};

[Link] = function() {
if (freshNum) return;
current = [Link](0, -1) || '0';
if (current === '-') current = '0';
render(current);
};

[Link] = function() {
const n = parseFloat(current);
if (isNaN(n)) return;
current = numStr(-n);
freshNum = false;
render(current);
};

[Link] = function() {
const n = parseFloat(current);
if (isNaN(n)) return;
current = numStr(n / 100);
freshNum = false;
render(current);
};

// --- Scientific extensions ---


this._deg = true;

[Link] = function() {
this._deg = !this._deg;
const label = this._deg ? 'DEG' : 'RAD';
// Flash a brief indicator
const ex = expr();
[Link] = '[ ' + label + ' mode ]';
setTimeout(() => { [Link] = exprStr; }, 1200);
};

[Link] = function(name) {
let n = parseFloat(current);
if (isNaN(n)) return;
let result, label;
const toRad = this._deg ? (x => x * [Link] / 180) : (x => x);

switch(name) {
case 'sin': result = [Link](toRad(n)); label = 'sin(' + current + ')'; break;
case 'cos': result = [Link](toRad(n)); label = 'cos(' + current + ')'; break;
case 'tan':
if (this._deg && [Link](n % 180) === 90) { renderError('Undefined');
return; }
result = [Link](toRad(n)); label = 'tan(' + current + ')'; break;
case 'log':
if (n <= 0) { renderError('Domain Error'); return; }
result = Math.log10(n); label = 'log(' + current + ')'; break;
case 'ln':
if (n <= 0) { renderError('Domain Error'); return; }
result = [Link](n); label = 'ln(' + current + ')'; break;
case 'sqrt':
if (n < 0) { renderError('Domain Error'); return; }
result = [Link](n); label = '√(' + current + ')'; break;
case 'sq': result = n * n; label = '(' + current + ')²'; break;
case 'inv':
if (n === 0) { renderError('Div by Zero'); return; }
result = 1 / n; label = '1/(' + current + ')'; break;
case 'pow':
// Sets up x^y: store current, set op to '^'
stored = n; operator = '^'; freshNum = true;
exprStr = numStr(n) + ' ^';
render(current, exprStr);
return;
case 'abs': result = [Link](n); label = '|' + current + '|'; break;
default: return;
}

if (!isFinite(result) || isNaN(result)) { renderError('Error'); return; }


exprStr = label + ' =';
current = numStr(result); freshNum = true;
render(current, exprStr);
};

// Override compute to handle pow


const _origCompute = compute;
this._compute = function(a, op, b) {
if (op === '^') return [Link](a, b);
return _origCompute(a, op, b);
};

// Patch equals to use extended compute


const eng = this;
[Link] = function() {
if (stored === null || operator === null) { exprStr = ''; expr().textContent = '';
return; }
const n = parseFloat(current);
let result;
if (operator === '^') {
result = [Link](stored, n);
exprStr = numStr(stored) + ' ^ ' + numStr(n) + ' =';
} else {
const sym = {'+':'+','-':'−','*':'×','/':'÷'}[operator] || operator;
exprStr = numStr(stored) + ' ' + sym + ' ' + numStr(n) + ' =';
result = compute(stored, operator, n);
}
if (result === null || !isFinite(result) || isNaN(result)) {
expr().textContent = exprStr; renderError('Error'); return;
}
current = numStr(result);
stored = null; operator = null; freshNum = true;
render(current, exprStr);
};

[Link] = function(name) {
switch(name) {
case 'pi': current = numStr([Link]); break;
case 'e': current = numStr(Math.E); break;
}
freshNum = false;
render(current);
};

[Link] = function() {
// Simple open-paren toggle: just append '(' or ')' to expression string visually
// For full paren support we use eval-style expression building
if (!this._parenOpen) {
this._parenExpr = current;
this._parenOpen = true;
exprStr = '( ';
render(current, exprStr);
} else {
this._parenOpen = false;
}
};
}

/* ══════════════════════════════════════════
INSTANCES
══════════════════════════════════════════ */
const mc = new CalcEngine('mechDisplay', 'mechExpr');
const sc = new CalcEngine('sciDisplay', 'sciExpr');

/* ══════════════════════════════════════════
KEYBOARD SUPPORT (active calc only)
══════════════════════════════════════════ */
[Link]('keydown', function(e) {
const mechVis = [Link]('mechanical').[Link] === 'block';
const sciVis = [Link]('scientific').[Link] === 'block';
const eng = mechVis ? mc : sciVis ? sc : null;
if (!eng) return;

const k = [Link];
if (k >= '0' && k <= '9') [Link](k);
else if (k === '.') [Link]();
else if (k === '+') [Link]('+');
else if (k === '-') [Link]('-');
else if (k === '*') [Link]('*');
else if (k === '/') { [Link](); [Link]('/'); }
else if (k === 'Enter' || k === '=') [Link]();
else if (k === 'Backspace') [Link]();
else if (k === 'Escape') [Link]();
else if (k === '%') [Link]();
});
</script>

</body>
</html>

You might also like