Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sizerra - Position Sizing & Risk Illustration Tool</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg-dark: #1A1625;
--bg-card: #251E35;
--bg-input: #2D2540;
--accent-purple: #8B5CF6;
--accent-purple-hover: #A78BFA;
--accent-teal: #14B8A6;
--text-primary: #F8FAFC;
--text-secondary: #CBD5E1;
--text-muted: #94A3B8;
--warning-bg: #FEF3C7;
--warning-border: #F59E0B;
--warning-text: #92400E;
--success: #10B981;
--danger: #EF4444;
}
body.light-mode {
--bg-dark: #F8FAFC;
--bg-card: #FFFFFF;
--bg-input: #F1F5F9;
--text-primary: #1E293B;
--text-secondary: #475569;
--text-muted: #64748B;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif;
background: var(--bg-dark);
color: var(--text-primary);
min-height: 100vh;
padding: 20px;
line-height: 1.6;
transition: background 0.3s, color 0.3s;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 40px;
padding: 30px 0;
position: relative;
}
.theme-toggle {
position: absolute;
top: 0;
right: 0;
background: var(--bg-card);
border: 1px solid rgba(139, 92, 246, 0.3);
border-radius: 25px;
padding: 8px 16px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s;
}
.theme-toggle:hover {
border-color: var(--accent-purple);
}
.theme-toggle span {
font-size: 1.2em;
}
.logo {
font-size: 3em;
font-weight: 800;
background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-teal) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 10px;
letter-spacing: -1px;
}
.header p {
color: var(--text-secondary);
font-size: 1.1em;
}
.currency-selector-banner {
background: var(--bg-card);
padding: 20px;
border-radius: 12px;
margin-bottom: 30px;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid rgba(139, 92, 246, 0.2);
}
.currency-selector-banner label {
color: var(--text-secondary);
font-weight: 600;
}
.currency-selector-banner select {
background: var(--bg-input);
color: var(--text-primary);
border: 1px solid rgba(139, 92, 246, 0.3);
padding: 10px 15px;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
min-width: 150px;
}
.currency-selector-banner select:focus {
outline: none;
border-color: var(--accent-purple);
}
.educational-section {
background: rgba(59, 130, 246, 0.1);
border-left: 4px solid #3B82F6;
padding: 20px;
margin-bottom: 25px;
border-radius: 8px;
}
.educational-section h3 {
color: #60A5FA;
margin-bottom: 12px;
font-size: 1.2em;
}
.educational-section p {
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 8px;
}
.disclaimer {
background: var(--warning-bg);
border-left: 4px solid var(--warning-border);
padding: 20px;
margin-bottom: 25px;
border-radius: 8px;
}
.disclaimer h3 {
color: var(--warning-text);
margin-bottom: 15px;
font-size: 1.3em;
}
.disclaimer ul {
margin: 15px 0;
padding-left: 20px;
}
.disclaimer li {
margin: 8px 0;
color: var(--warning-text);
line-height: 1.5;
}
.disclaimer .fca-notice {
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid var(--warning-border);
font-weight: 600;
}
.disclaimer p {
color: var(--warning-text);
}
.mandatory-acknowledgement {
background: rgba(251, 191, 36, 0.1);
border: 2px solid rgba(251, 191, 36, 0.3);
padding: 15px;
margin: 25px 0;
border-radius: 8px;
}
.mandatory-acknowledgement label {
display: flex;
align-items: flex-start;
cursor: pointer;
color: var(--text-secondary);
font-weight: 500;
}
.mandatory-acknowledgement input[type="checkbox"] {
margin-right: 10px;
margin-top: 3px;
cursor: pointer;
width: 18px;
height: 18px;
accent-color: var(--accent-purple);
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 30px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
color: var(--text-secondary);
font-weight: 600;
margin-bottom: 8px;
}
.form-group input, .form-group select {
width: 100%;
padding: 12px;
background: var(--bg-input);
border: 1px solid rgba(139, 92, 246, 0.3);
border-radius: 8px;
font-size: 16px;
color: var(--text-primary);
transition: all 0.3s;
}
.form-group input:focus, .form-group select:focus {
outline: none;
border-color: var(--accent-purple);
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}
.form-group input::placeholder {
color: var(--text-muted);
}
.form-group small {
color: var(--text-muted);
font-size: 0.85em;
display: block;
margin-top: 5px;
}
.currency-group {
display: flex;
gap: 10px;
}
.currency-group select {
flex: 0 0 100px;
}
.currency-group input {
flex: 1;
}
.button-group {
display: flex;
gap: 15px;
margin: 30px 0;
}
.btn {
flex: 1;
padding: 15px;
border: none;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.btn:disabled {
background: #374151;
cursor: not-allowed;
opacity: 0.5;
}
.btn-primary {
background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-teal) 100%);
color: white;
}
.btn-primary:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4);
}
.btn-secondary {
background: var(--bg-card);
color: var(--text-primary);
border: 1px solid rgba(139, 92, 246, 0.3);
}
.btn-secondary:hover {
background: var(--bg-input);
border-color: var(--accent-purple);
}
.btn-small {
padding: 8px 15px;
font-size: 14px;
flex: none;
min-width: 120px;
}
.result-warning {
background: rgba(251, 191, 36, 0.1);
border: 2px solid rgba(251, 191, 36, 0.4);
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
text-align: center;
font-weight: 600;
color: #FCD34D;
}
.results {
display: none;
background: var(--bg-card);
padding: 30px;
border-radius: 15px;
margin-top: 30px;
border: 1px solid rgba(139, 92, 246, 0.2);
}
.results.show {
display: block;
}
.results h2 {
color: var(--accent-purple);
margin-bottom: 20px;
text-align: center;
font-size: 2em;
}
.results-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 20px;
}
.result-card {
background: var(--bg-input);
padding: 20px;
border-radius: 10px;
border: 1px solid rgba(139, 92, 246, 0.2);
transition: all 0.3s;
}
.result-card:hover {
border-color: var(--accent-purple);
transform: translateY(-2px);
}
.result-card h3 {
color: var(--text-muted);
font-size: 0.9em;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.result-card .value {
color: var(--text-primary);
font-size: 1.8em;
font-weight: bold;
margin: 10px 0;
}
.result-card small {
color: var(--text-muted);
font-size: 0.85em;
}
.scenarios {
margin-top: 30px;
padding: 25px;
background: var(--bg-card);
border-radius: 10px;
border: 1px solid rgba(139, 92, 246, 0.2);
}
.scenarios h3 {
color: var(--accent-purple);
margin-bottom: 15px;
font-size: 1.5em;
}
.scenarios-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
margin-top: 15px;
}
.scenario-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
background: var(--bg-input);
border-radius: 8px;
border: 1px solid rgba(139, 92, 246, 0.2);
}
.scenario-item button {
padding: 6px 12px;
background: var(--accent-purple);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
transition: all 0.2s;
}
.scenario-item button:hover {
background: var(--accent-purple-hover);
}
.scenario-item .delete {
background: var(--danger);
margin-left: 5px;
}
.scenario-item .delete:hover {
background: #DC2626;
}
.about-section {
display: none;
background: var(--bg-card);
padding: 40px;
border-radius: 15px;
margin: 30px 0;
border: 1px solid rgba(139, 92, 246, 0.2);
}
.about-section.show {
display: block;
}
.about-section h2 {
color: var(--accent-purple);
margin-bottom: 20px;
font-size: 2em;
}
.about-section h3 {
color: var(--accent-teal);
margin-top: 25px;
margin-bottom: 12px;
font-size: 1.3em;
}
.about-section p {
color: var(--text-secondary);
line-height: 1.8;
margin-bottom: 15px;
}
.about-section ul {
color: var(--text-secondary);
margin: 15px 0;
padding-left: 30px;
}
.about-section li {
margin: 8px 0;
line-height: 1.6;
}
.about-section strong {
color: var(--text-primary);
}
.stripe-button {
display: inline-block;
background: linear-gradient(135deg, #635BFF 0%, #00D4FF 100%);
color: white;
padding: 15px 30px;
border-radius: 10px;
text-decoration: none;
font-weight: 700;
margin-top: 20px;
transition: all 0.3s;
box-shadow: 0 4px 15px rgba(99, 91, 255, 0.4);
}
.stripe-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(99, 91, 255, 0.6);
}
footer {
text-align: center;
margin-top: 60px;
padding: 30px 20px;
color: var(--text-muted);
font-size: 0.9em;
border-top: 1px solid rgba(139, 92, 246, 0.2);
}
footer p {
margin: 8px 0;
}
footer a {
color: var(--accent-purple);
text-decoration: none;
font-weight: 600;
transition: color 0.2s;
}
footer a:hover {
color: var(--accent-purple-hover);
}
.advanced-toggle {
margin: 20px 0;
padding: 15px;
background: var(--bg-card);
border-radius: 8px;
cursor: pointer;
border: 1px solid rgba(139, 92, 246, 0.2);
transition: all 0.2s;
}
.advanced-toggle:hover {
border-color: var(--accent-purple);
background: var(--bg-input);
}
.advanced-section {
display: none;
margin-top: 10px;
padding: 15px;
background: var(--bg-input);
border-radius: 8px;
border: 1px solid rgba(139, 92, 246, 0.2);
}
.advanced-section.show {
display: block;
}
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr;
}
.container {
padding: 10px;
}
.logo {
font-size: 2em;
}
.button-group {
flex-direction: column;
}
.currency-selector-banner {
flex-direction: column;
gap: 15px;
text-align: center;
}
.theme-toggle {
position: static;
margin: 0 auto 20px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="theme-toggle" onclick="toggleTheme()">
<span id="themeIcon">🌙</span>
<span id="themeText" style="color: var(--text-secondary); font-size: 0.9em;">Dark</span>
</div>
<div class="logo">Sizerra</div>
<p>Position Sizing & Risk Illustration Tool</p>
</div>
<div class="currency-selector-banner">
<label>🌍 Your Account Currency:</label>
<select id="accountCurrency" onchange="handleAccountCurrencyChange()">
<option value="USD">🇺🇸 USD - US Dollar</option>
<option value="EUR">🇪🇺 EUR - Euro</option>
<option value="GBP">🇬🇧 GBP - British Pound</option>
</select>
</div>
<div class="educational-section">
<h3>📘 How This Tool Should Be Used</h3>
<p>This calculator is designed to help users understand how position sizing and transaction costs affect risk exposure.</p>
<p><strong>It does not determine whether a trade is suitable or appropriate.</strong></p>
<p>Users should independently evaluate their own financial situation before trading.</p>
</div>
<div class="disclaimer">
<h3>⚠️ Important Disclaimers</h3>
<p>Please read carefully before using this tool:</p>
<ul>
<li><strong>No Financial Advice:</strong> This calculator is an educational tool only and does <strong>not</strong> provide investment advice or recommendations.</li>
<li><strong>No Suitability Assessment:</strong> This tool does not assess suitability, appropriateness, or your financial circumstances.</li>
<li><strong>Arithmetic Only:</strong> This tool performs arithmetic calculations only. It does not analyse market data, trends, or probabilities.</li>
<li><strong>No Personal Data:</strong> This tool does not collect, store, or analyse personal financial data.</li>
<li><strong>Estimates Only:</strong> All calculations are estimates and may differ from your broker's actual P&L due to spreads, slippage, and live FX rates.</li>
<li><strong>No Liability:</strong> Nothing on this site tells you whether to buy, sell, or hold any security. You are solely responsible for your own trading decisions.</li>
<li><strong>Capital at Risk:</strong> Trading capital is at risk; you may lose some or all of your investment.</li>
</ul>
<div class="fca-notice">
<p><strong>Regulatory Status:</strong> This website is not authorised by the Financial Conduct Authority (FCA) and does not provide regulated financial services.</p>
</div>
<p style="margin-top: 15px;"><strong>No Brokerage Affiliation:</strong> This tool is not affiliated with, endorsed by, or connected to Trading212 or any broker.</p>
</div>
<form id="tradeForm">
<div class="mandatory-acknowledgement">
<label>
<input type="checkbox" id="disclaimerCheck" required>
<span>I understand this tool is for educational purposes only and does not provide financial advice, recommendations, or suitability assessments. I am solely responsible for my trading decisions.</span>
</label>
</div>
<div class="grid">
<div class="form-group">
<label>Account Balance (<span id="currSymbol1">$</span>)</label>
<input type="number" id="accountBalance" step="0.01" placeholder="Enter your account balance">
<small>Illustrative example only</small>
</div>
<div class="form-group">
<label>Willing to Risk (<span id="currSymbol2">$</span>)</label>
<input type="number" id="riskAmount" step="0.01" placeholder="Enter amount you're willing to risk">
<small>Illustrative example only</small>
</div>
</div>
<div class="grid">
<div class="form-group">
<label>Entry Price</label>
<div class="currency-group">
<select id="entryCurrency">
<option value="">Select</option>
<option value="USD">USD</option>
<option value="GBP">GBP</option>
<option value="EUR">EUR</option>
</select>
<input type="number" id="entryPrice" step="0.01" placeholder="Enter price">
</div>
<small>Hypothetical entry price</small>
</div>
<div class="form-group">
<label>Stop Loss Price</label>
<input type="number" id="stopPrice" step="0.01" placeholder="Enter stop price">
<small>Hypothetical stop price</small>
</div>
</div>
<div class="grid">
<div class="form-group">
<label>Exit Price (Target) - Optional</label>
<input type="number" id="exitPrice" step="0.01" placeholder="Optional exit price">
<small>Hypothetical target price (optional)</small>
</div>
<div class="form-group">
<label>FX Rate (<span id="currSymbol3">$</span> per 1 unit of asset)</label>
<div class="currency-group">
<input type="number" id="fxRate" step="0.0001" placeholder="FX rate">
<button type="button" class="btn btn-secondary btn-small" onclick="fetchLiveRate(event)">Fetch Rate</button>
</div>
<small>Informational only - verify with your broker</small>
</div>
</div>
<div class="advanced-toggle" onclick="toggleAdvanced()">
<strong>⚙️ Advanced Settings</strong> (click to expand)
</div>
<div class="advanced-section" id="advancedSection">
<div class="form-group">
<label>FX Conversion Fee per Leg (%)</label>
<input type="number" id="fxFeePercent" step="0.01" placeholder="Enter fee %">
<small>Example based on Trading212 UK data (Feb 2026): typically 0.15% per leg for cross-currency trades. Your broker's fees may vary. Always verify with your broker.</small>
</div>
</div>
<div class="button-group">
<button type="submit" class="btn btn-primary" id="calculateBtn" disabled>Calculate Position Size</button>
<button type="button" class="btn btn-secondary" onclick="resetForm()">Reset</button>
</div>
</form>
<div id="results" class="results">
<div class="result-warning">
⚠️ These outputs are mathematical illustrations only. They are not trade recommendations.
</div>
<h2>Mathematical Results</h2>
<p style="text-align: center; margin-bottom: 20px; color: var(--text-secondary);">Calculated position size based solely on numbers you entered:</p>
<div class="results-grid" id="resultsGrid"></div>
</div>
<div class="scenarios">
<h3>📁 Saved Scenarios</h3>
<p style="color: var(--text-secondary); font-size: 0.9em;">Save different hypothetical scenarios for educational comparison</p>
<div class="button-group">
<button type="button" class="btn btn-secondary btn-small" onclick="showSaveDialog()">Save Current Scenario</button>
</div>
<div class="scenarios-list" id="scenariosList"></div>
</div>
<div id="aboutSection" class="about-section">
<h2>About Sizerra</h2>
<p>Sizerra was born from a simple observation: most trading education focuses on <em>what</em> to trade, but very few resources teach you <em>how much</em> to trade.</p>
<p>When I started trading, I made the classic mistakes - risking too much on single positions, not accounting for broker fees, and watching small losses turn into account-damaging hits because I didn't understand position sizing maths.</p>
<p>I built Sizerra as the tool I wish I'd had when I was learning. It's a simple calculator to understand the <strong>mathematical relationship</strong> between your entry, your stop loss, and your capital at risk.</p>
<h3>Why Position Sizing Matters</h3>
<p>Successful traders often succeed because they:</p>
<ul>
<li>Risk consistent, manageable amounts per trade (commonly 1-2% of capital)</li>
<li>Account for transaction costs in their risk calculations</li>
<li>Understand how position size affects their breakeven point</li>
<li>Use proper risk management to protect their accounts</li>
</ul>
<p>Sizerra illustrates these calculations through educational examples. It shows you what happens mathematically when you change your stop distance, your position size, or your risk tolerance.</p>
<h3>What Sizerra Does (and Doesn't Do)</h3>
<p><strong>Sizerra is designed for:</strong></p>
<ul>
<li>Learning position sizing arithmetic and calculations</li>
<li>Understanding how broker fees mathematically affect risk exposure</li>
<li>Visualising hypothetical risk-reward scenarios</li>
<li>Saving and comparing different educational examples</li>
<li>Practising position sizing concepts in a risk-free environment</li>
</ul>
<p><strong>Sizerra explicitly does NOT:</strong></p>
<ul>
<li>Recommend what to buy, sell, or trade</li>
<li>Assess whether any trade or strategy is suitable for you</li>
<li>Provide investment advice, financial guidance, or recommendations</li>
<li>Guarantee accuracy, trading results, or profitability</li>
<li>Replace professional financial advice or education</li>
<li>Analyse your personal financial circumstances</li>
</ul>
<h3>Important Limitations & Margin for Error</h3>
<p><strong>Please understand these critical limitations:</strong></p>
<ul>
<li><strong>Estimates Only:</strong> All calculations are approximations. Real-world results will differ due to spreads, slippage, live market conditions, and exact broker fee structures.</li>
<li><strong>No Live Data:</strong> Sizerra does not connect to brokers or access real-time market data. FX rates are informational examples only.</li>
<li><strong>Fee Assumptions:</strong> Default fee percentages are based on publicly available broker data as of February 2026. Your actual fees may be higher or lower. Always verify with your broker.</li>
<li><strong>Market Risk:</strong> No calculator can predict or eliminate market risk. Position sizing is one tool among many for managing risk.</li>
<li><strong>Not Professional Advice:</strong> This tool cannot replace professional financial advice tailored to your specific situation.</li>
</ul>
<p><strong>Always verify all calculations with your broker before executing any trade.</strong></p>
<h3>My Mission</h3>
<p>I believe every trader - whether beginner or experienced - deserves free, transparent tools to understand mathematical concepts in trading. Sizerra is completely free to use, with no ads, no data collection, and no hidden costs.</p>
<p>This is a tool I felt a lot of people starting out would have loved to have when they first began learning about trading. I hope it helps you understand position sizing as much as I wish it had helped me.</p>
<h3>Support Sizerra</h3>
<p>Sizerra is free and always will be. If you find it valuable and want to support continued development, you can contribute via Stripe. Every contribution helps keep this tool free and independent.</p>
<a href="https://buy.stripe.com/test_your_link_here" target="_blank" class="stripe-button">💳 Support Sizerra</a>
<p style="margin-top: 30px; font-size: 0.9em; color: var(--text-muted);">
<strong>Note:</strong> Replace the Stripe link above with your actual Stripe Payment Link before deploying.
</p>
<p style="margin-top: 15px; font-size: 0.9em; color: var(--text-muted);">
<strong>Contact:</strong> Questions, feedback, or bug reports? Email me at itzatreat@gmail.com
</p>
</div>
<footer>
<p><strong>Technical Note:</strong> Fee assumptions are illustrative examples based on publicly available broker fee structures (February 2026).</p>
<p>Your actual costs will vary. This tool does not have access to live brokerage data. Margin for error exists in all calculations.</p>
<p style="margin-top: 15px; font-weight: 600;">For live trading, always verify calculations with your broker's order preview before execution.</p>
<p style="margin-top: 20px;">
<a href="#" onclick="toggleAbout(); return false;">About Sizerra</a> |
<a href="https://buy.stripe.com/test_your_link_here" target="_blank">💳 Support Sizerra</a>
</p>
<p style="margin-top: 10px; font-size: 0.85em;">© 2026 Sizerra. Made for traders, by traders.</p>
</footer>
</div>
<script>
// Theme toggle functionality
function toggleTheme() {
document.body.classList.toggle('light-mode');
const isLight = document.body.classList.contains('light-mode');
document.getElementById('themeIcon').textContent = isLight ? '☀️' : '🌙';
document.getElementById('themeText').textContent = isLight ? 'Light' : 'Dark';
localStorage.setItem('theme', isLight ? 'light' : 'dark');
}
// Load saved theme
window.addEventListener('load', () => {
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'light') {
document.body.classList.add('light-mode');
document.getElementById('themeIcon').textContent = '☀️';
document.getElementById('themeText').textContent = 'Light';
}
const detectedCurrency = detectUserCurrency();
document.getElementById('accountCurrency').value = detectedCurrency;
updateCurrencySymbols(detectedCurrency);
loadSavedScenarios();
const savedCurrency = localStorage.getItem('preferredCurrency');
if (savedCurrency) {
document.getElementById('accountCurrency').value = savedCurrency;
updateCurrencySymbols(savedCurrency);
}
});
// Currency symbols map
const currencySymbols = {
'USD': '$',
'EUR': '€',
'GBP': '£'
};
// Auto-detect user's currency based on locale/timezone
function detectUserCurrency() {
try {
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
if (timezone.includes('America')) return 'USD';
if (timezone.includes('Europe')) {
if (timezone.includes('London')) return 'GBP';
return 'EUR';
}
if (timezone.includes('London')) return 'GBP';
const locale = navigator.language || navigator.userLanguage;
if (locale.includes('en-US')) return 'USD';
if (locale.includes('en-GB')) return 'GBP';
if (locale.match(/de|fr|it|es|nl|pt/)) return 'EUR';
return 'USD';
} catch (e) {
return 'USD';
}
}
function handleAccountCurrencyChange() {
const currency = document.getElementById('accountCurrency').value;
updateCurrencySymbols(currency);
localStorage.setItem('preferredCurrency', currency);
const entryCurrency = document.getElementById('entryCurrency').value;
if (entryCurrency) {
updateFxRateForCurrencies();
}
}
function updateCurrencySymbols(currency) {
const symbol = currencySymbols[currency];
document.getElementById('currSymbol1').textContent = symbol;
document.getElementById('currSymbol2').textContent = symbol;
document.getElementById('currSymbol3').textContent = symbol;
}
function toggleAbout() {
const aboutSection = document.getElementById('aboutSection');
aboutSection.classList.toggle('show');
if (aboutSection.classList.contains('show')) {
aboutSection.scrollIntoView({ behavior: 'smooth' });
} else {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
}
document.getElementById('disclaimerCheck').addEventListener('change', function() {
document.getElementById('calculateBtn').disabled = !this.checked;
});
document.getElementById('entryCurrency').addEventListener('change', function() {
updateFxRateForCurrencies();
});
function updateFxRateForCurrencies() {
const accountCurrency = document.getElementById('accountCurrency').value;
const entryCurrency = document.getElementById('entryCurrency').value;
if (!entryCurrency) return;
if (accountCurrency === entryCurrency) {
document.getElementById('fxRate').value = '1.0000';
document.getElementById('fxFeePercent').value = '0.00';
} else {
document.getElementById('fxFeePercent').value = '0.15';
fetchLiveRate();
}
}
async function fetchLiveRate(event) {
// Prevent form submission if called from button
if (event) {
event.preventDefault();
}
const accountCurrency = document.getElementById('accountCurrency').value;
const entryCurrency = document.getElementById('entryCurrency').value;
if (!entryCurrency) {
alert('Please select an entry price currency first.');
return;
}
if (accountCurrency === entryCurrency) {
document.getElementById('fxRate').value = '1.0000';
return;
}
try {
const response = await fetch(`https://api.exchangerate-api.com/v4/latest/${entryCurrency}`);
const data = await response.json();
const rate = 1 / data.rates[accountCurrency];
document.getElementById('fxRate').value = rate.toFixed(4);
} catch (error) {
console.error('Failed to fetch FX rate:', error);
alert('Could not fetch live FX rate. Please enter manually. Always verify with your broker.');
}
}
function toggleAdvanced() {
const section = document.getElementById('advancedSection');
section.classList.toggle('show');
}
document.getElementById('tradeForm').addEventListener('submit', function(e) {
e.preventDefault();
calculateTrade();
});
function calculateTrade() {
const accountCurrency = document.getElementById('accountCurrency').value;
const accountBalance = parseFloat(document.getElementById('accountBalance').value);
const riskAmount = parseFloat(document.getElementById('riskAmount').value);
const entryPrice = parseFloat(document.getElementById('entryPrice').value);
const stopPrice = parseFloat(document.getElementById('stopPrice').value);
const exitPrice = parseFloat(document.getElementById('exitPrice').value) || null;
const fxRate = parseFloat(document.getElementById('fxRate').value);
const entryCurrency = document.getElementById('entryCurrency').value;
const fxFeePercent = parseFloat(document.getElementById('fxFeePercent').value) / 100 || 0;
if (!accountBalance || !riskAmount || !entryPrice || !stopPrice || !fxRate || !entryCurrency) {
alert('Please fill in all required fields.');
return;
}
if (entryPrice <= 0 || stopPrice <= 0 || fxRate <= 0) {
alert('All prices must be positive numbers.');
return;
}
if (entryPrice === stopPrice) {
alert('Entry price and stop price cannot be the same.');
return;
}
const priceRiskPerShare = Math.abs(entryPrice - stopPrice);
const priceRiskPerShareAccount = priceRiskPerShare / fxRate;
const feeImpactPerShare = (entryPrice / fxRate) * fxFeePercent * 2;
const positionSize = riskAmount / (priceRiskPerShareAccount + feeImpactPerShare);
const finalNotionalAccount = (entryPrice * positionSize) / fxRate;
const finalFxFees = accountCurrency !== entryCurrency ? finalNotionalAccount * fxFeePercent * 2 : 0;
const priceRiskAccount = priceRiskPerShareAccount * positionSize;
const totalRiskAccount = priceRiskAccount + finalFxFees;
const riskPercent = (totalRiskAccount / accountBalance) * 100;
const feePerShare = finalFxFees / positionSize;
const feePerShareInAssetCurrency = feePerShare * fxRate;
const breakEvenPrice = entryPrice + feePerShareInAssetCurrency;
let rewardAccount = 0;
let riskRewardRatio = 0;
if (exitPrice) {
const priceGainPerShare = exitPrice - entryPrice;
const priceGainAccount = (priceGainPerShare * positionSize) / fxRate;
rewardAccount = priceGainAccount - finalFxFees;
riskRewardRatio = rewardAccount / totalRiskAccount;
}
displayResults({
positionSize: positionSize.toFixed(2),
totalRiskAccount: totalRiskAccount.toFixed(2),
riskPercent: riskPercent.toFixed(2),
priceRiskAccount: priceRiskAccount.toFixed(2),
fxFeesTotal: finalFxFees.toFixed(2),
notionalAccount: finalNotionalAccount.toFixed(2),
breakEvenPrice: breakEvenPrice.toFixed(2),
rewardAccount: exitPrice ? rewardAccount.toFixed(2) : null,
riskRewardRatio: exitPrice ? riskRewardRatio.toFixed(2) : null,
entryCurrency: entryCurrency,
accountCurrency: accountCurrency,
currencySymbol: currencySymbols[accountCurrency]
});
}
function displayResults(results) {
const resultsDiv = document.getElementById('results');
const resultsGrid = document.getElementById('resultsGrid');
let html = `
<div class="result-card">
<h3>Calculated Position Size</h3>
<div class="value">${results.positionSize}</div>
<small>shares (illustrative)</small>
</div>
<div class="result-card">
<h3>Total Capital at Risk</h3>
<div class="value">${results.currencySymbol}${results.totalRiskAccount}</div>
<small>${results.riskPercent}% of account balance</small>
</div>
<div class="result-card">
<h3>Price Movement Risk</h3>
<div class="value">${results.currencySymbol}${results.priceRiskAccount}</div>
<small>excluding fees</small>
</div>
<div class="result-card">
<h3>Estimated FX Fees</h3>
<div class="value">${results.currencySymbol}${results.fxFeesTotal}</div>
<small>round-trip (verify with broker)</small>
</div>
<div class="result-card">
<h3>Notional Position Value</h3>
<div class="value">${results.currencySymbol}${results.notionalAccount}</div>
<small>total position value</small>
</div>
<div class="result-card">
<h3>Calculated Break-Even</h3>
<div class="value">${results.entryCurrency} ${results.breakEvenPrice}</div>
<small>including estimated fees</small>
</div>
`;
if (results.rewardAccount !== null) {
html += `
<div class="result-card">
<h3>Hypothetical Reward</h3>
<div class="value">${results.currencySymbol}${results.rewardAccount}</div>
<small>at specified target price</small>
</div>
<div class="result-card">
<h3>Calculated Risk:Reward</h3>
<div class="value">1:${results.riskRewardRatio}</div>
<small>mathematical ratio only</small>
</div>
`;
}
resultsGrid.innerHTML = html;
resultsDiv.classList.add('show');
resultsDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
function resetForm() {
document.getElementById('tradeForm').reset();
document.getElementById('results').classList.remove('show');
document.getElementById('calculateBtn').disabled = true;
document.getElementById('disclaimerCheck').checked = false;
const savedCurrency = localStorage.getItem('preferredCurrency') || detectUserCurrency();
document.getElementById('accountCurrency').value = savedCurrency;
updateCurrencySymbols(savedCurrency);
}
function showSaveDialog() {
const name = prompt('Enter a name for this hypothetical scenario:');
if (name) {
saveScenario(name);
}
}
function saveScenario(name) {
const scenario = {
name: name,
accountCurrency: document.getElementById('accountCurrency').value,
accountBalance: document.getElementById('accountBalance').value,
riskAmount: document.getElementById('riskAmount').value,
entryCurrency: document.getElementById('entryCurrency').value,
entryPrice: document.getElementById('entryPrice').value,
stopPrice: document.getElementById('stopPrice').value,
exitPrice: document.getElementById('exitPrice').value,
fxRate: document.getElementById('fxRate').value,
fxFeePercent: document.getElementById('fxFeePercent').value
};
let scenarios = JSON.parse(localStorage.getItem('tradeScenarios') || '[]');
scenarios.push(scenario);
localStorage.setItem('tradeScenarios', JSON.stringify(scenarios));
loadSavedScenarios();
alert('Hypothetical scenario saved for educational comparison!');
}
function loadSavedScenarios() {
const scenarios = JSON.parse(localStorage.getItem('tradeScenarios') || '[]');
const list = document.getElementById('scenariosList');
if (scenarios.length === 0) {
list.innerHTML = '<p style="color: var(--text-muted); text-align: center;">No saved scenarios yet</p>';
return;
}
list.innerHTML = scenarios.map((scenario, index) => `
<div class="scenario-item">
<span style="color: var(--text-primary);">${scenario.name}</span>
<div>
<button onclick="loadScenario(${index})">Load</button>
<button class="delete" onclick="deleteScenario(${index})">Delete</button>
</div>
</div>
`).join('');
}
function loadScenario(index) {
const scenarios = JSON.parse(localStorage.getItem('tradeScenarios') || '[]');
const scenario = scenarios[index];
document.getElementById('accountCurrency').value = scenario.accountCurrency;
updateCurrencySymbols(scenario.accountCurrency);
document.getElementById('accountBalance').value = scenario.accountBalance;
document.getElementById('riskAmount').value = scenario.riskAmount;
document.getElementById('entryCurrency').value = scenario.entryCurrency;
document.getElementById('entryPrice').value = scenario.entryPrice;
document.getElementById('stopPrice').value = scenario.stopPrice;
document.getElementById('exitPrice').value = scenario.exitPrice;
document.getElementById('fxRate').value = scenario.fxRate;
document.getElementById('fxFeePercent').value = scenario.fxFeePercent;
alert('Hypothetical scenario loaded. Check the disclaimer box and click "Calculate Position Size" to see results.');
}
function deleteScenario(index) {
if (confirm('Delete this scenario?')) {
let scenarios = JSON.parse(localStorage.getItem('tradeScenarios') || '[]');
scenarios.splice(index, 1);
localStorage.setItem('tradeScenarios', JSON.stringify(scenarios));
loadSavedScenarios();
}
}
</script>
</body>
</html>
Leave a Reply to A WordPress Commenter Cancel reply