<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Can My Truck Tow It? — Life in the RV</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f0e8; color: #2a1e14; min-height: 100vh; padding: 20px; }
.container { max-width: 600px; margin: 0 auto; padding: 30px 20px; }
.brand { color: #8ec757; font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
h1 { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.subtitle { color: #7a6a5a; font-size: 15px; margin-bottom: 30px; line-height: 1.6; }
.section { margin-bottom: 24px; }
.section-title { font-size: 13px; font-weight: 700; color: #8ec757; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 14px; padding-bottom: 6px; border-bottom: 0.5px solid #c4b8a0; }
.field { margin-bottom: 14px; }
.field label { font-size: 15px; font-weight: 600; color: #2a1e14; display: block; margin-bottom: 6px; }
.field select { width: 100%; background: #fff; border: 1.5px solid #c4b8a0; border-radius: 8px; padding: 12px 14px; color: #2a1e14; font-size: 15px; transition: border-color 0.2s; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a7a6a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.field select:focus { outline: none; border-color: #8ec757; }
.sel-group { display: flex; gap: 8px; flex-wrap: wrap; }
.sel-btn { background: #ece4d4; border: 1.5px solid #c4b8a0; border-radius: 8px; padding: 10px 16px; color: #5a4a3a; font-size: 14px; cursor: pointer; transition: all 0.2s; font-weight: 500; }
.sel-btn:hover { border-color: #8ec757; }
.sel-btn.active { border-color: #8ec757; background: #ddecc8; color: #2a5010; font-weight: 700; }
.calc-btn { width: 100%; background: #8ec757; border: none; border-radius: 10px; padding: 16px; font-size: 17px; font-weight: 700; color: #1a3308; cursor: pointer; margin-top: 8px; transition: background 0.2s; }
.calc-btn:hover { background: #7db848; }
.results { display: none; margin-top: 30px; }
.results.show { display: block; }
.verdict-box { border-radius: 12px; padding: 24px; margin-bottom: 20px; text-align: center; border: 2.5px solid; }
.v-safe { background: #ddecc8; border-color: #5a9820; }
.v-border { background: #fff3d0; border-color: #c08010; }
.v-no { background: #fde8e8; border-color: #c03030; }
.v-icon { font-size: 40px; margin-bottom: 10px; }
.v-title { font-size: 24px; font-weight: 700; margin-bottom: 10px; }
.v-safe .v-title { color: #2a6010; }
.v-border .v-title { color: #7a5010; }
.v-no .v-title { color: #8a1010; }
.v-desc { font-size: 14px; line-height: 1.7; }
.v-safe .v-desc { color: #3a6020; }
.v-border .v-desc { color: #7a5818; }
.v-no .v-desc { color: #7a1818; }
.numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.num-card { background: #fff; border-radius: 10px; padding: 14px; border: 0.5px solid #c4b8a0; }
.num-label { font-size: 11px; color: #9a8a7a; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; }
.num-val { font-size: 20px; font-weight: 700; }
.num-val.g { color: #3a7818; }
.num-val.a { color: #8a5810; }
.num-val.r { color: #8a1010; }
.num-sub { font-size: 11px; color: #9a8a7a; margin-top: 3px; }
.meter-wrap { background: #fff; border-radius: 10px; padding: 16px; margin-bottom: 16px; border: 0.5px solid #c4b8a0; }
.meter-title { font-size: 13px; font-weight: 700; color: #5a4a3a; margin-bottom: 14px; }
.meter-row { margin-bottom: 14px; }
.meter-row:last-child { margin-bottom: 0; }
.meter-lbl { display: flex; justify-content: space-between; font-size: 13px; color: #5a4a3a; margin-bottom: 6px; }
.meter-track { height: 12px; background: #ece4d4; border-radius: 6px; overflow: hidden; }
.meter-fill { height: 12px; border-radius: 6px; transition: width 0.8s; }
.mfg { background: #8ec757; }
.mfa { background: #fdc66b; }
.mfr { background: #e05050; }
.tips { background: #fff; border-radius: 10px; padding: 16px; margin-bottom: 16px; border: 0.5px solid #c4b8a0; }
.tips-title { font-size: 13px; font-weight: 700; color: #5a4a3a; margin-bottom: 12px; }
.tip { display: flex; gap: 10px; font-size: 13px; color: #5a4a3a; padding: 8px 0; border-bottom: 0.5px solid #ece4d4; line-height: 1.5; }
.tip:last-child { border-bottom: none; }
.tip-i { flex-shrink: 0; }
.est-note { background: #fff8e8; border: 1.5px solid #fdc66b; border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; font-size: 13px; color: #7a5a10; line-height: 1.6; }
.cta-box { background: #ddecc8; border: 1.5px solid #8ec757; border-radius: 10px; padding: 18px; text-align: center; margin-bottom: 16px; }
.cta-text { color: #3a5820; font-size: 14px; margin-bottom: 10px; line-height: 1.5; }
.disclaimer { font-size: 11px; color: #9a8a7a; line-height: 1.6; padding: 12px; background: #ece4d4; border-radius: 8px; }
.reset-link { display: block; text-align: center; color: #9a8a7a; font-size: 13px; cursor: pointer; text-decoration: underline; margin-top: 14px; }
</style>
</head>
<body>
<div class="container">
<div class="brand">Life in the RV</div>
<h1>Can My Truck Tow It?</h1>
<p class="subtitle">Pick your truck and the RV you're eyeing. We'll tell you if they're compatible — no manuals required.</p>
<div class="section">
<div class="section-title">Your truck</div>
<div class="field">
<label>Make</label>
<select id="truck-make" onchange="updateModels()">
<option value="">Select make...</option>
<option>Ford</option>
<option>RAM</option>
<option>Chevrolet</option>
<option>GMC</option>
<option>Toyota</option>
<option>Nissan</option>
<option>Other (half-ton)</option>
<option>Other (heavy-duty)</option>
</select>
</div>
<div class="field">
<label>Model</label>
<select id="truck-model" onchange="updateSpecs()">
<option value="">Select model...</option>
</select>
</div>
<div class="field">
<label>How many people will be in the truck while towing?</label>
<div class="sel-group" id="passengers">
<button class="sel-btn active" data-val="1" onclick="setSel('passengers',this)">Just me</button>
<button class="sel-btn" data-val="2" onclick="setSel('passengers',this)">2 people</button>
<button class="sel-btn" data-val="3" onclick="setSel('passengers',this)">3–4 people</button>
</div>
</div>
<div class="field">
<label>How much gear/cargo in the truck bed?</label>
<div class="sel-group" id="cargo">
<button class="sel-btn active" data-val="light" onclick="setSel('cargo',this)">Minimal</button>
<button class="sel-btn" data-val="moderate" onclick="setSel('cargo',this)">Some gear</button>
<button class="sel-btn" data-val="heavy" onclick="setSel('cargo',this)">A lot</button>
</div>
</div>
</div>
<div class="section">
<div class="section-title">The RV you're considering</div>
<div class="field">
<label>RV type</label>
<select id="rv-type" onchange="updateRVModels()">
<option value="">Select type...</option>
<option value="tt-small">Travel Trailer — Small (under 25 ft)</option>
<option value="tt-mid">Travel Trailer — Mid (25–30 ft)</option>
<option value="tt-large">Travel Trailer — Large (30–35 ft)</option>
<option value="tt-xl">Travel Trailer — XL (35+ ft)</option>
<option value="fw-small">Fifth Wheel — Small (under 30 ft)</option>
<option value="fw-mid">Fifth Wheel — Mid (30–36 ft)</option>
<option value="fw-large">Fifth Wheel — Large (36–40 ft)</option>
<option value="th-small">Toy Hauler — Small (under 28 ft)</option>
<option value="th-large">Toy Hauler — Large (28+ ft)</option>
</select>
</div>
<div class="field">
<label>How will you use the RV?</label>
<div class="sel-group" id="rv-use">
<button class="sel-btn active" data-val="light" onclick="setSel('rv-use',this)">Lightly loaded (minimal gear)</button>
<button class="sel-btn" data-val="full" onclick="setSel('rv-use',this)">Fully loaded (full-time living)</button>
</div>
</div>
</div>
<button class="calc-btn" onclick="calculate()">Check compatibility →</button>
<div class="results" id="results">
<div class="verdict-box" id="vbox">
<div class="v-icon" id="v-icon"></div>
<div class="v-title" id="v-title"></div>
<div class="v-desc" id="v-desc"></div>
</div>
<div class="est-note" id="est-note"></div>
<div class="numbers">
<div class="num-card">
<div class="num-label">Estimated tow capacity used</div>
<div class="num-val" id="n-tow">—</div>
<div class="num-sub" id="n-tow-sub">of your truck's rating</div>
</div>
<div class="num-card">
<div class="num-label">Estimated payload left</div>
<div class="num-val" id="n-payload">—</div>
<div class="num-sub">after hitch + people + gear</div>
</div>
<div class="num-card">
<div class="num-label">Est. RV weight range</div>
<div class="num-val" id="n-rv">—</div>
<div class="num-sub">loaded estimate</div>
</div>
<div class="num-card">
<div class="num-label">Truck tow rating</div>
<div class="num-val" id="n-truck">—</div>
<div class="num-sub">typical for this model</div>
</div>
</div>
<div class="meter-wrap">
<div class="meter-title">How close to your limits?</div>
<div class="meter-row">
<div class="meter-lbl"><span>Tow capacity used</span><span id="ml-tow">0%</span></div>
<div class="meter-track"><div class="meter-fill" id="mf-tow" style="width:0%"></div></div>
</div>
<div class="meter-row">
<div class="meter-lbl"><span>Payload used</span><span id="ml-pay">0%</span></div>
<div class="meter-track"><div class="meter-fill" id="mf-pay" style="width:0%"></div></div>
</div>
</div>
<div class="tips">
<div class="tips-title">What to know about this combo</div>
<div id="tips-list"></div>
</div>
<div class="cta-box">
<div class="cta-text">Still not sure? Post your exact setup in the Full Time RV Roadmap community — experienced full-timers have been through this and are happy to help.</div>
<a href="https://skool.com/fulltimervroadmap" style="color:#2a6010;font-size:14px;font-weight:700;">Ask in the community →</a>
</div>
<div class="disclaimer">These are estimates based on typical specs for the truck model and RV type you selected. Real weights vary significantly by trim, engine, year, and what's loaded in the RV. Always verify with your owner's manual, the RV's weight sticker, and weigh your actual setup at a CAT scale before long trips. This tool is for educational purposes only.</div>
<span class="reset-link" onclick="resetForm()">Check a different setup</span>
</div>
</div>
<script>
const trucks = {
Ford: {
'F-150 (half-ton)': { tow: 13000, payload: 2200 },
'F-250 Super Duty': { tow: 20000, payload: 3500 },
'F-350 Super Duty': { tow: 26000, payload: 4200 },
'Maverick': { tow: 4000, payload: 1500 },
'Ranger': { tow: 7500, payload: 1860 },
},
RAM: {
'Ram 1500 (half-ton)': { tow: 11000, payload: 2100 },
'Ram 2500': { tow: 20000, payload: 3100 },
'Ram 3500': { tow: 26000, payload: 4100 },
'Dakota / 1500 Classic': { tow: 7500, payload: 1700 },
},
Chevrolet: {
'Silverado 1500 (half-ton)': { tow: 11500, payload: 2000 },
'Silverado 2500HD': { tow: 18500, payload: 3400 },
'Silverado 3500HD': { tow: 23000, payload: 4100 },
'Colorado': { tow: 7000, payload: 1550 },
},
GMC: {
'Sierra 1500 (half-ton)': { tow: 11000, payload: 2000 },
'Sierra 2500HD': { tow: 18500, payload: 3400 },
'Sierra 3500HD': { tow: 23000, payload: 4100 },
'Canyon': { tow: 7000, payload: 1550 },
},
Toyota: {
'Tundra': { tow: 11000, payload: 1900 },
'Tacoma': { tow: 6800, payload: 1440 },
'4Runner (not recommended for towing)': { tow: 5000, payload: 1200 },
},
Nissan: {
'Titan (half-ton)': { tow: 9310, payload: 1690 },
'Titan XD': { tow: 11000, payload: 2000 },
'Frontier': { tow: 6720, payload: 1610 },
},
'Other (half-ton)': {
'Generic half-ton estimate': { tow: 8500, payload: 1600 },
},
'Other (heavy-duty)': {
'Generic heavy-duty estimate': { tow: 18000, payload: 3000 },
},
};
// RV weight ranges [minLoaded, maxLoaded, hitchPct]
const rvWeights = {
'tt-small': { min: 4000, max: 6500, hitch: 0.12, label: '4,000–6,500 lbs loaded' },
'tt-mid': { min: 6500, max: 9500, hitch: 0.13, label: '6,500–9,500 lbs loaded' },
'tt-large': { min: 9000, max: 13000, hitch: 0.13, label: '9,000–13,000 lbs loaded' },
'tt-xl': { min: 12000, max: 16000, hitch: 0.14, label: '12,000–16,000 lbs loaded' },
'fw-small': { min: 8000, max: 11000, hitch: 0.20, label: '8,000–11,000 lbs loaded' },
'fw-mid': { min: 11000, max: 15000, hitch: 0.22, label: '11,000–15,000 lbs loaded' },
'fw-large': { min: 14000, max: 18000, hitch: 0.22, label: '14,000–18,000 lbs loaded' },
'th-small': { min: 8000, max: 12000, hitch: 0.14, label: '8,000–12,000 lbs loaded' },
'th-large': { min: 12000, max: 16000, hitch: 0.14, label: '12,000–16,000 lbs loaded' },
};
const passengerW = { '1': 200, '2': 380, '3': 560 };
const cargoW = { light: 100, moderate: 300, heavy: 600 };
const sels = { passengers: '1', cargo: 'light', 'rv-use': 'light' };
function setSel(group, btn) {
document.querySelectorAll(`#${group} .sel-btn`).forEach(b => b.classList.remove('active'));
btn.classList.add('active');
sels[group] = btn.dataset.val;
}
function updateModels() {
const make = document.getElementById('truck-make').value;
const modelSel = document.getElementById('truck-model');
modelSel.innerHTML = '<option value="">Select model...</option>';
if (trucks[make]) {
Object.keys(trucks[make]).forEach(m => {
const opt = document.createElement('option');
opt.value = m; opt.textContent = m;
modelSel.appendChild(opt);
});
}
}
function updateSpecs() {}
function updateRVModels() {}
function fmt(n) { return Math.round(n).toLocaleString() + ' lbs'; }
function color(p) { return p <= 75 ? 'g' : p <= 90 ? 'a' : 'r'; }
function mcolor(p) { return p <= 75 ? 'mfg' : p <= 90 ? 'mfa' : 'mfr'; }
function calculate() {
const make = document.getElementById('truck-make').value;
const model = document.getElementById('truck-model').value;
const rvType = document.getElementById('rv-type').value;
if (!make || !model || !rvType) {
alert('Please select your truck make, model, and RV type.');
return;
}
const truck = trucks[make][model];
const rv = rvWeights[rvType];
const fullyLoaded = sels['rv-use'] === 'full';
// Use upper weight range if fully loaded
const rvWeight = fullyLoaded ? rv.max : Math.round((rv.min + rv.max) / 2);
const hitchWeight = Math.round(rvWeight * rv.hitch);
const pax = passengerW[sels.passengers];
const cargo = cargoW[sels.cargo];
const payloadUsed = hitchWeight + pax + cargo;
const payloadLeft = truck.payload - payloadUsed;
const towPct = Math.round((rvWeight / truck.tow) * 100);
const payPct = Math.round((payloadUsed / truck.payload) * 100);
// Verdict
let vClass, icon, title, desc;
const overTow = towPct > 100;
const overPay = payloadLeft < 0;
const borderline = (towPct > 85 && towPct <= 100) || (payPct > 85 && payPct <= 100) || payloadLeft < 400;
if (overTow || overPay) {
vClass = 'v-no'; icon = '✖'; title = 'Not Recommended';
if (overTow && overPay) {
desc = 'This combination exceeds both your tow capacity and your payload rating. You would need a heavier truck or a lighter RV to tow this safely.';
} else if (overTow) {
desc = `The estimated weight of this RV (${fmt(rvWeight)}) exceeds your truck's tow rating (${fmt(truck.tow)}). This setup is not safe to tow. Consider a lighter RV or a truck with a higher tow rating.`;
} else {
desc = `Your tow capacity looks okay, but your truck's payload is exceeded by an estimated ${fmt(Math.abs(payloadLeft))}. Payload is the #1 towing safety number — exceeding it stresses your brakes, suspension, and frame. Consider a lighter load or a heavier-duty truck.`;
}
} else if (borderline) {
vClass = 'v-border'; icon = '⚠'; title = 'Borderline — Proceed Carefully';
desc = `This combo is technically within your truck's ratings but leaves little margin. Real RVs weigh more once loaded with water, food, and full tanks. We strongly recommend weighing your actual loaded setup at a CAT scale before any long trips.`;
} else {
vClass = 'v-safe'; icon = '✔'; title = 'Looks Compatible';
desc = `Based on typical specs, this combination appears to be within your truck's towing and payload capabilities with a reasonable margin. Remember these are estimates — real weights vary, so always verify before you buy.`;
}
document.getElementById('vbox').className = 'verdict-box ' + vClass;
document.getElementById('v-icon').textContent = icon;
document.getElementById('v-title').textContent = title;
document.getElementById('v-desc').textContent = desc;
document.getElementById('est-note').textContent = `Estimates based on typical specs for a ${make} ${model} towing a ${rvType.replace('-',' ').replace('tt','travel trailer').replace('fw','fifth wheel').replace('th','toy hauler')} — ${rv.label}.`;
// Numbers
const tc = color(towPct);
const pc = payloadLeft < 0 ? 'r' : color(payPct);
document.getElementById('n-tow').textContent = towPct + '%';
document.getElementById('n-tow').className = 'num-val ' + tc;
document.getElementById('n-payload').textContent = payloadLeft < 0 ? '-' + fmt(Math.abs(payloadLeft)) : fmt(payloadLeft);
document.getElementById('n-payload').className = 'num-val ' + pc;
document.getElementById('n-rv').textContent = fmt(rvWeight);
document.getElementById('n-rv').className = 'num-val';
document.getElementById('n-truck').textContent = fmt(truck.tow);
document.getElementById('n-truck').className = 'num-val';
// Meters
const tw = Math.min(towPct, 100);
const pw = Math.min(payPct, 100);
document.getElementById('mf-tow').style.width = tw + '%';
document.getElementById('mf-tow').className = 'meter-fill ' + mcolor(towPct);
document.getElementById('mf-pay').style.width = pw + '%';
document.getElementById('mf-pay').className = 'meter-fill ' + mcolor(payPct);
document.getElementById('ml-tow').textContent = towPct + '%';
document.getElementById('ml-pay').textContent = payPct + '%';
// Tips
const tips = [];
const isFW = rvType.startsWith('fw');
const isTT = rvType.startsWith('tt');
tips.push({ i: 'ℹ', t: `Estimated hitch/pin weight: ${fmt(hitchWeight)}. This is the weight your RV puts directly on your truck — it counts against your payload.` });
if (isFW) tips.push({ i: 'ℹ', t: 'Fifth wheels require a special fifth wheel hitch installed in your truck bed. Make sure your bed can fit the hitch and you have enough bed length.' });
if (isTT && rvWeight > 6000) tips.push({ i: '⚠', t: 'Travel trailers over 6,000 lbs generally benefit from a weight distribution hitch. It improves sway control and distributes tongue weight more evenly.' });
if (towPct > 80) tips.push({ i: '⚠', t: 'You are using over 80% of your tow rating. Real RVs weigh more when loaded. Budget for actual loaded weight to be 10–20% higher than the dry weight.' });
if (make === 'Ford' && model.includes('F-150')) tips.push({ i: '💡', t: 'F-150 payload varies significantly by trim and config. Check the yellow sticker inside your driver\'s door jamb for YOUR truck\'s exact payload number.' });
tips.push({ i: '✔', t: 'Always weigh your actual loaded setup at a CAT scale ($12–15). It\'s the only way to know your real numbers before a long trip.' });
document.getElementById('tips-list').innerHTML = tips.map(t =>
`<div class="tip"><span class="tip-i">${t.i}</span><span>${t.t}</span></div>`).join('');
document.getElementById('results').classList.add('show');
document.getElementById('results').scrollIntoView({ behavior: 'smooth', block: 'start' });
}
function resetForm() {
document.getElementById('truck-make').value = '';
document.getElementById('truck-model').innerHTML = '<option value="">Select model...</option>';
document.getElementById('rv-type').value = '';
document.getElementById('results').classList.remove('show');
window.scrollTo({ top: 0, behavior: 'smooth' });
}
</script>
</body>
</html>Grab a copy of the RV Life Starter Checklist!