Yebbo Buy vs Rent Intelligence System<\/title>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n<style>\n :root{\n --bg:#f6f8fb;\n --card:#ffffff;\n --ink:#122033;\n --muted:#5d6b82;\n --line:#dfe6ef;\n --brand:#0a2540;\n --accent:#1f6feb;\n --good:#0f9d58;\n --bad:#c62828;\n --gold:#b8860b;\n }\n *{box-sizing:border-box}\n body{\n margin:0;\n font-family:Arial, Helvetica, sans-serif;\n color:var(--ink);\n background:var(--bg);\n line-height:1.45;\n }\n header{\n background:linear-gradient(135deg, var(--brand), #123a67);\n color:#fff;\n padding:28px 20px;\n }\n .wrap{max-width:1200px;margin:0 auto}\n h1{margin:0 0 8px;font-size:34px}\n h2{font-size:24px;margin:0 0 14px}\n h3{font-size:18px;margin:0 0 10px}\n p{margin:8px 0}\n .sub{opacity:.9;max-width:900px}\n .grid{\n display:grid;\n grid-template-columns: 360px 1fr;\n gap:20px;\n padding:20px;\n max-width:1200px;\n margin:0 auto;\n }\n .panel,.card{\n background:var(--card);\n border:1px solid var(--line);\n border-radius:16px;\n box-shadow:0 2px 10px rgba(18,32,51,.05);\n }\n .panel{padding:18px; position:sticky; top:12px; align-self:start}\n .card{padding:18px; margin-bottom:18px}\n label{display:block;font-weight:700;margin:12px 0 6px}\n input{\n width:100%;\n padding:11px 12px;\n border:1px solid #cbd5e1;\n border-radius:10px;\n font-size:15px;\n background:#fff;\n }\n .muted{color:var(--muted);font-size:13px}\n .btn{\n margin-top:16px;\n width:100%;\n border:0;\n background:var(--brand);\n color:#fff;\n border-radius:12px;\n padding:13px 14px;\n font-size:16px;\n font-weight:700;\n cursor:pointer;\n }\n .btn:hover{filter:brightness(1.05)}\n .summary{\n display:grid;\n grid-template-columns: repeat(4,1fr);\n gap:14px;\n }\n .stat{\n background:#fff;\n border:1px solid var(--line);\n border-radius:14px;\n padding:14px;\n }\n .stat .k{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}\n .stat .v{font-size:24px;font-weight:800;margin-top:6px}\n .good{color:var(--good)}\n .bad{color:var(--bad)}\n .gold{color:var(--gold)}\n .two{\n display:grid;\n grid-template-columns: 1fr 1fr;\n gap:18px;\n }\n .chartbox{\n position:relative;\n min-height:320px;\n }\n table{\n width:100%;\n border-collapse:collapse;\n font-size:14px;\n }\n th,td{\n border-bottom:1px solid var(--line);\n padding:10px 8px;\n text-align:right;\n vertical-align:top;\n }\n th:first-child, td:first-child{text-align:left}\n thead th{\n position:sticky;\n top:0;\n background:#f8fafc;\n z-index:1;\n }\n .table-wrap{\n overflow:auto;\n max-height:520px;\n border:1px solid var(--line);\n border-radius:12px;\n }\n .note{\n background:#f8fafc;\n border:1px solid var(--line);\n border-radius:12px;\n padding:12px 14px;\n font-size:14px;\n }\n ul{padding-left:18px}\n @media (max-width: 980px){\n .grid{grid-template-columns:1fr}\n .panel{position:static}\n .summary{grid-template-columns:1fr 1fr}\n .two{grid-template-columns:1fr}\n }\n<\/style>\n<\/head>\n<body>\n<header>\n <div class=\"wrap\">\n <h1>Yebbo Buy vs Rent Intelligence System<\/h1>\n <p class=\"sub\">A serious educational comparison tool that breaks down where money goes, what is saved or lost, and how results change at 5, 10, 15, 20, 25, and 30 years. It estimates buyer cash outflow, principal, interest, taxes, insurance, maintenance, home value, sale proceeds, and the renter\u2019s invested savings.<\/p>\n <\/div>\n<\/header>\n\n<div class=\"grid\">\n <aside class=\"panel\">\n <h2>Scenario Inputs<\/h2>\n\n <label>Home Price ($)<\/label>\n <input id=\"homePrice\" type=\"number\" value=\"800000\" \/>\n\n <label>Down Payment (%)<\/label>\n <input id=\"downPct\" type=\"number\" step=\"0.1\" value=\"20\" \/>\n\n <label>Mortgage Interest Rate (%)<\/label>\n <input id=\"rate\" type=\"number\" step=\"0.01\" value=\"6.75\" \/>\n\n <label>Loan Term (years)<\/label>\n <input id=\"loanTerm\" type=\"number\" value=\"30\" \/>\n\n <label>Monthly Rent ($)<\/label>\n <input id=\"rent\" type=\"number\" value=\"3500\" \/>\n\n <label>Annual Home Appreciation (%)<\/label>\n <input id=\"appreciation\" type=\"number\" step=\"0.01\" value=\"3.5\" \/>\n\n <label>Annual Investment Return (%)<\/label>\n <input id=\"investReturn\" type=\"number\" step=\"0.01\" value=\"7\" \/>\n\n <label>Property Tax (% of home value \/ year)<\/label>\n <input id=\"taxRate\" type=\"number\" step=\"0.01\" value=\"1.2\" \/>\n\n <label>Home Insurance ($ \/ year)<\/label>\n <input id=\"insurance\" type=\"number\" value=\"1800\" \/>\n\n <label>Maintenance (% of home value \/ year)<\/label>\n <input id=\"maintRate\" type=\"number\" step=\"0.01\" value=\"1\" \/>\n\n <label>Home Sale Cost (% of sale price)<\/label>\n <input id=\"sellCost\" type=\"number\" step=\"0.01\" value=\"6\" \/>\n\n <button class=\"btn\" onclick=\"runAnalysis()\">Analyze Scenario<\/button>\n <p class=\"muted\">This model is educational. It simplifies taxes and assumes the renter invests the initial down payment plus the monthly difference between ownership cost and rent.<\/p>\n <\/aside>\n\n <main>\n <section class=\"card\">\n <h2>30-Year Snapshot<\/h2>\n <div class=\"summary\">\n <div class=\"stat\">\n <div class=\"k\">Buyer total out-of-pocket<\/div>\n <div class=\"v\" id=\"buyerOutPocket\">$0<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"k\">Buyer net proceeds if sold<\/div>\n <div class=\"v gold\" id=\"buyerNetWorth\">$0<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"k\">Renter investment account<\/div>\n <div class=\"v gold\" id=\"renterInvestment\">$0<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"k\">Who leads at 30 years<\/div>\n <div class=\"v\" id=\"winner30\">\u2014<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"two\">\n <div class=\"card\">\n <h3>Where the buyer\u2019s money goes<\/h3>\n <div class=\"chartbox\"><canvas id=\"pieChart\"><\/canvas><\/div>\n <\/div>\n <div class=\"card\">\n <h3>Net value over time: buy vs rent<\/h3>\n <div class=\"chartbox\"><canvas id=\"lineChart\"><\/canvas><\/div>\n <\/div>\n <\/section>\n\n <section class=\"two\">\n <div class=\"card\">\n <h3>Buyer cost breakdown by horizon<\/h3>\n <div class=\"chartbox\"><canvas id=\"stackedChart\"><\/canvas><\/div>\n <\/div>\n <div class=\"card\">\n <h3>Saved or lost at each horizon<\/h3>\n <div class=\"chartbox\"><canvas id=\"diffChart\"><\/canvas><\/div>\n <\/div>\n <\/section>\n\n <section class=\"card\">\n <h2>5, 10, 15, 20, 25, 30-Year Breakdown<\/h2>\n <div class=\"table-wrap\">\n <table id=\"resultTable\">\n <thead>\n <tr>\n <th>Year<\/th>\n <th>Buyer Out-of-Pocket<\/th>\n <th>Principal Paid<\/th>\n <th>Interest Paid<\/th>\n <th>Taxes Paid<\/th>\n <th>Insurance Paid<\/th>\n <th>Maintenance Paid<\/th>\n <th>Home Value<\/th>\n <th>Loan Balance<\/th>\n <th>Buyer Net Proceeds<\/th>\n <th>Renter Paid<\/th>\n <th>Renter Investment<\/th>\n <th>Rent vs Buy Lead<\/th>\n <\/tr>\n <\/thead>\n <tbody><\/tbody>\n <\/table>\n <\/div>\n <\/section>\n\n <section class=\"card\">\n <h2>Interpretation<\/h2>\n <div class=\"note\" id=\"interpretation\"><\/div>\n <\/section>\n <\/main>\n<\/div>\n\n<script>\nlet pieChart, lineChart, stackedChart, diffChart;\n\nfunction fmt(n){\n const sign = n < 0 ? \"-\" : \"\";\n return sign + \"$\" + Math.abs(n).toLocaleString(undefined,{maximumFractionDigits:0});\n}\n\nfunction mortgagePayment(principal, annualRate, months){\n const r = annualRate\/12;\n if (r === 0) return principal \/ months;\n return principal * (r * Math.pow(1+r, months)) \/ (Math.pow(1+r, months)-1);\n}\n\nfunction runAnalysis(){\n const homePrice = parseFloat(document.getElementById('homePrice').value) || 0;\n const downPct = (parseFloat(document.getElementById('downPct').value) || 0)\/100;\n const rate = (parseFloat(document.getElementById('rate').value) || 0)\/100;\n const loanTerm = parseFloat(document.getElementById('loanTerm').value) || 30;\n const rent = parseFloat(document.getElementById('rent').value) || 0;\n const appreciation = (parseFloat(document.getElementById('appreciation').value) || 0)\/100;\n const investReturn = (parseFloat(document.getElementById('investReturn').value) || 0)\/100;\n const taxRate = (parseFloat(document.getElementById('taxRate').value) || 0)\/100;\n const insuranceAnnual = parseFloat(document.getElementById('insurance').value) || 0;\n const maintRate = (parseFloat(document.getElementById('maintRate').value) || 0)\/100;\n const sellCost = (parseFloat(document.getElementById('sellCost').value) || 0)\/100;\n\n const downPayment = homePrice * downPct;\n const loanAmount = homePrice - downPayment;\n const months = loanTerm * 12;\n const monthlyPAndI = mortgagePayment(loanAmount, rate, months);\n const monthlyInvestRate = investReturn \/ 12;\n\n let balance = loanAmount;\n let investment = downPayment;\n let cumPrincipal = 0, cumInterest = 0, cumTax = 0, cumIns = 0, cumMaint = 0, cumRent = 0;\n const checkpoints = [5,10,15,20,25,30];\n const rows = [];\n const labels = checkpoints.map(String);\n const buyNetVals = [];\n const rentNetVals = [];\n const diffVals = [];\n const stackedPrincipal = [], stackedInterest = [], stackedTaxes = [], stackedInsurance = [], stackedMaintenance = [];\n\n for(let m=1; m<=360; m++){\n const yearFloat = m\/12;\n const currHomeValue = homePrice * Math.pow(1+appreciation, yearFloat);\n const monthlyTax = currHomeValue * taxRate \/ 12;\n const monthlyIns = insuranceAnnual \/ 12;\n const monthlyMaint = currHomeValue * maintRate \/ 12;\n\n let interest = 0, principal = 0;\n if (m <= months && balance > 0.01){\n interest = balance * (rate\/12);\n principal = Math.min(monthlyPAndI - interest, balance);\n balance -= principal;\n }\n\n cumPrincipal += principal;\n cumInterest += interest;\n cumTax += monthlyTax;\n cumIns += monthlyIns;\n cumMaint += monthlyMaint;\n cumRent += rent;\n\n const ownerOutThisMonth = (m <= months ? monthlyPAndI : 0) + monthlyTax + monthlyIns + monthlyMaint;\n const diffToInvest = Math.max(ownerOutThisMonth - rent, 0);\n\n investment = investment * (1 + monthlyInvestRate) + diffToInvest;\n\n if (m % 12 === 0){\n const y = m\/12;\n if (checkpoints.includes(y)){\n const value = homePrice * Math.pow(1+appreciation, y);\n const saleFees = value * sellCost;\n const buyerNetProceeds = value - saleFees - balance;\n const buyerOutOfPocket = downPayment + cumPrincipal + cumInterest + cumTax + cumIns + cumMaint;\n const diffLead = investment - buyerNetProceeds;\n\n rows.push({\n year:y,\n buyerOutOfPocket,\n principal:cumPrincipal,\n interest:cumInterest,\n taxes:cumTax,\n insurance:cumIns,\n maintenance:cumMaint,\n homeValue:value,\n loanBalance:Math.max(balance,0),\n buyerNetProceeds,\n renterPaid:cumRent,\n renterInvestment:investment,\n diffLead\n });\n\n buyNetVals.push(buyerNetProceeds);\n rentNetVals.push(investment);\n diffVals.push(diffLead);\n stackedPrincipal.push(downPayment + cumPrincipal);\n stackedInterest.push(cumInterest);\n stackedTaxes.push(cumTax);\n stackedInsurance.push(cumIns);\n stackedMaintenance.push(cumMaint);\n }\n }\n }\n\n const last = rows[rows.length-1];\n\n document.getElementById('buyerOutPocket').textContent = fmt(last.buyerOutOfPocket);\n document.getElementById('buyerNetWorth').textContent = fmt(last.buyerNetProceeds);\n document.getElementById('renterInvestment').textContent = fmt(last.renterInvestment);\n\n const winnerEl = document.getElementById('winner30');\n if (last.renterInvestment > last.buyerNetProceeds){\n winnerEl.textContent = \"Rent + Invest leads by \" + fmt(last.renterInvestment - last.buyerNetProceeds);\n winnerEl.className = \"v good\";\n } else {\n winnerEl.textContent = \"Buy leads by \" + fmt(last.buyerNetProceeds - last.renterInvestment);\n winnerEl.className = \"v bad\";\n }\n\n const tbody = document.querySelector('#resultTable tbody');\n tbody.innerHTML = \"\";\n rows.forEach(r => {\n const leadText = r.diffLead > 0\n ? \"Rent + Invest by \" + fmt(r.diffLead)\n : \"Buy by \" + fmt(Math.abs(r.diffLead));\n const tr = document.createElement('tr');\n tr.innerHTML = `\n <td>${r.year}<\/td>\n <td>${fmt(r.buyerOutOfPocket)}<\/td>\n <td>${fmt(r.principal)}<\/td>\n <td>${fmt(r.interest)}<\/td>\n <td>${fmt(r.taxes)}<\/td>\n <td>${fmt(r.insurance)}<\/td>\n <td>${fmt(r.maintenance)}<\/td>\n <td>${fmt(r.homeValue)}<\/td>\n <td>${fmt(r.loanBalance)}<\/td>\n <td>${fmt(r.buyerNetProceeds)}<\/td>\n <td>${fmt(r.renterPaid)}<\/td>\n <td>${fmt(r.renterInvestment)}<\/td>\n <td class=\"${r.diffLead > 0 ? 'good':'bad'}\">${leadText}<\/td>\n `;\n tbody.appendChild(tr);\n });\n\n const buyerPieData = [\n downPayment + last.principal,\n last.interest,\n last.taxes,\n last.insurance,\n last.maintenance\n ];\n\n if (pieChart) pieChart.destroy();\n pieChart = new Chart(document.getElementById('pieChart'), {\n type:'pie',\n data:{\n labels:['Down payment + principal','Interest','Property taxes','Insurance','Maintenance'],\n datasets:[{data:buyerPieData}]\n },\n options:{\n responsive:true,\n maintainAspectRatio:false,\n plugins:{\n legend:{position:'bottom'}\n }\n }\n });\n\n if (lineChart) lineChart.destroy();\n lineChart = new Chart(document.getElementById('lineChart'), {\n type:'line',\n data:{\n labels,\n datasets:[\n {label:'Buyer net proceeds if sold', data:buyNetVals, tension:.2},\n {label:'Renter investment account', data:rentNetVals, tension:.2}\n ]\n },\n options:{\n responsive:true,\n maintainAspectRatio:false,\n plugins:{legend:{position:'bottom'}},\n scales:{\n y:{ticks:{callback:(v)=>'$'+Number(v).toLocaleString()}}\n }\n }\n });\n\n if (stackedChart) stackedChart.destroy();\n stackedChart = new Chart(document.getElementById('stackedChart'), {\n type:'bar',\n data:{\n labels,\n datasets:[\n {label:'Down payment + principal', data:stackedPrincipal},\n {label:'Interest', data:stackedInterest},\n {label:'Taxes', data:stackedTaxes},\n {label:'Insurance', data:stackedInsurance},\n {label:'Maintenance', data:stackedMaintenance}\n ]\n },\n options:{\n responsive:true,\n maintainAspectRatio:false,\n plugins:{legend:{position:'bottom'}},\n scales:{\n x:{stacked:true},\n y:{stacked:true, ticks:{callback:(v)=>'$'+Number(v).toLocaleString()}}\n }\n }\n });\n\n if (diffChart) diffChart.destroy();\n diffChart = new Chart(document.getElementById('diffChart'), {\n type:'bar',\n data:{\n labels,\n datasets:[{\n label:'Positive = Rent + Invest lead \/ Negative = Buy lead',\n data:diffVals\n }]\n },\n options:{\n responsive:true,\n maintainAspectRatio:false,\n plugins:{legend:{position:'bottom'}},\n scales:{\n y:{ticks:{callback:(v)=>'$'+Number(v).toLocaleString()}}\n }\n }\n });\n\n const best5 = rows[0];\n const best30 = rows[rows.length-1];\n const interp = [];\n interp.push(`<p><strong>At 5 years:<\/strong> ${best5.diffLead > 0 ? 'Rent + invest leads by ' + fmt(best5.diffLead) : 'Buy leads by ' + fmt(Math.abs(best5.diffLead))}. In early years, buyer payments usually lean heavily toward interest, while the renter preserves the down payment and invests cost differences.<\/p>`);\n interp.push(`<p><strong>At 30 years:<\/strong> ${best30.diffLead > 0 ? 'Rent + invest leads by ' + fmt(best30.diffLead) : 'Buy leads by ' + fmt(Math.abs(best30.diffLead))}. This compares the buyer\u2019s estimated sale proceeds after selling costs and remaining loan balance against the renter\u2019s investment account.<\/p>`);\n interp.push(`<p><strong>What the charts mean:<\/strong> the pie chart shows where the buyer\u2019s total money went by year 30. The stacked bars show how each ownership cost grows across 5-year intervals. The net-value line chart compares buyer sale proceeds with the renter\u2019s investment path. The saved\/lost chart shows which side is ahead at each horizon.<\/p>`);\n interp.push(`<p><strong>Important note:<\/strong> this version does not include income-tax deductions, HOA fees, PMI, rent inflation, or inflation-adjusted returns. Those can be added in the next version for a more advanced model.<\/p>`);\n document.getElementById('interpretation').innerHTML = interp.join('');\n}\n\nrunAnalysis();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Yebbo Buy vs Rent Intelligence System Yebbo Buy vs Rent Intelligence System A serious educational comparison tool that breaks down […]<\/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":"default","ast-page-background-enabled":"default","ast-page-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":"","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-4)","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-4)","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-4)","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-852","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/P8nzgb-dK","jetpack_likes_enabled":true,"_links":{"self":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/pages\/852","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/comments?post=852"}],"version-history":[{"count":1,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/pages\/852\/revisions"}],"predecessor-version":[{"id":853,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/pages\/852\/revisions\/853"}],"wp:attachment":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/media?parent=852"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":852,"date":"2026-04-19T15:18:36","date_gmt":"2026-04-19T15:18:36","guid":{"rendered":"https:\/\/yebbo.com\/ethiodiego\/?page_id=852"},"modified":"2026-04-19T15:18:40","modified_gmt":"2026-04-19T15:18:40","slug":"yebbo-buy-vs-rent-intelligence-system","status":"publish","type":"page","link":"http:\/\/yebbo.com\/ethiodiego\/yebbo-buy-vs-rent-intelligence-system\/","title":{"rendered":"Yebbo Buy vs Rent Intelligence System"},"content":{"rendered":"\n\n\n\n\n\nYebbo Buy vs Rent Intelligence System<\/title>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n<style>\n :root{\n --bg:#f6f8fb;\n --card:#ffffff;\n --ink:#122033;\n --muted:#5d6b82;\n --line:#dfe6ef;\n --brand:#0a2540;\n --accent:#1f6feb;\n --good:#0f9d58;\n --bad:#c62828;\n --gold:#b8860b;\n }\n *{box-sizing:border-box}\n body{\n margin:0;\n font-family:Arial, Helvetica, sans-serif;\n color:var(--ink);\n background:var(--bg);\n line-height:1.45;\n }\n header{\n background:linear-gradient(135deg, var(--brand), #123a67);\n color:#fff;\n padding:28px 20px;\n }\n .wrap{max-width:1200px;margin:0 auto}\n h1{margin:0 0 8px;font-size:34px}\n h2{font-size:24px;margin:0 0 14px}\n h3{font-size:18px;margin:0 0 10px}\n p{margin:8px 0}\n .sub{opacity:.9;max-width:900px}\n .grid{\n display:grid;\n grid-template-columns: 360px 1fr;\n gap:20px;\n padding:20px;\n max-width:1200px;\n margin:0 auto;\n }\n .panel,.card{\n background:var(--card);\n border:1px solid var(--line);\n border-radius:16px;\n box-shadow:0 2px 10px rgba(18,32,51,.05);\n }\n .panel{padding:18px; position:sticky; top:12px; align-self:start}\n .card{padding:18px; margin-bottom:18px}\n label{display:block;font-weight:700;margin:12px 0 6px}\n input{\n width:100%;\n padding:11px 12px;\n border:1px solid #cbd5e1;\n border-radius:10px;\n font-size:15px;\n background:#fff;\n }\n .muted{color:var(--muted);font-size:13px}\n .btn{\n margin-top:16px;\n width:100%;\n border:0;\n background:var(--brand);\n color:#fff;\n border-radius:12px;\n padding:13px 14px;\n font-size:16px;\n font-weight:700;\n cursor:pointer;\n }\n .btn:hover{filter:brightness(1.05)}\n .summary{\n display:grid;\n grid-template-columns: repeat(4,1fr);\n gap:14px;\n }\n .stat{\n background:#fff;\n border:1px solid var(--line);\n border-radius:14px;\n padding:14px;\n }\n .stat .k{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}\n .stat .v{font-size:24px;font-weight:800;margin-top:6px}\n .good{color:var(--good)}\n .bad{color:var(--bad)}\n .gold{color:var(--gold)}\n .two{\n display:grid;\n grid-template-columns: 1fr 1fr;\n gap:18px;\n }\n .chartbox{\n position:relative;\n min-height:320px;\n }\n table{\n width:100%;\n border-collapse:collapse;\n font-size:14px;\n }\n th,td{\n border-bottom:1px solid var(--line);\n padding:10px 8px;\n text-align:right;\n vertical-align:top;\n }\n th:first-child, td:first-child{text-align:left}\n thead th{\n position:sticky;\n top:0;\n background:#f8fafc;\n z-index:1;\n }\n .table-wrap{\n overflow:auto;\n max-height:520px;\n border:1px solid var(--line);\n border-radius:12px;\n }\n .note{\n background:#f8fafc;\n border:1px solid var(--line);\n border-radius:12px;\n padding:12px 14px;\n font-size:14px;\n }\n ul{padding-left:18px}\n @media (max-width: 980px){\n .grid{grid-template-columns:1fr}\n .panel{position:static}\n .summary{grid-template-columns:1fr 1fr}\n .two{grid-template-columns:1fr}\n }\n<\/style>\n<\/head>\n<body>\n<header>\n <div class=\"wrap\">\n <h1>Yebbo Buy vs Rent Intelligence System<\/h1>\n <p class=\"sub\">A serious educational comparison tool that breaks down where money goes, what is saved or lost, and how results change at 5, 10, 15, 20, 25, and 30 years. It estimates buyer cash outflow, principal, interest, taxes, insurance, maintenance, home value, sale proceeds, and the renter\u2019s invested savings.<\/p>\n <\/div>\n<\/header>\n\n<div class=\"grid\">\n <aside class=\"panel\">\n <h2>Scenario Inputs<\/h2>\n\n <label>Home Price ($)<\/label>\n <input id=\"homePrice\" type=\"number\" value=\"800000\" \/>\n\n <label>Down Payment (%)<\/label>\n <input id=\"downPct\" type=\"number\" step=\"0.1\" value=\"20\" \/>\n\n <label>Mortgage Interest Rate (%)<\/label>\n <input id=\"rate\" type=\"number\" step=\"0.01\" value=\"6.75\" \/>\n\n <label>Loan Term (years)<\/label>\n <input id=\"loanTerm\" type=\"number\" value=\"30\" \/>\n\n <label>Monthly Rent ($)<\/label>\n <input id=\"rent\" type=\"number\" value=\"3500\" \/>\n\n <label>Annual Home Appreciation (%)<\/label>\n <input id=\"appreciation\" type=\"number\" step=\"0.01\" value=\"3.5\" \/>\n\n <label>Annual Investment Return (%)<\/label>\n <input id=\"investReturn\" type=\"number\" step=\"0.01\" value=\"7\" \/>\n\n <label>Property Tax (% of home value \/ year)<\/label>\n <input id=\"taxRate\" type=\"number\" step=\"0.01\" value=\"1.2\" \/>\n\n <label>Home Insurance ($ \/ year)<\/label>\n <input id=\"insurance\" type=\"number\" value=\"1800\" \/>\n\n <label>Maintenance (% of home value \/ year)<\/label>\n <input id=\"maintRate\" type=\"number\" step=\"0.01\" value=\"1\" \/>\n\n <label>Home Sale Cost (% of sale price)<\/label>\n <input id=\"sellCost\" type=\"number\" step=\"0.01\" value=\"6\" \/>\n\n <button class=\"btn\" onclick=\"runAnalysis()\">Analyze Scenario<\/button>\n <p class=\"muted\">This model is educational. It simplifies taxes and assumes the renter invests the initial down payment plus the monthly difference between ownership cost and rent.<\/p>\n <\/aside>\n\n <main>\n <section class=\"card\">\n <h2>30-Year Snapshot<\/h2>\n <div class=\"summary\">\n <div class=\"stat\">\n <div class=\"k\">Buyer total out-of-pocket<\/div>\n <div class=\"v\" id=\"buyerOutPocket\">$0<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"k\">Buyer net proceeds if sold<\/div>\n <div class=\"v gold\" id=\"buyerNetWorth\">$0<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"k\">Renter investment account<\/div>\n <div class=\"v gold\" id=\"renterInvestment\">$0<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"k\">Who leads at 30 years<\/div>\n <div class=\"v\" id=\"winner30\">\u2014<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"two\">\n <div class=\"card\">\n <h3>Where the buyer\u2019s money goes<\/h3>\n <div class=\"chartbox\"><canvas id=\"pieChart\"><\/canvas><\/div>\n <\/div>\n <div class=\"card\">\n <h3>Net value over time: buy vs rent<\/h3>\n <div class=\"chartbox\"><canvas id=\"lineChart\"><\/canvas><\/div>\n <\/div>\n <\/section>\n\n <section class=\"two\">\n <div class=\"card\">\n <h3>Buyer cost breakdown by horizon<\/h3>\n <div class=\"chartbox\"><canvas id=\"stackedChart\"><\/canvas><\/div>\n <\/div>\n <div class=\"card\">\n <h3>Saved or lost at each horizon<\/h3>\n <div class=\"chartbox\"><canvas id=\"diffChart\"><\/canvas><\/div>\n <\/div>\n <\/section>\n\n <section class=\"card\">\n <h2>5, 10, 15, 20, 25, 30-Year Breakdown<\/h2>\n <div class=\"table-wrap\">\n <table id=\"resultTable\">\n <thead>\n <tr>\n <th>Year<\/th>\n <th>Buyer Out-of-Pocket<\/th>\n <th>Principal Paid<\/th>\n <th>Interest Paid<\/th>\n <th>Taxes Paid<\/th>\n <th>Insurance Paid<\/th>\n <th>Maintenance Paid<\/th>\n <th>Home Value<\/th>\n <th>Loan Balance<\/th>\n <th>Buyer Net Proceeds<\/th>\n <th>Renter Paid<\/th>\n <th>Renter Investment<\/th>\n <th>Rent vs Buy Lead<\/th>\n <\/tr>\n <\/thead>\n <tbody><\/tbody>\n <\/table>\n <\/div>\n <\/section>\n\n <section class=\"card\">\n <h2>Interpretation<\/h2>\n <div class=\"note\" id=\"interpretation\"><\/div>\n <\/section>\n <\/main>\n<\/div>\n\n<script>\nlet pieChart, lineChart, stackedChart, diffChart;\n\nfunction fmt(n){\n const sign = n < 0 ? \"-\" : \"\";\n return sign + \"$\" + Math.abs(n).toLocaleString(undefined,{maximumFractionDigits:0});\n}\n\nfunction mortgagePayment(principal, annualRate, months){\n const r = annualRate\/12;\n if (r === 0) return principal \/ months;\n return principal * (r * Math.pow(1+r, months)) \/ (Math.pow(1+r, months)-1);\n}\n\nfunction runAnalysis(){\n const homePrice = parseFloat(document.getElementById('homePrice').value) || 0;\n const downPct = (parseFloat(document.getElementById('downPct').value) || 0)\/100;\n const rate = (parseFloat(document.getElementById('rate').value) || 0)\/100;\n const loanTerm = parseFloat(document.getElementById('loanTerm').value) || 30;\n const rent = parseFloat(document.getElementById('rent').value) || 0;\n const appreciation = (parseFloat(document.getElementById('appreciation').value) || 0)\/100;\n const investReturn = (parseFloat(document.getElementById('investReturn').value) || 0)\/100;\n const taxRate = (parseFloat(document.getElementById('taxRate').value) || 0)\/100;\n const insuranceAnnual = parseFloat(document.getElementById('insurance').value) || 0;\n const maintRate = (parseFloat(document.getElementById('maintRate').value) || 0)\/100;\n const sellCost = (parseFloat(document.getElementById('sellCost').value) || 0)\/100;\n\n const downPayment = homePrice * downPct;\n const loanAmount = homePrice - downPayment;\n const months = loanTerm * 12;\n const monthlyPAndI = mortgagePayment(loanAmount, rate, months);\n const monthlyInvestRate = investReturn \/ 12;\n\n let balance = loanAmount;\n let investment = downPayment;\n let cumPrincipal = 0, cumInterest = 0, cumTax = 0, cumIns = 0, cumMaint = 0, cumRent = 0;\n const checkpoints = [5,10,15,20,25,30];\n const rows = [];\n const labels = checkpoints.map(String);\n const buyNetVals = [];\n const rentNetVals = [];\n const diffVals = [];\n const stackedPrincipal = [], stackedInterest = [], stackedTaxes = [], stackedInsurance = [], stackedMaintenance = [];\n\n for(let m=1; m<=360; m++){\n const yearFloat = m\/12;\n const currHomeValue = homePrice * Math.pow(1+appreciation, yearFloat);\n const monthlyTax = currHomeValue * taxRate \/ 12;\n const monthlyIns = insuranceAnnual \/ 12;\n const monthlyMaint = currHomeValue * maintRate \/ 12;\n\n let interest = 0, principal = 0;\n if (m <= months && balance > 0.01){\n interest = balance * (rate\/12);\n principal = Math.min(monthlyPAndI - interest, balance);\n balance -= principal;\n }\n\n cumPrincipal += principal;\n cumInterest += interest;\n cumTax += monthlyTax;\n cumIns += monthlyIns;\n cumMaint += monthlyMaint;\n cumRent += rent;\n\n const ownerOutThisMonth = (m <= months ? monthlyPAndI : 0) + monthlyTax + monthlyIns + monthlyMaint;\n const diffToInvest = Math.max(ownerOutThisMonth - rent, 0);\n\n investment = investment * (1 + monthlyInvestRate) + diffToInvest;\n\n if (m % 12 === 0){\n const y = m\/12;\n if (checkpoints.includes(y)){\n const value = homePrice * Math.pow(1+appreciation, y);\n const saleFees = value * sellCost;\n const buyerNetProceeds = value - saleFees - balance;\n const buyerOutOfPocket = downPayment + cumPrincipal + cumInterest + cumTax + cumIns + cumMaint;\n const diffLead = investment - buyerNetProceeds;\n\n rows.push({\n year:y,\n buyerOutOfPocket,\n principal:cumPrincipal,\n interest:cumInterest,\n taxes:cumTax,\n insurance:cumIns,\n maintenance:cumMaint,\n homeValue:value,\n loanBalance:Math.max(balance,0),\n buyerNetProceeds,\n renterPaid:cumRent,\n renterInvestment:investment,\n diffLead\n });\n\n buyNetVals.push(buyerNetProceeds);\n rentNetVals.push(investment);\n diffVals.push(diffLead);\n stackedPrincipal.push(downPayment + cumPrincipal);\n stackedInterest.push(cumInterest);\n stackedTaxes.push(cumTax);\n stackedInsurance.push(cumIns);\n stackedMaintenance.push(cumMaint);\n }\n }\n }\n\n const last = rows[rows.length-1];\n\n document.getElementById('buyerOutPocket').textContent = fmt(last.buyerOutOfPocket);\n document.getElementById('buyerNetWorth').textContent = fmt(last.buyerNetProceeds);\n document.getElementById('renterInvestment').textContent = fmt(last.renterInvestment);\n\n const winnerEl = document.getElementById('winner30');\n if (last.renterInvestment > last.buyerNetProceeds){\n winnerEl.textContent = \"Rent + Invest leads by \" + fmt(last.renterInvestment - last.buyerNetProceeds);\n winnerEl.className = \"v good\";\n } else {\n winnerEl.textContent = \"Buy leads by \" + fmt(last.buyerNetProceeds - last.renterInvestment);\n winnerEl.className = \"v bad\";\n }\n\n const tbody = document.querySelector('#resultTable tbody');\n tbody.innerHTML = \"\";\n rows.forEach(r => {\n const leadText = r.diffLead > 0\n ? \"Rent + Invest by \" + fmt(r.diffLead)\n : \"Buy by \" + fmt(Math.abs(r.diffLead));\n const tr = document.createElement('tr');\n tr.innerHTML = `\n <td>${r.year}<\/td>\n <td>${fmt(r.buyerOutOfPocket)}<\/td>\n <td>${fmt(r.principal)}<\/td>\n <td>${fmt(r.interest)}<\/td>\n <td>${fmt(r.taxes)}<\/td>\n <td>${fmt(r.insurance)}<\/td>\n <td>${fmt(r.maintenance)}<\/td>\n <td>${fmt(r.homeValue)}<\/td>\n <td>${fmt(r.loanBalance)}<\/td>\n <td>${fmt(r.buyerNetProceeds)}<\/td>\n <td>${fmt(r.renterPaid)}<\/td>\n <td>${fmt(r.renterInvestment)}<\/td>\n <td class=\"${r.diffLead > 0 ? 'good':'bad'}\">${leadText}<\/td>\n `;\n tbody.appendChild(tr);\n });\n\n const buyerPieData = [\n downPayment + last.principal,\n last.interest,\n last.taxes,\n last.insurance,\n last.maintenance\n ];\n\n if (pieChart) pieChart.destroy();\n pieChart = new Chart(document.getElementById('pieChart'), {\n type:'pie',\n data:{\n labels:['Down payment + principal','Interest','Property taxes','Insurance','Maintenance'],\n datasets:[{data:buyerPieData}]\n },\n options:{\n responsive:true,\n maintainAspectRatio:false,\n plugins:{\n legend:{position:'bottom'}\n }\n }\n });\n\n if (lineChart) lineChart.destroy();\n lineChart = new Chart(document.getElementById('lineChart'), {\n type:'line',\n data:{\n labels,\n datasets:[\n {label:'Buyer net proceeds if sold', data:buyNetVals, tension:.2},\n {label:'Renter investment account', data:rentNetVals, tension:.2}\n ]\n },\n options:{\n responsive:true,\n maintainAspectRatio:false,\n plugins:{legend:{position:'bottom'}},\n scales:{\n y:{ticks:{callback:(v)=>'$'+Number(v).toLocaleString()}}\n }\n }\n });\n\n if (stackedChart) stackedChart.destroy();\n stackedChart = new Chart(document.getElementById('stackedChart'), {\n type:'bar',\n data:{\n labels,\n datasets:[\n {label:'Down payment + principal', data:stackedPrincipal},\n {label:'Interest', data:stackedInterest},\n {label:'Taxes', data:stackedTaxes},\n {label:'Insurance', data:stackedInsurance},\n {label:'Maintenance', data:stackedMaintenance}\n ]\n },\n options:{\n responsive:true,\n maintainAspectRatio:false,\n plugins:{legend:{position:'bottom'}},\n scales:{\n x:{stacked:true},\n y:{stacked:true, ticks:{callback:(v)=>'$'+Number(v).toLocaleString()}}\n }\n }\n });\n\n if (diffChart) diffChart.destroy();\n diffChart = new Chart(document.getElementById('diffChart'), {\n type:'bar',\n data:{\n labels,\n datasets:[{\n label:'Positive = Rent + Invest lead \/ Negative = Buy lead',\n data:diffVals\n }]\n },\n options:{\n responsive:true,\n maintainAspectRatio:false,\n plugins:{legend:{position:'bottom'}},\n scales:{\n y:{ticks:{callback:(v)=>'$'+Number(v).toLocaleString()}}\n }\n }\n });\n\n const best5 = rows[0];\n const best30 = rows[rows.length-1];\n const interp = [];\n interp.push(`<p><strong>At 5 years:<\/strong> ${best5.diffLead > 0 ? 'Rent + invest leads by ' + fmt(best5.diffLead) : 'Buy leads by ' + fmt(Math.abs(best5.diffLead))}. In early years, buyer payments usually lean heavily toward interest, while the renter preserves the down payment and invests cost differences.<\/p>`);\n interp.push(`<p><strong>At 30 years:<\/strong> ${best30.diffLead > 0 ? 'Rent + invest leads by ' + fmt(best30.diffLead) : 'Buy leads by ' + fmt(Math.abs(best30.diffLead))}. This compares the buyer\u2019s estimated sale proceeds after selling costs and remaining loan balance against the renter\u2019s investment account.<\/p>`);\n interp.push(`<p><strong>What the charts mean:<\/strong> the pie chart shows where the buyer\u2019s total money went by year 30. The stacked bars show how each ownership cost grows across 5-year intervals. The net-value line chart compares buyer sale proceeds with the renter\u2019s investment path. The saved\/lost chart shows which side is ahead at each horizon.<\/p>`);\n interp.push(`<p><strong>Important note:<\/strong> this version does not include income-tax deductions, HOA fees, PMI, rent inflation, or inflation-adjusted returns. Those can be added in the next version for a more advanced model.<\/p>`);\n document.getElementById('interpretation').innerHTML = interp.join('');\n}\n\nrunAnalysis();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Yebbo Buy vs Rent Intelligence System Yebbo Buy vs Rent Intelligence System A serious educational comparison tool that breaks down […]<\/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":"default","ast-page-background-enabled":"default","ast-page-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":"","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-4)","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-4)","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-4)","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-852","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/P8nzgb-dK","jetpack_likes_enabled":true,"_links":{"self":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/pages\/852","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/comments?post=852"}],"version-history":[{"count":1,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/pages\/852\/revisions"}],"predecessor-version":[{"id":853,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/pages\/852\/revisions\/853"}],"wp:attachment":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/media?parent=852"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}