Financial Calc code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>💰 CYBER FINANCE 9000 💰</title>
<style>
:root {
--neon-blue: #08f7fe;
--neon-pink: #fe53bb;
--matrix-green: #00ff41;
--cyber-purple: #9461fb;
--dark-matter: #0f0f1a;
--hacker-text: #20c20e;
--blood-orange: #ff5e1a;
}
body {
font-family: 'Courier New', monospace;
background: var(--dark-matter);
color: white;
margin: 0;
padding: 20px;
min-height: 100vh;
overflow-x: hidden;
}
.cyber-terminal {
max-width: 1000px;
margin: 2rem auto;
border: 3px solid var(--neon-blue);
border-radius: 0;
box-shadow: 0 0 30px var(--neon-blue);
position: relative;
overflow: hidden;
transition: transform 0.5s ease;
}
.cyber-terminal:hover {
transform: scale(1.01);
}
.cyber-header {
background: black;
padding: 1.5rem;
text-align: center;
border-bottom: 3px solid var(--neon-pink);
position: relative;
}
.cyber-header h1 {
margin: 0;
font-size: 2.5rem;
letter-spacing: 3px;
text-transform: uppercase;
background: linear-gradient(90deg, var(--neon-blue), var(--neon-pink));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 0 10px rgba(8, 247, 254, 0.5);
cursor: pointer;
}
.cyber-subheader {
font-family: 'Courier New', monospace;
color: var(--hacker-text);
margin-top: 0.5rem;
font-size: 0.9rem;
animation: glitch 2s infinite alternate;
}
@keyframes glitch {
0% { text-shadow: 2px 0 var(--neon-blue), -2px 0 var(--neon-pink); }
100% { text-shadow: -2px 0 var(--neon-blue), 2px 0 var(--neon-pink); }
}
.cyber-content {
padding: 2rem;
background: rgba(15, 15, 26, 0.9);
}
.input-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.input-group {
position: relative;
}
.input-group label {
display: block;
margin-bottom: 0.5rem;
color: var(--neon-blue);
font-family: 'Courier New', monospace;
font-size: 0.9rem;
}
.input-group input, .input-group select, .input-group textarea {
width: 100%;
padding: 10px;
background: black;
border: 1px solid var(--cyber-purple);
color: var(--matrix-green);
font-family: 'Courier New', monospace;
font-size: 1rem;
transition: all 0.3s;
}
.input-group input:focus, .input-group select:focus, .input-group textarea:focus {
outline: none;
border-color: var(--neon-blue);
box-shadow: 0 0 15px var(--neon-blue);
}
.button-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.cyber-button {
background: linear-gradient(45deg, var(--neon-pink), var(--cyber-purple));
color: white;
border: none;
padding: 12px 20px;
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
cursor: pointer;
transition: all 0.3s;
position: relative;
overflow: hidden;
}
#voice-command {
background: linear-gradient(45deg, var(--neon-blue), #00b4ff);
}
.cyber-button:hover {
transform: translateY(-3px);
box-shadow: 0 5px 20px var(--neon-pink);
}
.cyber-button::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
to bottom right,
transparent, transparent, transparent,
rgba(255,255,255,0.1), transparent, transparent
);
transform: rotate(30deg);
animation: shine 3s infinite;
}
@keyframes shine {
0% { transform: translateX(-100%) rotate(30deg); }
100% { transform: translateX(100%) rotate(30deg); }
}
.results-display {
margin-top: 2rem;
padding: 1.5rem;
background: rgba(0,0,0,0.7);
border: 1px solid var(--matrix-green);
font-family: 'Courier New', monospace;
position: relative;
}
.results-display::before {
content: '>>>';
position: absolute;
left: 10px;
top: 10px;
color: var(--matrix-green);
}
.result-item {
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px dashed rgba(0, 255, 65, 0.3);
}
.result-item:last-child {
border-bottom: none;
}
.result-label {
color: var(--neon-blue);
display: inline-block;
min-width: 200px;
}
.result-value {
color: var(--matrix-green);
font-weight: bold;
}
.amortization-table {
margin-top: 2rem;
max-height: 300px;
overflow-y: auto;
background: rgba(0,0,0,0.7);
border: 1px solid var(--matrix-green);
padding: 1rem;
}
.amortization-table table {
width: 100%;
border-collapse: collapse;
color: var(--matrix-green);
}
.amortization-table th, .amortization-table td {
padding: 8px;
text-align: right;
border-bottom: 1px dashed rgba(0, 255, 65, 0.3);
}
.amortization-table th {
color: var(--neon-blue);
text-align: left;
}
.hologram-container {
margin-top: 2rem;
height: 300px;
background: rgba(0,0,0,0.5);
border: 1px solid var(--neon-pink);
position: relative;
}
canvas {
width: 100%;
height: 100%;
}
.ticker-tape {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: black;
color: var(--matrix-green);
padding: 10px 0;
border-top: 2px solid var(--neon-blue);
overflow: hidden;
white-space: nowrap;
}
.ticker-item {
display: inline-block;
margin-right: 50px;
font-family: 'Courier New', monospace;
animation: ticker 30s linear infinite;
}
@keyframes ticker {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
.hidden {
display: none;
}
.brutal-mode {
--neon-blue: #000000;
--neon-pink: #000000;
--matrix-green: #000000;
--cyber-purple: #000000;
--dark-matter: #ffffff;
--hacker-text: #000000;
background: #ffffff !important;
color: #000000 !important;
}
.brutal-mode .cyber-button {
background: #000000 !important;
color: #ffffff !important;
border: 3px solid #000000 !important;
}
.brutal-mode .input-group input, .brutal-mode .input-group select, .brutal-mode .input-group textarea {
background: #ffffff !important;
color: #000000 !important;
border: 3px solid #000000 !important;
}
</style>
</head>
<body>
<div class="cyber-terminal">
<div class="cyber-header">
<h1 id="title">CYBER FINANCE 9000</h1>
<p class="cyber-subheader">FINANCIAL TERMINAL v4.20</p>
</div>
<div class="cyber-content">
<div class="input-grid">
<div class="input-group">
<label for="principal">PRINCIPAL/PV ($):</label>
<input type="number" id="principal" placeholder="Initial investment">
</div>
<div class="input-group">
<label for="future-value">FUTURE VALUE ($):</label>
<input type="number" id="future-value" placeholder="Future value">
</div>
<div class="input-group">
<label for="rate">INTEREST RATE (%):</label>
<input type="number" id="rate" placeholder="Annual rate" step="0.01">
</div>
<div class="input-group">
<label for="years">PERIODS (Years):</label>
<input type="number" id="years" placeholder="Years">
</div>
<div class="input-group">
<label for="payment">PAYMENT ($):</label>
<input type="number" id="payment" placeholder="Periodic payment">
</div>
<div class="input-group">
<label for="crypto">CRYPTO MODE:</label>
<select id="crypto" class="cyber-select">
<option value="none">Disabled</option>
<option value="bitcoin">Bitcoin (High Volatility)</option>
<option value="ethereum">Ethereum (Medium Volatility)</option>
<option value="dogecoin">Meme Coins (Extreme Volatility)</option>
</select>
</div>
<div class="input-group">
<label for="cash-flows">CASH FLOWS (Comma-separated):</label>
<textarea id="cash-flows" placeholder="e.g., -1000,500,500,500"></textarea>
</div>
<div class="input-group">
<label for="depreciation">DEPRECIATION:</label>
<select id="depreciation" class="cyber-select">
<option value="none">None</option>
<option value="straight-line">Straight-Line</option>
<option value="double-declining">Double-Declining</option>
</select>
</div>
<div class="input-group">
<label for="arithmetic">ARITHMETIC:</label>
<input type="text" id="arithmetic" placeholder="e.g., 100 + 200 * 3">
</div>
</div>
<div class="button-group">
<button class="cyber-button" id="solve-tvm">SOLVE TVM</button>
<button class="cyber-button" id="calculate-amortization">AMORTIZATION</button>
<button class="cyber-button" id="calculate-npv-irr">NPV/IRR</button>
<button class="cyber-button" id="calculate-depreciation">DEPRECIATION</button>
<button class="cyber-button" id="calculate-arithmetic">ARITHMETIC</button>
<button class="cyber-button" id="memory-store">M+</button>
<button class="cyber-button" id="memory-recall">MR</button>
<button class="cyber-button" id="memory-clear">MC</button>
<button class="cyber-button" id="voice-command">🎤 VOICE INPUT</button>
</div>
<div class="results-display" id="results">
<div class="result-item">
<span class="result-label">PRESENT VALUE:</span>
<span class="result-value" id="result-pv">$0.00</span>
</div>
<div class="result-item">
<span class="result-label">FUTURE VALUE:</span>
<span class="result-value" id="result-fv">$0.00</span>
</div>
<div class="result-item">
<span class="result-label">PAYMENT:</span>
<span class="result-value" id="result-pmt">$0.00</span>
</div>
<div class="result-item">
<span class="result-label">INTEREST RATE:</span>
<span class="result-value" id="result-rate">0.00%</span>
</div>
<div class="result-item">
<span class="result-label">PERIODS:</span>
<span class="result-value" id="result-years">0</span>
</div>
<div class="result-item">
<span class="result-label">NPV:</span>
<span class="result-value" id="result-npv">$0.00</span>
</div>
<div class="result-item">
<span class="result-label">IRR:</span>
<span class="result-value" id="result-irr">0.00%</span>
</div>
<div class="result-item">
<span class="result-label">DEPRECIATION/YEAR:</span>
<span class="result-value" id="result-depreciation">$0.00</span>
</div>
<div class="result-item">
<span class="result-label">ARITHMETIC RESULT:</span>
<span class="result-value" id="result-arithmetic">0</span>
</div>
<div class="result-item hidden" id="crypto-result">
<span class="result-label">CRYPTO ADJUSTMENT:</span>
<span class="result-value" id="crypto-value">0.00%</span>
</div>
</div>
<div class="amortization-table hidden" id="amortization-table">
<table>
<thead>
<tr>
<th>Period</th>
<th>Payment</th>
<th>Interest</th>
<th>Principal</th>
<th>Balance</th>
</tr>
</thead>
<tbody id="amortization-body"></tbody>
</table>
</div>
<div class="hologram-container">
<canvas id="hologram-chart"></canvas>
</div>
</div>
</div>
<div class="ticker-tape" id="ticker">
<div class="ticker-item">BTC: $68,420 ↑ 4.20%</div>
<div class="ticker-item">ETH: $3,333 ↑ 6.9%</div>
<div class="ticker-item">DOGE: $0.69 ↑ 420%</div>
<div class="ticker-item">NASDAQ: 16,942 ↑ 0.69%</div>
<div class="ticker-item">GOLD: $2,222 ↓ 1.11%</div>
<div class="ticker-item">OIL: $88.88 ↑ 8.8%</div>
</div>
<script>
// Inline Chart.js v3.9.1 (abridged for brevity)
// Full minified Chart.js code is ~200 KB. To include it:
// 1. Download from https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js
// 2. Copy the content into a <script> tag here
// Alternatively, use this placeholder and I'll provide the full code separately
// Placeholder: !function(t,e){"object"==typeof exports... (full Chart.js code)
// For now, assuming Chart.js is included. Contact me for the full inline code if needed.
// Financial Calculator Logic
let konami = '';
let brutalMode = false;
let memory = 0;
// Easter Eggs
document.getElementById('title').addEventListener('click', function(e) {
if (e.shiftKey) {
brutalMode = !brutalMode;
document.body.classList.toggle('brutal-mode', brutalMode);
playSound(0.3);
}
});
document.addEventListener('keydown', (e) => {
konami += e.key;
if (konami.includes('idkfa')) {
document.body.style.background = 'radial-gradient(circle, #000000 0%, #1a0f33 100%)';
const devModeItem = document.createElement('div');
devModeItem.className = 'result-item';
devModeItem.innerHTML = '<span style="color:var(--blood-orange)">>> DEVELOPER MODE ACTIVATED <<</span>';
document.getElementById('results').appendChild(devModeItem);
playSound(0.5);
}
});
// Initialize Chart
const ctx = document.getElementById('hologram-chart').getContext('2d');
let chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Year 1', 'Year 2', 'Year 3', 'Year 4', 'Year 5'],
datasets: [{
label: 'Projection',
data: [0, 0, 0, 0, 0],
borderColor: 'rgba(8, 247, 254, 1)',
backgroundColor: 'rgba(8, 247, 254, 0.1)',
borderWidth: 2,
tension: 0.4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false }
},
scales: {
y: { grid: { color: 'rgba(0, 255, 65, 0.1)' }, ticks: { color: 'rgba(0, 255, 65, 0.8)' } },
x: { grid: { color: 'rgba(0, 255, 65, 0.1)' }, ticks: { color: 'rgba(0, 255, 65, 0.8)' } }
}
}
});
// Sound Effect
function playSound(volume) {
const audio = new Audio();
audio.src = 'data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YU...';
audio.volume = volume;
audio.play();
}
// Input Validation
function validateInputs(inputs) {
for (let [id, name] of Object.entries(inputs)) {
let value = parseFloat(document.getElementById(id).value);
if (isNaN(value) || value < 0) {
alert(`${name} must be a non-negative number.`);
return false;
}
}
return true;
}
// TVM Solver
document.getElementById('solve-tvm').addEventListener('click', function() {
let pv = parseFloat(document.getElementById('principal').value) || 0;
let fv = parseFloat(document.getElementById('future-value').value) || 0;
let rate = parseFloat(document.getElementById('rate').value) / 100 || 0;
let n = parseFloat(document.getElementById('years').value) || 0;
let pmt = parseFloat(document.getElementById('payment').value) || 0;
let cryptoMode = document.getElementById('crypto').value;
if (!validateInputs({ principal: 'Present Value', rate: 'Interest Rate', years: 'Periods' })) return;
// Crypto Volatility Adjustment
let cryptoVolatility = 0;
switch (cryptoMode) {
case 'bitcoin': cryptoVolatility = 0.5; break; // 50% volatility
case 'ethereum': cryptoVolatility = 0.3; break; // 30% volatility
case 'dogecoin': cryptoVolatility = 0.8; break; // 80% volatility
}
let effectiveRate = rate + (cryptoVolatility * Math.random() * (Math.random() > 0.5 ? 1 : -1));
// Solve TVM (simplified for one unknown)
let result;
if (pv && rate && n && !fv && !pmt) {
// Calculate FV
fv = pv * Math.pow(1 + effectiveRate, n);
result = { pv, fv, rate: effectiveRate * 100, n, pmt };
} else if (fv && rate && n && !pv && !pmt) {
// Calculate PV
pv = fv / Math.pow(1 + effectiveRate, n);
result = { pv, fv, rate: effectiveRate * 100, n, pmt };
} else if (pv && fv && n && !rate && !pmt) {
// Calculate Rate
rate = (Math.pow(fv / pv, 1 / n) - 1) * 100;
result = { pv, fv, rate, n, pmt };
} else if (pv && fv && rate && !n && !pmt) {
// Calculate Periods
n = Math.log(fv / pv) / Math.log(1 + effectiveRate);
result = { pv, fv, rate: effectiveRate * 100, n, pmt };
} else if (pv && rate && n && pmt && !fv) {
// Calculate FV with payments
fv = pv * Math.pow(1 + effectiveRate, n) + pmt * ((Math.pow(1 + effectiveRate, n) - 1) / effectiveRate);
result = { pv, fv, rate: effectiveRate * 100, n, pmt };
} else {
alert('Please provide exactly 4 known TVM values (PV, FV, Rate, Periods, Payment).');
return;
}
// Update Results
document.getElementById('result-pv').textContent = `$${pv.toLocaleString('en-US', { minimumFractionDigits: 2 })}`;
document.getElementById('result-fv').textContent = `$${fv.toLocaleString('en-US', { minimumFractionDigits: 2 })}`;
document.getElementById('result-pmt').textContent = `$${pmt.toLocaleString('en-US', { minimumFractionDigits: 2 })}`;
document.getElementById('result-rate').textContent = `${rate.toFixed(2)}%`;
document.getElementById('result-years').textContent = n.toFixed(2);
document.getElementById('crypto-result').classList.toggle('hidden', cryptoMode === 'none');
document.getElementById('crypto-value').textContent = `${(cryptoVolatility * 100).toFixed(2)}%`;
// Update Chart
updateChart(pv, effectiveRate, n, pmt);
playSound(0.3);
});
// Amortization
document.getElementById('calculate-amortization').addEventListener('click', function() {
let pv = parseFloat(document.getElementById('principal').value) || 0;
let rate = parseFloat(document.getElementById('rate').value) / 100 / 12 || 0; // Monthly rate
let n = parseFloat(document.getElementById('years').value) * 12 || 0; // Months
if (!validateInputs({ principal: 'Present Value', rate: 'Interest Rate', years: 'Periods' })) return;
// Calculate monthly payment
let pmt = pv * (rate / (1 - Math.pow(1 + rate, -n)));
let balance = pv;
let tableBody = document.getElementById('amortization-body');
tableBody.innerHTML = '';
for (let i = 1; i <= Math.min(n, 360); i++) { // Limit to 30 years
let interest = balance * rate;
let principal = pmt - interest;
balance -= principal;
let row = document.createElement('tr');
row.innerHTML = `
<td>${i}</td>
<td>$${pmt.toFixed(2)}</td>
<td>$${interest.toFixed(2)}</td>
<td>$${principal.toFixed(2)}</td>
<td>$${balance.toFixed(2)}</td>
`;
tableBody.appendChild(row);
}
document.getElementById('amortization-table').classList.remove('hidden');
document.getElementById('result-pmt').textContent = `$${pmt.toLocaleString('en-US', { minimumFractionDigits: 2 })}`;
updateChart(pv, rate * 12, n / 12, pmt, 'amortization');
playSound(0.3);
});
// NPV and IRR
document.getElementById('calculate-npv-irr').addEventListener('click', function() {
let cashFlows = document.getElementById('cash-flows').value.split(',').map(Number);
let rate = parseFloat(document.getElementById('rate').value) / 100 || 0;
if (cashFlows.some(isNaN)) {
alert('Cash flows must be comma-separated numbers.');
return;
}
// Calculate NPV
let npv = cashFlows.reduce((sum, cf, i) => sum + cf / Math.pow(1 + rate, i), 0);
// Calculate IRR (Newton-Raphson method)
let irr = 0.1; // Initial guess
for (let i = 0; i < 100; i++) {
let npv = cashFlows.reduce((sum, cf, j) => sum + cf / Math.pow(1 + irr, j), 0);
let npvPrime = cashFlows.reduce((sum, cf, j) => sum - j * cf / Math.pow(1 + irr, j + 1), 0);
irr -= npv / npvPrime;
if (Math.abs(npv) < 0.01) break;
}
document.getElementById('result-npv').textContent = `$${npv.toLocaleString('en-US', { minimumFractionDigits: 2 })}`;
document.getElementById('result-irr').textContent = `${(irr * 100).toFixed(2)}%`;
updateChart(0, rate, cashFlows.length - 1, 0, 'cash-flows', cashFlows);
playSound(0.3);
});
// Depreciation
document.getElementById('calculate-depreciation').addEventListener('click', function() {
let pv = parseFloat(document.getElementById('principal').value) || 0;
let n = parseFloat(document.getElementById('years').value) || 0;
let method = document.getElementById('depreciation').value;
if (!validateInputs({ principal: 'Asset Value', years: 'Periods' })) return;
let annualDepreciation = 0;
if (method === 'straight-line') {
annualDepreciation = pv / n;
} else if (method === 'double-declining') {
annualDepreciation = (2 / n) * pv;
}
document.getElementById('result-depreciation').textContent = `$${annualDepreciation.toLocaleString('en-US', { minimumFractionDigits: 2 })}`;
updateChart(pv, 0, n, 0, 'depreciation', [], method);
playSound(0.3);
});
// Arithmetic
document.getElementById('calculate-arithmetic').addEventListener('click', function() {
let expression = document.getElementById('arithmetic').value;
try {
let result = eval(expression); // Note: eval is risky; consider a safer parser for production
document.getElementById('result-arithmetic').textContent = result.toFixed(2);
playSound(0.3);
} catch (e) {
alert('Invalid arithmetic expression.');
}
});
// Memory Functions
document.getElementById('memory-store').addEventListener('click', function() {
let pv = parseFloat(document.getElementById('result-pv').textContent.replace(/[$,]/g, '')) || 0;
memory = pv;
playSound(0.2);
});
document.getElementById('memory-recall').addEventListener('click', function() {
document.getElementById('principal').value = memory;
playSound(0.2);
});
document.getElementById('memory-clear').addEventListener('click', function() {
memory = 0;
playSound(0.2);
});
// Voice Input
document.getElementById('voice-command').addEventListener('click', function() {
if (!('webkitSpeechRecognition' in window)) {
alert("Voice commands not supported in your browser");
return;
}
const recognition = new webkitSpeechRecognition();
recognition.lang = 'en-US';
recognition.interimResults = false;
recognition.onstart = function() {
document.getElementById('voice-command').textContent = "🎤 LISTENING...";
};
recognition.onresult = function(event) {
const transcript = event.results[0][0].transcript.toLowerCase();
processVoiceCommand(transcript);
};
recognition.onerror = function(event) {
document.getElementById('voice-command').textContent = "🎤 VOICE INPUT";
};
recognition.onend = function() {
document.getElementById('voice-command').textContent = "🎤 VOICE INPUT";
};
recognition.start();
});
function processVoiceCommand(transcript) {
playSound(0.2);
if (transcript.includes('principal')) {
const amount = transcript.match(/\d+/);
if (amount) document.getElementById('principal').value = amount[0];
}
if (transcript.includes('future value')) {
const amount = transcript.match(/\d+/);
if (amount) document.getElementById('future-value').value = amount[0];
}
if (transcript.includes('rate') || transcript.includes('interest')) {
const rate = transcript.match(/\d+/);
if (rate) document.getElementById('rate').value = rate[0];
}
if (transcript.includes('year') || transcript.includes('period')) {
const years = transcript.match(/\d+/);
if (years) document.getElementById('years').value = years[0];
}
if (transcript.includes('payment')) {
const pmt = transcript.match(/\d+/);
if (pmt) document.getElementById('payment').value = pmt[0];
}
if (transcript.includes('calculate') || transcript.includes('solve')) {
document.getElementById('solve-tvm').click();
}
if (transcript.includes('bitcoin') || transcript.includes('crypto')) {
document.getElementById('crypto').value = 'bitcoin';
}
}
// Update Chart
function updateChart(pv, rate, n, pmt, mode = 'tvm', cashFlows = [], depreciationMethod = '') {
let labels = [];
let data = [];
if (mode === 'tvm') {
for (let i = 1; i <= Math.min(n, 10); i++) {
labels.push(`Year ${i}`);
data.push(pv * Math.pow(1 + rate, i) + (pmt ? pmt * ((Math.pow(1 + rate, i) - 1) / rate) : 0));
}
} else if (mode === 'amortization') {
let balance = pv;
for (let i = 1; i <= Math.min(n * 12, 120); i++) {
labels.push(`Month ${i}`);
let interest = balance * rate;
let principal = pmt - interest;
balance -= principal;
data.push(balance);
}
} else if (mode === 'cash-flows') {
labels = cashFlows.map((_, i) => `Period ${i}`);
data = cashFlows;
} else if (mode === 'depreciation') {
let value = pv;
for (let i = 1; i <= Math.min(n, 10); i++) {
labels.push(`Year ${i}`);
if (depreciationMethod === 'straight-line') {
value -= pv / n;
} else {
value -= (2 / n) * value;
}
data.push(value);
}
}
chart.data.labels = labels;
chart.data.datasets[0].data = data;
chart.update();
}
// Ticker
function generateTickerItems() {
const ticker = document.getElementById('ticker');
const assets = [
{ name: 'BTC', value: 68420, change: 4.20 },
{ name: 'ETH', value: 3333, change: 6.9 },
{ name: 'DOGE', value: 0.69, change: 420 },
{ name: 'NASDAQ', value: 16942, change: 0.69 },
{ name: 'GOLD', value: 2222, change: -1.11 },
{ name: 'OIL', value: 88.88, change: 8.8 }
];
ticker.innerHTML = '';
assets.forEach(asset => {
const item = document.createElement('div');
item.className = 'ticker-item';
item.innerHTML = `${asset.name}: $${asset.value.toLocaleString()}
<span style="color:${asset.change >= 0 ? 'var(--matrix-green)' : 'var(--neon-pink)'}">
${asset.change >= 0 ? '↑' : '↓'} ${Math.abs(asset.change)}%
</span>`;
ticker.appendChild(item);
});
}
generateTickerItems();
</script>
</body>
</html>
Comments
Post a Comment