Compound Interest Calculator<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Instrument+Serif:ital@0;1&family=Fira+Code:wght@300;400;500&display=swap\" rel=\"stylesheet\"\/>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n <style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n :root {\n --off-white: #f0ede8;\n --tan: #b5a090;\n --cream: #fdf6dc;\n --green: #2e6b54;\n --navy: #0d1b3e;\n --card: #ffffff;\n --border: #e2ddd5;\n --radius: 12px;\n --label: #4a5568;\n }\n\n html, body {\n min-height: 100%;\n background: var(--off-white);\n font-family: 'Fira Code', monospace;\n font-size: 14px;\n -webkit-text-size-adjust: 100%;\n }\n\n body {\n padding: 28px 16px 48px;\n background-image:\n radial-gradient(ellipse 60% 40% at 10% 0%, rgba(46,107,84,0.07) 0%, transparent 60%),\n radial-gradient(ellipse 50% 40% at 90% 100%, rgba(13,27,62,0.06) 0%, transparent 60%);\n }\n\n .container { max-width: 480px; margin: 0 auto; }\n\n \/* Header *\/\n .header { margin-bottom: 22px; }\n .header h1 {\n font-family: 'Instrument Serif', serif;\n font-size: clamp(28px, 7vw, 36px);\n color: var(--navy);\n line-height: 1.1;\n }\n .header h1 em { font-style: italic; color: var(--green); }\n .header p {\n font-size: 10px;\n color: var(--tan);\n margin-top: 5px;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n }\n\n \/* Card *\/\n .card {\n background: var(--card);\n border-radius: 18px;\n padding: 20px 16px;\n border: 1px solid var(--border);\n box-shadow: 0 4px 24px rgba(13,27,62,0.07);\n }\n\n .section-label {\n font-size: 10px;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--tan);\n margin-bottom: 12px;\n padding-bottom: 7px;\n border-bottom: 1px solid var(--border);\n }\n\n .field { margin-bottom: 14px; }\n\n .field label {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n font-weight: 500;\n color: var(--label);\n letter-spacing: 0.03em;\n margin-bottom: 6px;\n }\n\n .tag-linked {\n font-size: 9px;\n font-weight: 400;\n padding: 1px 5px;\n border-radius: 20px;\n background: #eaf2ee;\n color: var(--green);\n border: 1px solid rgba(46,107,84,0.25);\n }\n\n .input-wrap {\n position: relative;\n display: flex;\n align-items: center;\n }\n\n .input-prefix, .input-suffix {\n position: absolute;\n font-size: 13px;\n color: var(--tan);\n pointer-events: none;\n z-index: 1;\n }\n .input-prefix { left: 11px; }\n .input-suffix { right: 11px; }\n\n input[type=\"number\"] {\n width: 100%;\n background: var(--cream);\n border: 1.5px solid var(--border);\n border-radius: var(--radius);\n padding: 11px 36px 11px 30px;\n font-family: 'Fira Code', monospace;\n font-size: 15px;\n color: var(--navy);\n outline: none;\n -moz-appearance: textfield;\n transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;\n }\n\n input[type=\"number\"]::-webkit-outer-spin-button,\n input[type=\"number\"]::-webkit-inner-spin-button { -webkit-appearance: none; }\n\n input[type=\"number\"]:focus {\n border-color: var(--green);\n background: #fff;\n box-shadow: 0 0 0 3px rgba(46,107,84,0.1);\n }\n\n input.linked-field:focus {\n border-color: var(--tan);\n box-shadow: 0 0 0 3px rgba(181,160,144,0.15);\n }\n\n input.just-updated {\n animation: flashCream 0.4s ease;\n }\n\n @keyframes flashCream {\n 0% { background: #e8f5ee; }\n 100% { background: var(--cream); }\n }\n\n .field-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n }\n\n .divider {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 16px 0;\n }\n .divider span {\n font-size: 9px;\n color: var(--tan);\n letter-spacing: 0.1em;\n text-transform: uppercase;\n white-space: nowrap;\n }\n .divider::before, .divider::after {\n content: '';\n flex: 1;\n height: 1px;\n background: var(--border);\n }\n\n .link-hint {\n font-size: 9px;\n color: var(--green);\n margin-top: 4px;\n opacity: 0.8;\n }\n\n .btn-calc {\n width: 100%;\n margin-top: 20px;\n padding: 15px;\n background: var(--navy);\n color: var(--cream);\n border: none;\n border-radius: var(--radius);\n font-family: 'Fira Code', monospace;\n font-size: 13px;\n letter-spacing: 0.12em;\n cursor: pointer;\n text-transform: uppercase;\n min-height: 50px;\n touch-action: manipulation;\n }\n\n .btn-calc:active { opacity: 0.85; }\n\n \/* Results *\/\n .results { margin-top: 18px; display: none; }\n .results.visible { display: block; }\n\n .result-summary {\n background: var(--navy);\n border-radius: 16px;\n padding: 20px 16px;\n }\n\n .results-title {\n font-size: 9px;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: rgba(253,246,220,0.4);\n margin-bottom: 14px;\n }\n\n .result-main .label {\n font-size: 10px;\n color: rgba(253,246,220,0.55);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n margin-bottom: 3px;\n }\n\n .result-main .value {\n font-family: 'Instrument Serif', serif;\n font-size: clamp(30px, 8vw, 42px);\n color: var(--cream);\n line-height: 1;\n margin-bottom: 16px;\n word-break: break-all;\n }\n\n .results-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 8px;\n }\n\n .result-item {\n background: rgba(253,246,220,0.05);\n border-radius: 10px;\n padding: 10px 12px;\n border: 1px solid rgba(253,246,220,0.07);\n }\n\n .result-item .label {\n font-size: 9px;\n color: rgba(253,246,220,0.45);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n margin-bottom: 3px;\n }\n\n .result-item .value {\n font-size: clamp(12px, 3.5vw, 15px);\n color: var(--cream);\n word-break: break-all;\n }\n\n .result-item .value.hl { color: #a8d5be; }\n\n .progress-bar {\n margin-top: 14px;\n height: 4px;\n background: rgba(253,246,220,0.08);\n border-radius: 99px;\n overflow: hidden;\n }\n\n .progress-fill {\n height: 100%;\n background: linear-gradient(90deg, var(--green), #a8d5be);\n border-radius: 99px;\n transition: width 0.9s cubic-bezier(0.22,1,0.36,1);\n width: 0%;\n }\n\n .progress-legend {\n display: flex;\n justify-content: space-between;\n margin-top: 5px;\n }\n\n .progress-legend span {\n font-size: 9px;\n color: rgba(253,246,220,0.3);\n }\n\n \/* Chart *\/\n .chart-card {\n margin-top: 12px;\n background: var(--card);\n border-radius: 16px;\n padding: 18px 14px;\n border: 1px solid var(--border);\n }\n\n .chart-title {\n font-size: 9px;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--tan);\n margin-bottom: 10px;\n padding-bottom: 8px;\n border-bottom: 1px solid var(--border);\n }\n\n .chart-legend {\n display: flex;\n gap: 12px;\n margin-bottom: 12px;\n flex-wrap: wrap;\n }\n\n .legend-item {\n display: flex;\n align-items: center;\n gap: 5px;\n font-size: 9px;\n color: var(--tan);\n }\n\n .legend-dot {\n width: 8px;\n height: 8px;\n border-radius: 2px;\n flex-shrink: 0;\n }\n\n .chart-wrap { position: relative; height: 200px; }\n\n \/* Table *\/\n .table-card {\n margin-top: 12px;\n background: var(--card);\n border-radius: 16px;\n border: 1px solid var(--border);\n overflow: hidden;\n }\n\n .table-header {\n padding: 14px 16px 10px;\n border-bottom: 1px solid var(--border);\n }\n\n .table-title {\n font-size: 9px;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--tan);\n }\n\n .table-scroll {\n overflow-x: auto;\n max-height: 320px;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n }\n\n table { width: 100%; border-collapse: collapse; font-size: 11px; }\n\n thead { position: sticky; top: 0; z-index: 1; }\n\n thead th {\n background: var(--off-white);\n color: var(--tan);\n font-size: 9px;\n font-weight: 500;\n letter-spacing: 0.07em;\n text-transform: uppercase;\n padding: 8px 12px;\n text-align: right;\n white-space: nowrap;\n border-bottom: 1px solid var(--border);\n }\n\n thead th:first-child { text-align: center; }\n\n tbody tr { border-bottom: 1px solid rgba(226,221,213,0.5); }\n tbody tr:last-child { border-bottom: none; }\n tbody tr:hover { background: #faf8f4; }\n tbody tr.year-end { background: rgba(46,107,84,0.04); }\n tbody tr:nth-child(even) { background: rgba(253,246,220,0.2); }\n tbody tr:nth-child(even):hover { background: #faf8f4; }\n tbody tr.year-end:nth-child(even) { background: rgba(46,107,84,0.06); }\n\n tbody td {\n padding: 8px 12px;\n color: var(--navy);\n text-align: right;\n white-space: nowrap;\n }\n\n tbody td:first-child { text-align: center; color: var(--tan); font-size: 10px; }\n tbody td.int-mo { color: var(--green); }\n tbody td.total { font-weight: 500; }\n <\/style>\n<\/head>\n<body>\n<div class=\"container\">\n\n <div class=\"header\">\n <h1>Compound<br\/><em>Interest<\/em> Calc<\/h1>\n <p>Compound investment growth projection<\/p>\n <\/div>\n\n <div class=\"card\">\n <div class=\"section-label\">Starting capital<\/div>\n\n <div class=\"field\">\n <label for=\"startAmount\">Start Amount<\/label>\n <div class=\"input-wrap\">\n <span class=\"input-prefix\">$<\/span>\n <input type=\"number\" id=\"startAmount\" inputmode=\"decimal\" placeholder=\"0.00\" min=\"0\" step=\"0.01\"\/>\n <\/div>\n <\/div>\n\n <div class=\"field\">\n <label for=\"monthlyContrib\">Monthly Additional Contribution<\/label>\n <div class=\"input-wrap\">\n <span class=\"input-prefix\">$<\/span>\n <input type=\"number\" id=\"monthlyContrib\" inputmode=\"decimal\" placeholder=\"0.00\" min=\"0\" step=\"0.01\"\/>\n <\/div>\n <\/div>\n\n <div class=\"divider\"><span>Interest rate<\/span><\/div>\n\n <div class=\"field-row\">\n <div class=\"field\">\n <label for=\"rateMonthly\">Return Rate Monthly <span class=\"tag-linked\">\u2194<\/span><\/label>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"rateMonthly\" class=\"linked-field\" inputmode=\"decimal\" placeholder=\"0.00\" min=\"0\" step=\"0.01\"\/>\n <span class=\"input-suffix\">%<\/span>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label for=\"rateAnnual\">Return Rate Annually <span class=\"tag-linked\">\u2194<\/span><\/label>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"rateAnnual\" class=\"linked-field\" inputmode=\"decimal\" placeholder=\"0.00\" min=\"0\" step=\"0.01\"\/>\n <span class=\"input-suffix\">%<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"link-hint\">\u2194 Fill one field and the other will update automatically<\/div>\n\n <div class=\"divider\"><span>Number of periods<\/span><\/div>\n\n <div class=\"field-row\">\n <div class=\"field\">\n <label for=\"months\">Months <span class=\"tag-linked\">\u2194<\/span><\/label>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"months\" class=\"linked-field\" inputmode=\"numeric\" placeholder=\"0\" min=\"0\" step=\"1\"\/>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label for=\"years\">Years <span class=\"tag-linked\">\u2194<\/span><\/label>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"years\" class=\"linked-field\" inputmode=\"decimal\" placeholder=\"0\" min=\"0\" step=\"0.01\"\/>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"link-hint\">\u2194 Fill one field and the other will update automatically<\/div>\n\n <button class=\"btn-calc\" onclick=\"calculate()\">\u2192 Calculate<\/button>\n\n \n <div class=\"results\" id=\"results\">\n <div class=\"result-summary\">\n <div class=\"results-title\">Resultado da Proje\u00e7\u00e3o<\/div>\n <div class=\"result-main\">\n <div class=\"label\">Total Final<\/div>\n <div class=\"value\" id=\"res-total\">$0.00<\/div>\n <\/div>\n <div class=\"results-grid\">\n <div class=\"result-item\">\n <div class=\"label\">Capital Inicial<\/div>\n <div class=\"value\" id=\"res-principal\">$0.00<\/div>\n <\/div>\n <div class=\"result-item\">\n <div class=\"label\">Aportes Totais<\/div>\n <div class=\"value\" id=\"res-contrib\">$0.00<\/div>\n <\/div>\n <div class=\"result-item\">\n <div class=\"label\">Juros Ganhos<\/div>\n <div class=\"value hl\" id=\"res-interest\">$0.00<\/div>\n <\/div>\n <div class=\"result-item\">\n <div class=\"label\">Retorno Total<\/div>\n <div class=\"value hl\" id=\"res-return\">0.00%<\/div>\n <\/div>\n <\/div>\n <div class=\"progress-bar\"><div class=\"progress-fill\" id=\"progress-fill\"><\/div><\/div>\n <div class=\"progress-legend\">\n <span id=\"leg-invested\">Investido: $0<\/span>\n <span id=\"leg-interest\">Juros: $0<\/span>\n <\/div>\n <\/div>\n\n <div class=\"chart-card\">\n <div class=\"chart-title\">Crescimento M\u00eas a M\u00eas<\/div>\n <div class=\"chart-legend\">\n <div class=\"legend-item\"><div class=\"legend-dot\" style=\"background:#2e6b54\"><\/div>Total<\/div>\n <div class=\"legend-item\"><div class=\"legend-dot\" style=\"background:#b5a090\"><\/div>Investido<\/div>\n <div class=\"legend-item\"><div class=\"legend-dot\" style=\"background:#a8d5be\"><\/div>Juros<\/div>\n <\/div>\n <div class=\"chart-wrap\"><canvas id=\"growthChart\"><\/canvas><\/div>\n <\/div>\n\n <div class=\"table-card\">\n <div class=\"table-header\"><div class=\"table-title\">Detalhamento M\u00eas a M\u00eas<\/div><\/div>\n <div class=\"table-scroll\">\n <table>\n <thead>\n <tr>\n <th>M\u00eas<\/th>\n <th>Contribution<\/th>\n <th>Interest\/Mo<\/th>\n <th>Total Interest<\/th>\n <th>Total<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"tableBody\"><\/tbody>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n const rateMonthlyEl = document.getElementById('rateMonthly');\n const rateAnnualEl = document.getElementById('rateAnnual');\n const monthsEl = document.getElementById('months');\n const yearsEl = document.getElementById('years');\n\n let updatingRate = false, updatingPeriod = false;\n\n function flash(el) {\n el.classList.remove('just-updated');\n void el.offsetWidth;\n el.classList.add('just-updated');\n }\n\n rateMonthlyEl.addEventListener('input', () => {\n if (updatingRate) return; updatingRate = true;\n const m = parseFloat(rateMonthlyEl.value);\n if (!isNaN(m) && m >= 0) { rateAnnualEl.value = r4((Math.pow(1+m\/100,12)-1)*100); flash(rateAnnualEl); }\n else rateAnnualEl.value = '';\n updatingRate = false;\n });\n\n rateAnnualEl.addEventListener('input', () => {\n if (updatingRate) return; updatingRate = true;\n const a = parseFloat(rateAnnualEl.value);\n if (!isNaN(a) && a >= 0) { rateMonthlyEl.value = r4((Math.pow(1+a\/100,1\/12)-1)*100); flash(rateMonthlyEl); }\n else rateMonthlyEl.value = '';\n updatingRate = false;\n });\n\n monthsEl.addEventListener('input', () => {\n if (updatingPeriod) return; updatingPeriod = true;\n const m = parseFloat(monthsEl.value);\n if (!isNaN(m) && m >= 0) { yearsEl.value = r4(m\/12); flash(yearsEl); }\n else yearsEl.value = '';\n updatingPeriod = false;\n });\n\n yearsEl.addEventListener('input', () => {\n if (updatingPeriod) return; updatingPeriod = true;\n const y = parseFloat(yearsEl.value);\n if (!isNaN(y) && y >= 0) { monthsEl.value = Math.round(y*12); flash(monthsEl); }\n else monthsEl.value = '';\n updatingPeriod = false;\n });\n\n let chartInstance = null;\n\n function calculate() {\n const P = parseFloat(document.getElementById('startAmount').value) || 0;\n const C = parseFloat(document.getElementById('monthlyContrib').value) || 0;\n const r = parseFloat(rateMonthlyEl.value) \/ 100 || 0;\n const n = parseInt(monthsEl.value) || 0;\n\n if (n === 0) { alert('Informe o per\u00edodo (meses ou anos).'); return; }\n\n const totals = [], invested = [], interests = [], monthlyInt = [];\n let balance = P, prev = P;\n\n for (let i = 1; i <= n; i++) {\n const before = prev * (1 + r);\n balance = before + C;\n const mInt = before - prev;\n const inv = P + C * i;\n const tInt = balance - inv;\n totals.push(+balance.toFixed(2));\n invested.push(+inv.toFixed(2));\n interests.push(+tInt.toFixed(2));\n monthlyInt.push(+mInt.toFixed(2));\n prev = balance;\n }\n\n const total = totals[totals.length - 1];\n const inv = P + C * n;\n const interest = total - inv;\n const retPct = inv > 0 ? (interest \/ inv) * 100 : 0;\n\n document.getElementById('res-total').textContent = fmt(total);\n document.getElementById('res-principal').textContent = fmt(P);\n document.getElementById('res-contrib').textContent = fmt(C * n);\n document.getElementById('res-interest').textContent = fmt(interest);\n document.getElementById('res-return').textContent = r4(retPct) + '%';\n document.getElementById('progress-fill').style.width = Math.min((inv\/total)*100,100) + '%';\n document.getElementById('leg-invested').textContent = 'Investido: ' + fmtS(inv);\n document.getElementById('leg-interest').textContent = 'Juros: ' + fmtS(interest);\n\n const resultsEl = document.getElementById('results');\n resultsEl.classList.add('visible');\n\n const lbls = Array.from({length: n}, (_, i) => {\n const mo = i + 1;\n if (n <= 24) return 'M' + mo;\n if (n <= 60) return mo % 3 === 0 ? 'M' + mo : '';\n return mo % 12 === 0 ? 'Ano ' + (mo\/12) : '';\n });\n\n if (chartInstance) chartInstance.destroy();\n const ctx = document.getElementById('growthChart').getContext('2d');\n const gT = ctx.createLinearGradient(0,0,0,200);\n gT.addColorStop(0,'rgba(46,107,84,0.22)'); gT.addColorStop(1,'rgba(46,107,84,0)');\n const gI = ctx.createLinearGradient(0,0,0,200);\n gI.addColorStop(0,'rgba(181,160,144,0.15)'); gI.addColorStop(1,'rgba(181,160,144,0)');\n\n chartInstance = new Chart(ctx, {\n type: 'line',\n data: {\n labels: lbls,\n datasets: [\n { label:'Total', data:totals, borderColor:'#2e6b54', backgroundColor:gT, borderWidth:2.5, pointRadius:n<=24?3:0, pointHoverRadius:4, fill:true, tension:0.4 },\n { label:'Investido',data:invested, borderColor:'#b5a090', backgroundColor:gI, borderWidth:2, pointRadius:0, pointHoverRadius:3, fill:true, tension:0.4, borderDash:[5,4] },\n { label:'Juros', data:interests, borderColor:'#a8d5be', backgroundColor:'transparent', borderWidth:1.5, pointRadius:0, pointHoverRadius:3, fill:false, tension:0.4 }\n ]\n },\n options: {\n responsive:true, maintainAspectRatio:false,\n interaction:{ mode:'index', intersect:false },\n plugins:{\n legend:{ display:false },\n tooltip:{\n backgroundColor:'#0d1b3e', titleColor:'rgba(253,246,220,0.5)', bodyColor:'#fdf6dc',\n borderColor:'rgba(253,246,220,0.1)', borderWidth:1, padding:10,\n titleFont:{family:'Fira Code',size:9}, bodyFont:{family:'Fira Code',size:11},\n callbacks:{\n title: items => { const i=items[0].dataIndex; return n<=12?`M\u00eas ${i+1}`:(i+1)%12===0?`Ano ${(i+1)\/12} (M${i+1})`:`M\u00eas ${i+1}`; },\n label: item => ` ${item.dataset.label}: ${fmt(item.raw)}`\n }\n }\n },\n scales:{\n x:{ grid:{color:'rgba(13,27,62,0.04)',drawTicks:false}, ticks:{font:{family:'Fira Code',size:8},color:'#b5a090',maxRotation:0}, border:{display:false} },\n y:{ grid:{color:'rgba(13,27,62,0.04)',drawTicks:false}, ticks:{font:{family:'Fira Code',size:8},color:'#b5a090',callback:v=>fmtS(v)}, border:{display:false} }\n }\n }\n });\n\n const tbody = document.getElementById('tableBody');\n tbody.innerHTML = '';\n const r0 = document.createElement('tr');\n r0.innerHTML = `<td>0<\/td><td>${fmt(P)}<\/td><td>\u2014<\/td><td>\u2014<\/td><td class=\"total\">${fmt(P)}<\/td>`;\n tbody.appendChild(r0);\n for (let i = 0; i < n; i++) {\n const tr = document.createElement('tr');\n if ((i+1) % 12 === 0) tr.classList.add('year-end');\n tr.innerHTML = `<td>${i+1}<\/td><td>${fmt(invested[i])}<\/td><td class=\"int-mo\">${fmt(monthlyInt[i])}<\/td><td>${fmt(interests[i])}<\/td><td class=\"total\">${fmt(totals[i])}<\/td>`;\n tbody.appendChild(tr);\n }\n\n setTimeout(() => resultsEl.scrollIntoView({behavior:'smooth',block:'nearest'}), 80);\n }\n\n function fmt(n) { return '$' + n.toLocaleString('en-US',{minimumFractionDigits:2,maximumFractionDigits:2}); }\n function fmtS(n) {\n if (n >= 1e6) return '$'+(n\/1e6).toFixed(1)+'M';\n if (n >= 1e3) return '$'+(n\/1e3).toFixed(1)+'K';\n return '$'+n.toFixed(0);\n }\n function r4(n) { return Math.round(n*10000)\/10000; }\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/one.exnessonelink.com\/a\/5h8v1o0m21\" target=\"_blank\" rel=\" noreferrer noopener\"><img fetchpriority=\"high\" decoding=\"async\" width=\"960\" height=\"150\" src=\"https:\/\/prosocialtrading.com\/wp-content\/uploads\/2026\/06\/EN_GLOBAL_C1_PRODUCTSUP_C2_T1_EXECUTION_MORE_T2_PERFORMANCE_D-3-13_STATIC_950x150_Q4_2025.jpg\" alt=\"\" class=\"wp-image-1569\" srcset=\"https:\/\/prosocialtrading.com\/wp-content\/uploads\/2026\/06\/EN_GLOBAL_C1_PRODUCTSUP_C2_T1_EXECUTION_MORE_T2_PERFORMANCE_D-3-13_STATIC_950x150_Q4_2025.jpg 960w, https:\/\/prosocialtrading.com\/wp-content\/uploads\/2026\/06\/EN_GLOBAL_C1_PRODUCTSUP_C2_T1_EXECUTION_MORE_T2_PERFORMANCE_D-3-13_STATIC_950x150_Q4_2025-300x47.jpg 300w, https:\/\/prosocialtrading.com\/wp-content\/uploads\/2026\/06\/EN_GLOBAL_C1_PRODUCTSUP_C2_T1_EXECUTION_MORE_T2_PERFORMANCE_D-3-13_STATIC_950x150_Q4_2025-768x120.jpg 768w, https:\/\/prosocialtrading.com\/wp-content\/uploads\/2026\/06\/EN_GLOBAL_C1_PRODUCTSUP_C2_T1_EXECUTION_MORE_T2_PERFORMANCE_D-3-13_STATIC_950x150_Q4_2025-18x3.jpg 18w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Compound Interest Calculator CompoundInterest Calc Compound investment growth projection Starting capital Start Amount $ Monthly Additional Contribution $ Interest rate Return Rate Monthly \u2194 % Return Rate Annually \u2194 % \u2194 Fill one field and the other will update automatically Number of periods Months \u2194 Years \u2194 \u2194 Fill one field and the other will […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1531","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/pages\/1531","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/comments?post=1531"}],"version-history":[{"count":15,"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/pages\/1531\/revisions"}],"predecessor-version":[{"id":1670,"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/pages\/1531\/revisions\/1670"}],"wp:attachment":[{"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/media?parent=1531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1531,"date":"2026-06-05T13:51:01","date_gmt":"2026-06-05T13:51:01","guid":{"rendered":"https:\/\/prosocialtrading.com\/?page_id=1531"},"modified":"2026-07-19T11:31:08","modified_gmt":"2026-07-19T11:31:08","slug":"calculator","status":"publish","type":"page","link":"https:\/\/prosocialtrading.com\/pt\/calculator\/","title":{"rendered":"Calculator"},"content":{"rendered":"\n\n\n \n \n Compound Interest Calculator<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Instrument+Serif:ital@0;1&family=Fira+Code:wght@300;400;500&display=swap\" rel=\"stylesheet\"\/>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n <style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n :root {\n --off-white: #f0ede8;\n --tan: #b5a090;\n --cream: #fdf6dc;\n --green: #2e6b54;\n --navy: #0d1b3e;\n --card: #ffffff;\n --border: #e2ddd5;\n --radius: 12px;\n --label: #4a5568;\n }\n\n html, body {\n min-height: 100%;\n background: var(--off-white);\n font-family: 'Fira Code', monospace;\n font-size: 14px;\n -webkit-text-size-adjust: 100%;\n }\n\n body {\n padding: 28px 16px 48px;\n background-image:\n radial-gradient(ellipse 60% 40% at 10% 0%, rgba(46,107,84,0.07) 0%, transparent 60%),\n radial-gradient(ellipse 50% 40% at 90% 100%, rgba(13,27,62,0.06) 0%, transparent 60%);\n }\n\n .container { max-width: 480px; margin: 0 auto; }\n\n \/* Header *\/\n .header { margin-bottom: 22px; }\n .header h1 {\n font-family: 'Instrument Serif', serif;\n font-size: clamp(28px, 7vw, 36px);\n color: var(--navy);\n line-height: 1.1;\n }\n .header h1 em { font-style: italic; color: var(--green); }\n .header p {\n font-size: 10px;\n color: var(--tan);\n margin-top: 5px;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n }\n\n \/* Card *\/\n .card {\n background: var(--card);\n border-radius: 18px;\n padding: 20px 16px;\n border: 1px solid var(--border);\n box-shadow: 0 4px 24px rgba(13,27,62,0.07);\n }\n\n .section-label {\n font-size: 10px;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--tan);\n margin-bottom: 12px;\n padding-bottom: 7px;\n border-bottom: 1px solid var(--border);\n }\n\n .field { margin-bottom: 14px; }\n\n .field label {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n font-weight: 500;\n color: var(--label);\n letter-spacing: 0.03em;\n margin-bottom: 6px;\n }\n\n .tag-linked {\n font-size: 9px;\n font-weight: 400;\n padding: 1px 5px;\n border-radius: 20px;\n background: #eaf2ee;\n color: var(--green);\n border: 1px solid rgba(46,107,84,0.25);\n }\n\n .input-wrap {\n position: relative;\n display: flex;\n align-items: center;\n }\n\n .input-prefix, .input-suffix {\n position: absolute;\n font-size: 13px;\n color: var(--tan);\n pointer-events: none;\n z-index: 1;\n }\n .input-prefix { left: 11px; }\n .input-suffix { right: 11px; }\n\n input[type=\"number\"] {\n width: 100%;\n background: var(--cream);\n border: 1.5px solid var(--border);\n border-radius: var(--radius);\n padding: 11px 36px 11px 30px;\n font-family: 'Fira Code', monospace;\n font-size: 15px;\n color: var(--navy);\n outline: none;\n -moz-appearance: textfield;\n transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;\n }\n\n input[type=\"number\"]::-webkit-outer-spin-button,\n input[type=\"number\"]::-webkit-inner-spin-button { -webkit-appearance: none; }\n\n input[type=\"number\"]:focus {\n border-color: var(--green);\n background: #fff;\n box-shadow: 0 0 0 3px rgba(46,107,84,0.1);\n }\n\n input.linked-field:focus {\n border-color: var(--tan);\n box-shadow: 0 0 0 3px rgba(181,160,144,0.15);\n }\n\n input.just-updated {\n animation: flashCream 0.4s ease;\n }\n\n @keyframes flashCream {\n 0% { background: #e8f5ee; }\n 100% { background: var(--cream); }\n }\n\n .field-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n }\n\n .divider {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 16px 0;\n }\n .divider span {\n font-size: 9px;\n color: var(--tan);\n letter-spacing: 0.1em;\n text-transform: uppercase;\n white-space: nowrap;\n }\n .divider::before, .divider::after {\n content: '';\n flex: 1;\n height: 1px;\n background: var(--border);\n }\n\n .link-hint {\n font-size: 9px;\n color: var(--green);\n margin-top: 4px;\n opacity: 0.8;\n }\n\n .btn-calc {\n width: 100%;\n margin-top: 20px;\n padding: 15px;\n background: var(--navy);\n color: var(--cream);\n border: none;\n border-radius: var(--radius);\n font-family: 'Fira Code', monospace;\n font-size: 13px;\n letter-spacing: 0.12em;\n cursor: pointer;\n text-transform: uppercase;\n min-height: 50px;\n touch-action: manipulation;\n }\n\n .btn-calc:active { opacity: 0.85; }\n\n \/* Results *\/\n .results { margin-top: 18px; display: none; }\n .results.visible { display: block; }\n\n .result-summary {\n background: var(--navy);\n border-radius: 16px;\n padding: 20px 16px;\n }\n\n .results-title {\n font-size: 9px;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: rgba(253,246,220,0.4);\n margin-bottom: 14px;\n }\n\n .result-main .label {\n font-size: 10px;\n color: rgba(253,246,220,0.55);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n margin-bottom: 3px;\n }\n\n .result-main .value {\n font-family: 'Instrument Serif', serif;\n font-size: clamp(30px, 8vw, 42px);\n color: var(--cream);\n line-height: 1;\n margin-bottom: 16px;\n word-break: break-all;\n }\n\n .results-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 8px;\n }\n\n .result-item {\n background: rgba(253,246,220,0.05);\n border-radius: 10px;\n padding: 10px 12px;\n border: 1px solid rgba(253,246,220,0.07);\n }\n\n .result-item .label {\n font-size: 9px;\n color: rgba(253,246,220,0.45);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n margin-bottom: 3px;\n }\n\n .result-item .value {\n font-size: clamp(12px, 3.5vw, 15px);\n color: var(--cream);\n word-break: break-all;\n }\n\n .result-item .value.hl { color: #a8d5be; }\n\n .progress-bar {\n margin-top: 14px;\n height: 4px;\n background: rgba(253,246,220,0.08);\n border-radius: 99px;\n overflow: hidden;\n }\n\n .progress-fill {\n height: 100%;\n background: linear-gradient(90deg, var(--green), #a8d5be);\n border-radius: 99px;\n transition: width 0.9s cubic-bezier(0.22,1,0.36,1);\n width: 0%;\n }\n\n .progress-legend {\n display: flex;\n justify-content: space-between;\n margin-top: 5px;\n }\n\n .progress-legend span {\n font-size: 9px;\n color: rgba(253,246,220,0.3);\n }\n\n \/* Chart *\/\n .chart-card {\n margin-top: 12px;\n background: var(--card);\n border-radius: 16px;\n padding: 18px 14px;\n border: 1px solid var(--border);\n }\n\n .chart-title {\n font-size: 9px;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--tan);\n margin-bottom: 10px;\n padding-bottom: 8px;\n border-bottom: 1px solid var(--border);\n }\n\n .chart-legend {\n display: flex;\n gap: 12px;\n margin-bottom: 12px;\n flex-wrap: wrap;\n }\n\n .legend-item {\n display: flex;\n align-items: center;\n gap: 5px;\n font-size: 9px;\n color: var(--tan);\n }\n\n .legend-dot {\n width: 8px;\n height: 8px;\n border-radius: 2px;\n flex-shrink: 0;\n }\n\n .chart-wrap { position: relative; height: 200px; }\n\n \/* Table *\/\n .table-card {\n margin-top: 12px;\n background: var(--card);\n border-radius: 16px;\n border: 1px solid var(--border);\n overflow: hidden;\n }\n\n .table-header {\n padding: 14px 16px 10px;\n border-bottom: 1px solid var(--border);\n }\n\n .table-title {\n font-size: 9px;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--tan);\n }\n\n .table-scroll {\n overflow-x: auto;\n max-height: 320px;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n }\n\n table { width: 100%; border-collapse: collapse; font-size: 11px; }\n\n thead { position: sticky; top: 0; z-index: 1; }\n\n thead th {\n background: var(--off-white);\n color: var(--tan);\n font-size: 9px;\n font-weight: 500;\n letter-spacing: 0.07em;\n text-transform: uppercase;\n padding: 8px 12px;\n text-align: right;\n white-space: nowrap;\n border-bottom: 1px solid var(--border);\n }\n\n thead th:first-child { text-align: center; }\n\n tbody tr { border-bottom: 1px solid rgba(226,221,213,0.5); }\n tbody tr:last-child { border-bottom: none; }\n tbody tr:hover { background: #faf8f4; }\n tbody tr.year-end { background: rgba(46,107,84,0.04); }\n tbody tr:nth-child(even) { background: rgba(253,246,220,0.2); }\n tbody tr:nth-child(even):hover { background: #faf8f4; }\n tbody tr.year-end:nth-child(even) { background: rgba(46,107,84,0.06); }\n\n tbody td {\n padding: 8px 12px;\n color: var(--navy);\n text-align: right;\n white-space: nowrap;\n }\n\n tbody td:first-child { text-align: center; color: var(--tan); font-size: 10px; }\n tbody td.int-mo { color: var(--green); }\n tbody td.total { font-weight: 500; }\n <\/style>\n<\/head>\n<body>\n<div class=\"container\">\n\n <div class=\"header\">\n <h1>Compound<br\/><em>Interest<\/em> Calc<\/h1>\n <p>Compound investment growth projection<\/p>\n <\/div>\n\n <div class=\"card\">\n <div class=\"section-label\">Starting capital<\/div>\n\n <div class=\"field\">\n <label for=\"startAmount\">Start Amount<\/label>\n <div class=\"input-wrap\">\n <span class=\"input-prefix\">$<\/span>\n <input type=\"number\" id=\"startAmount\" inputmode=\"decimal\" placeholder=\"0.00\" min=\"0\" step=\"0.01\"\/>\n <\/div>\n <\/div>\n\n <div class=\"field\">\n <label for=\"monthlyContrib\">Monthly Additional Contribution<\/label>\n <div class=\"input-wrap\">\n <span class=\"input-prefix\">$<\/span>\n <input type=\"number\" id=\"monthlyContrib\" inputmode=\"decimal\" placeholder=\"0.00\" min=\"0\" step=\"0.01\"\/>\n <\/div>\n <\/div>\n\n <div class=\"divider\"><span>Interest rate<\/span><\/div>\n\n <div class=\"field-row\">\n <div class=\"field\">\n <label for=\"rateMonthly\">Return Rate Monthly <span class=\"tag-linked\">\u2194<\/span><\/label>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"rateMonthly\" class=\"linked-field\" inputmode=\"decimal\" placeholder=\"0.00\" min=\"0\" step=\"0.01\"\/>\n <span class=\"input-suffix\">%<\/span>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label for=\"rateAnnual\">Return Rate Annually <span class=\"tag-linked\">\u2194<\/span><\/label>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"rateAnnual\" class=\"linked-field\" inputmode=\"decimal\" placeholder=\"0.00\" min=\"0\" step=\"0.01\"\/>\n <span class=\"input-suffix\">%<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"link-hint\">\u2194 Fill one field and the other will update automatically<\/div>\n\n <div class=\"divider\"><span>Number of periods<\/span><\/div>\n\n <div class=\"field-row\">\n <div class=\"field\">\n <label for=\"months\">Months <span class=\"tag-linked\">\u2194<\/span><\/label>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"months\" class=\"linked-field\" inputmode=\"numeric\" placeholder=\"0\" min=\"0\" step=\"1\"\/>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label for=\"years\">Years <span class=\"tag-linked\">\u2194<\/span><\/label>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"years\" class=\"linked-field\" inputmode=\"decimal\" placeholder=\"0\" min=\"0\" step=\"0.01\"\/>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"link-hint\">\u2194 Fill one field and the other will update automatically<\/div>\n\n <button class=\"btn-calc\" onclick=\"calculate()\">\u2192 Calculate<\/button>\n\n \n <div class=\"results\" id=\"results\">\n <div class=\"result-summary\">\n <div class=\"results-title\">Resultado da Proje\u00e7\u00e3o<\/div>\n <div class=\"result-main\">\n <div class=\"label\">Total Final<\/div>\n <div class=\"value\" id=\"res-total\">$0.00<\/div>\n <\/div>\n <div class=\"results-grid\">\n <div class=\"result-item\">\n <div class=\"label\">Capital Inicial<\/div>\n <div class=\"value\" id=\"res-principal\">$0.00<\/div>\n <\/div>\n <div class=\"result-item\">\n <div class=\"label\">Aportes Totais<\/div>\n <div class=\"value\" id=\"res-contrib\">$0.00<\/div>\n <\/div>\n <div class=\"result-item\">\n <div class=\"label\">Juros Ganhos<\/div>\n <div class=\"value hl\" id=\"res-interest\">$0.00<\/div>\n <\/div>\n <div class=\"result-item\">\n <div class=\"label\">Retorno Total<\/div>\n <div class=\"value hl\" id=\"res-return\">0.00%<\/div>\n <\/div>\n <\/div>\n <div class=\"progress-bar\"><div class=\"progress-fill\" id=\"progress-fill\"><\/div><\/div>\n <div class=\"progress-legend\">\n <span id=\"leg-invested\">Investido: $0<\/span>\n <span id=\"leg-interest\">Juros: $0<\/span>\n <\/div>\n <\/div>\n\n <div class=\"chart-card\">\n <div class=\"chart-title\">Crescimento M\u00eas a M\u00eas<\/div>\n <div class=\"chart-legend\">\n <div class=\"legend-item\"><div class=\"legend-dot\" style=\"background:#2e6b54\"><\/div>Total<\/div>\n <div class=\"legend-item\"><div class=\"legend-dot\" style=\"background:#b5a090\"><\/div>Investido<\/div>\n <div class=\"legend-item\"><div class=\"legend-dot\" style=\"background:#a8d5be\"><\/div>Juros<\/div>\n <\/div>\n <div class=\"chart-wrap\"><canvas id=\"growthChart\"><\/canvas><\/div>\n <\/div>\n\n <div class=\"table-card\">\n <div class=\"table-header\"><div class=\"table-title\">Detalhamento M\u00eas a M\u00eas<\/div><\/div>\n <div class=\"table-scroll\">\n <table>\n <thead>\n <tr>\n <th>M\u00eas<\/th>\n <th>Contribution<\/th>\n <th>Interest\/Mo<\/th>\n <th>Total Interest<\/th>\n <th>Total<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"tableBody\"><\/tbody>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n const rateMonthlyEl = document.getElementById('rateMonthly');\n const rateAnnualEl = document.getElementById('rateAnnual');\n const monthsEl = document.getElementById('months');\n const yearsEl = document.getElementById('years');\n\n let updatingRate = false, updatingPeriod = false;\n\n function flash(el) {\n el.classList.remove('just-updated');\n void el.offsetWidth;\n el.classList.add('just-updated');\n }\n\n rateMonthlyEl.addEventListener('input', () => {\n if (updatingRate) return; updatingRate = true;\n const m = parseFloat(rateMonthlyEl.value);\n if (!isNaN(m) && m >= 0) { rateAnnualEl.value = r4((Math.pow(1+m\/100,12)-1)*100); flash(rateAnnualEl); }\n else rateAnnualEl.value = '';\n updatingRate = false;\n });\n\n rateAnnualEl.addEventListener('input', () => {\n if (updatingRate) return; updatingRate = true;\n const a = parseFloat(rateAnnualEl.value);\n if (!isNaN(a) && a >= 0) { rateMonthlyEl.value = r4((Math.pow(1+a\/100,1\/12)-1)*100); flash(rateMonthlyEl); }\n else rateMonthlyEl.value = '';\n updatingRate = false;\n });\n\n monthsEl.addEventListener('input', () => {\n if (updatingPeriod) return; updatingPeriod = true;\n const m = parseFloat(monthsEl.value);\n if (!isNaN(m) && m >= 0) { yearsEl.value = r4(m\/12); flash(yearsEl); }\n else yearsEl.value = '';\n updatingPeriod = false;\n });\n\n yearsEl.addEventListener('input', () => {\n if (updatingPeriod) return; updatingPeriod = true;\n const y = parseFloat(yearsEl.value);\n if (!isNaN(y) && y >= 0) { monthsEl.value = Math.round(y*12); flash(monthsEl); }\n else monthsEl.value = '';\n updatingPeriod = false;\n });\n\n let chartInstance = null;\n\n function calculate() {\n const P = parseFloat(document.getElementById('startAmount').value) || 0;\n const C = parseFloat(document.getElementById('monthlyContrib').value) || 0;\n const r = parseFloat(rateMonthlyEl.value) \/ 100 || 0;\n const n = parseInt(monthsEl.value) || 0;\n\n if (n === 0) { alert('Informe o per\u00edodo (meses ou anos).'); return; }\n\n const totals = [], invested = [], interests = [], monthlyInt = [];\n let balance = P, prev = P;\n\n for (let i = 1; i <= n; i++) {\n const before = prev * (1 + r);\n balance = before + C;\n const mInt = before - prev;\n const inv = P + C * i;\n const tInt = balance - inv;\n totals.push(+balance.toFixed(2));\n invested.push(+inv.toFixed(2));\n interests.push(+tInt.toFixed(2));\n monthlyInt.push(+mInt.toFixed(2));\n prev = balance;\n }\n\n const total = totals[totals.length - 1];\n const inv = P + C * n;\n const interest = total - inv;\n const retPct = inv > 0 ? (interest \/ inv) * 100 : 0;\n\n document.getElementById('res-total').textContent = fmt(total);\n document.getElementById('res-principal').textContent = fmt(P);\n document.getElementById('res-contrib').textContent = fmt(C * n);\n document.getElementById('res-interest').textContent = fmt(interest);\n document.getElementById('res-return').textContent = r4(retPct) + '%';\n document.getElementById('progress-fill').style.width = Math.min((inv\/total)*100,100) + '%';\n document.getElementById('leg-invested').textContent = 'Investido: ' + fmtS(inv);\n document.getElementById('leg-interest').textContent = 'Juros: ' + fmtS(interest);\n\n const resultsEl = document.getElementById('results');\n resultsEl.classList.add('visible');\n\n const lbls = Array.from({length: n}, (_, i) => {\n const mo = i + 1;\n if (n <= 24) return 'M' + mo;\n if (n <= 60) return mo % 3 === 0 ? 'M' + mo : '';\n return mo % 12 === 0 ? 'Ano ' + (mo\/12) : '';\n });\n\n if (chartInstance) chartInstance.destroy();\n const ctx = document.getElementById('growthChart').getContext('2d');\n const gT = ctx.createLinearGradient(0,0,0,200);\n gT.addColorStop(0,'rgba(46,107,84,0.22)'); gT.addColorStop(1,'rgba(46,107,84,0)');\n const gI = ctx.createLinearGradient(0,0,0,200);\n gI.addColorStop(0,'rgba(181,160,144,0.15)'); gI.addColorStop(1,'rgba(181,160,144,0)');\n\n chartInstance = new Chart(ctx, {\n type: 'line',\n data: {\n labels: lbls,\n datasets: [\n { label:'Total', data:totals, borderColor:'#2e6b54', backgroundColor:gT, borderWidth:2.5, pointRadius:n<=24?3:0, pointHoverRadius:4, fill:true, tension:0.4 },\n { label:'Investido',data:invested, borderColor:'#b5a090', backgroundColor:gI, borderWidth:2, pointRadius:0, pointHoverRadius:3, fill:true, tension:0.4, borderDash:[5,4] },\n { label:'Juros', data:interests, borderColor:'#a8d5be', backgroundColor:'transparent', borderWidth:1.5, pointRadius:0, pointHoverRadius:3, fill:false, tension:0.4 }\n ]\n },\n options: {\n responsive:true, maintainAspectRatio:false,\n interaction:{ mode:'index', intersect:false },\n plugins:{\n legend:{ display:false },\n tooltip:{\n backgroundColor:'#0d1b3e', titleColor:'rgba(253,246,220,0.5)', bodyColor:'#fdf6dc',\n borderColor:'rgba(253,246,220,0.1)', borderWidth:1, padding:10,\n titleFont:{family:'Fira Code',size:9}, bodyFont:{family:'Fira Code',size:11},\n callbacks:{\n title: items => { const i=items[0].dataIndex; return n<=12?`M\u00eas ${i+1}`:(i+1)%12===0?`Ano ${(i+1)\/12} (M${i+1})`:`M\u00eas ${i+1}`; },\n label: item => ` ${item.dataset.label}: ${fmt(item.raw)}`\n }\n }\n },\n scales:{\n x:{ grid:{color:'rgba(13,27,62,0.04)',drawTicks:false}, ticks:{font:{family:'Fira Code',size:8},color:'#b5a090',maxRotation:0}, border:{display:false} },\n y:{ grid:{color:'rgba(13,27,62,0.04)',drawTicks:false}, ticks:{font:{family:'Fira Code',size:8},color:'#b5a090',callback:v=>fmtS(v)}, border:{display:false} }\n }\n }\n });\n\n const tbody = document.getElementById('tableBody');\n tbody.innerHTML = '';\n const r0 = document.createElement('tr');\n r0.innerHTML = `<td>0<\/td><td>${fmt(P)}<\/td><td>\u2014<\/td><td>\u2014<\/td><td class=\"total\">${fmt(P)}<\/td>`;\n tbody.appendChild(r0);\n for (let i = 0; i < n; i++) {\n const tr = document.createElement('tr');\n if ((i+1) % 12 === 0) tr.classList.add('year-end');\n tr.innerHTML = `<td>${i+1}<\/td><td>${fmt(invested[i])}<\/td><td class=\"int-mo\">${fmt(monthlyInt[i])}<\/td><td>${fmt(interests[i])}<\/td><td class=\"total\">${fmt(totals[i])}<\/td>`;\n tbody.appendChild(tr);\n }\n\n setTimeout(() => resultsEl.scrollIntoView({behavior:'smooth',block:'nearest'}), 80);\n }\n\n function fmt(n) { return '$' + n.toLocaleString('en-US',{minimumFractionDigits:2,maximumFractionDigits:2}); }\n function fmtS(n) {\n if (n >= 1e6) return '$'+(n\/1e6).toFixed(1)+'M';\n if (n >= 1e3) return '$'+(n\/1e3).toFixed(1)+'K';\n return '$'+n.toFixed(0);\n }\n function r4(n) { return Math.round(n*10000)\/10000; }\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/one.exnessonelink.com\/a\/5h8v1o0m21\" target=\"_blank\" rel=\" noreferrer noopener\"><img fetchpriority=\"high\" decoding=\"async\" width=\"960\" height=\"150\" src=\"https:\/\/prosocialtrading.com\/wp-content\/uploads\/2026\/06\/EN_GLOBAL_C1_PRODUCTSUP_C2_T1_EXECUTION_MORE_T2_PERFORMANCE_D-3-13_STATIC_950x150_Q4_2025.jpg\" alt=\"\" class=\"wp-image-1569\" srcset=\"https:\/\/prosocialtrading.com\/wp-content\/uploads\/2026\/06\/EN_GLOBAL_C1_PRODUCTSUP_C2_T1_EXECUTION_MORE_T2_PERFORMANCE_D-3-13_STATIC_950x150_Q4_2025.jpg 960w, https:\/\/prosocialtrading.com\/wp-content\/uploads\/2026\/06\/EN_GLOBAL_C1_PRODUCTSUP_C2_T1_EXECUTION_MORE_T2_PERFORMANCE_D-3-13_STATIC_950x150_Q4_2025-300x47.jpg 300w, https:\/\/prosocialtrading.com\/wp-content\/uploads\/2026\/06\/EN_GLOBAL_C1_PRODUCTSUP_C2_T1_EXECUTION_MORE_T2_PERFORMANCE_D-3-13_STATIC_950x150_Q4_2025-768x120.jpg 768w, https:\/\/prosocialtrading.com\/wp-content\/uploads\/2026\/06\/EN_GLOBAL_C1_PRODUCTSUP_C2_T1_EXECUTION_MORE_T2_PERFORMANCE_D-3-13_STATIC_950x150_Q4_2025-18x3.jpg 18w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Compound Interest Calculator CompoundInterest Calc Compound investment growth projection Starting capital Start Amount $ Monthly Additional Contribution $ Interest rate Return Rate Monthly \u2194 % Return Rate Annually \u2194 % \u2194 Fill one field and the other will update automatically Number of periods Months \u2194 Years \u2194 \u2194 Fill one field and the other will […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1531","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/pages\/1531","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/comments?post=1531"}],"version-history":[{"count":15,"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/pages\/1531\/revisions"}],"predecessor-version":[{"id":1670,"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/pages\/1531\/revisions\/1670"}],"wp:attachment":[{"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/media?parent=1531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}