Financial Aid

How to afford post-secondary education.

There is a lot of money (in the BILLIONS of $$) out there to support students in pursuing training and education after high school. So much is left on the table each year. Learn about different resources, processes, and tricks to make your post-secondary education accessible and affordable for your family!

Starting in the 2022-2023 school year - EVERY graduating senior must provide proof of FAFSA or CA Dream Act submission (or go through the formal opt out process) to comply with AB 469.

Loading Calculator...

<!DOCTYPE html>
<html lang="en">
<head><script src="/gdpr/gdprscript.js?buildTime=1786731452"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>College Cost Estimator</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f8fafc;
            margin: 0;
            padding: 20px;
        }

/* Clean Input Styling (Protected inside iframe) */
        .input-group-container {
            display: flex;
            align-items: center;
            width: 100%;
            background-color: #fff;
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            overflow: hidden;
            transition: all 0.2s;
            box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        }

.input-group-container:focus-within {
            border-color: #2563eb;
            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
        }

.prefix {
            padding: 10px 0 10px 12px;
            color: #64748b;
            font-weight: 500;
            font-size: 14px;
            user-select: none;
        }

input {
            width: 100%;
            border: none;
            outline: none;
            padding: 8px 12px;
            font-size: 14px;
            color: #0f172a;
        }
        
        /* Text inputs without prefix need left padding */
        input.text-only {
            padding-left: 12px;
        }

label {
            display: block;
            margin-bottom: 4px;
            font-size: 12px;
            font-weight: 700;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

/* Table Styles */
        .comparison-table th, .comparison-table td {
            white-space: nowrap;
        }
        .sticky-col {
            position: sticky;
            left: 0;
            background-color: #f8fafc;
            z-index: 10;
            border-right: 1px solid #e2e8f0;
        }

/* Print Styles */
        @media print {
            body { background-color: white; padding: 0; }
            .no-print { display: none !important; }
            .shadow-sm { box-shadow: none !important; border: 1px solid #ddd; }
            .print-break { break-inside: avoid; margin-bottom: 2rem; }
        }
    </style>
</head>
<body>
    <div id="root"></div>

// --- Translations ---
        const translations = {
            en: {
                title: "College Cost Analyzer",
                addCollege: "Add College",
                print: "Print",
                save: "Save",
                load: "Load",
                viewCards: "List",
                viewTable: "Compare",
                noCollegesTitle: "No Colleges Added Yet",
                noCollegesText: "Grab your financial aid award letters or visit the college's website to find the numbers. We'll help you calculate the true cost.",
                addFirstCollege: "Add Your First College",
                counselorNoteTitle: "Counselor Note:",
                counselorNote: "\"Net Price\" is the total cost minus free money (Grants/Scholarships). This is the true price tag. Loans are debt you pay later, and Work-Study is income you earn slowly over the semester.",
                costOfAttendance: "Cost of Attendance",
                directCost: "Direct Costs",
                directCostSub: "(Tuition + Room)",
                indirectCost: "Indirect Costs",
                indirectCostSub: "(Books + Personal)",
                stickerPrice: "Total Cost",
                giftAidTitle: "Gift Aid",
                giftAidSub: "(Free Money)",
                grantsScholarships: "Grants & Scholarships",
                netPriceLabel: "Net Price",
                selfHelpTitle: "Self-Help Aid",
                studentLoans: "Student Loans",
                workStudy: "Work Study",
                loansRepaid: "*Loans must be repaid",
                surplus: "Surplus",
                gap: "Remaining Gap",
                gapFormula: "(Net Price - Loans - Work Study)",
                editTitle: "Edit College",
                addTitle: "Add New College",
                collegeName: "College Name",
                collegeNamePlaceholder: "e.g. State University",
                costsSection: "Costs",
                tuitionFees: "Tuition & Fees",
                roomBoard: "Room & Board",
                books: "Books",
                transport: "Transport",
                personal: "Personal",
                giftAidSection: "Gift Aid (Free)",
                grants: "Grants",
                scholarships: "Scholarships",
                selfHelpSection: "Self-Help Aid",
                fedLoans: "Federal Loans",
                fedLoansHelp: "Usually max $5,500 for freshmen",
                privateLoans: "Private Loans",
                privateLoansHelp: "Credit-based loans",
                workStudyHelp: "Earned via paycheck, not deducted upfront",
                cancel: "Cancel",
                saveCollege: "Save College",
                deleteConfirm: "Delete?",
                disclaimer: "Disclaimer: This tool is to help estimate and compare costs - all financial aid decisions should be fully reviewed and any questions brought to your counselor or college financial aid department.",
                languageBtn: "Español",
                category: "Category",
                tableViewHint: "Tip: Switch to the 'Compare' view above to compare all schools side-by-side.",
                tableViewExpl: "This table allows you to contrast Direct Costs and Net Price across all your options."
            },
            es: {
                title: "Analizador de Costos Universitarios",
                addCollege: "Agregar Universidad",
                print: "Imprimir",
                save: "Guardar",
                load: "Cargar",
                viewCards: "Lista",
                viewTable: "Comparar",
                noCollegesTitle: "Aún no hay universidades",
                noCollegesText: "Utilice sus cartas de ayuda financiera o visite el sitio web de la universidad para encontrar los números. Le ayudaremos a calcular el costo real.",
                addFirstCollege: "Agregue su primera universidad",
                counselorNoteTitle: "Nota del Consejero:",
                counselorNote: "El \"Precio Neto\" es el costo total menos el dinero gratuito (Becas). Este es el precio real. Los préstamos son deudas que se pagan después, y el Estudio y Trabajo es dinero que se gana lentamente durante el semestre.",
                costOfAttendance: "Costo de Asistencia",
                directCost: "Costos Directos",
                directCostSub: "(Matrícula + Alojamiento)",
                indirectCost: "Costos Indirectos",
                indirectCostSub: "(Libros + Personal)",
                stickerPrice: "Costo Total",
                giftAidTitle: "Ayuda Gratuita",
                giftAidSub: "(Regalo)",
                grantsScholarships: "Becas y Subvenciones",
                netPriceLabel: "Precio Neto",
                selfHelpTitle: "Autoayuda",
                studentLoans: "Préstamos Estudiantiles",
                workStudy: "Estudio y Trabajo",
                loansRepaid: "*Los préstamos deben devolverse",
                surplus: "Excedente",
                gap: "Brecha Restante",
                gapFormula: "(Precio Neto - Préstamos - Trabajo)",
                editTitle: "Editar Universidad",
                addTitle: "Agregar Nueva Universidad",
                collegeName: "Nombre de la Universidad",
                collegeNamePlaceholder: "ej. Universidad Estatal",
                costsSection: "Costos",
                tuitionFees: "Matrícula y Cuotas",
                roomBoard: "Alojamiento y Comida",
                books: "Libros",
                transport: "Transporte",
                personal: "Personal",
                giftAidSection: "Ayuda Gratuita",
                grants: "Subvenciones",
                scholarships: "Becas",
                selfHelpSection: "Autoayuda",
                fedLoans: "Préstamos Federales",
                fedLoansHelp: "Generalmente máx $5,500 para estudiantes de primer año",
                privateLoans: "Préstamos Privados",
                privateLoansHelp: "Préstamos basados en crédito",
                workStudyHelp: "Se gana vía cheque de pago, no se deduce por adelantado",
                cancel: "Cancelar",
                saveCollege: "Guardar Universidad",
                deleteConfirm: "¿Eliminar?",
                disclaimer: "Aviso: Esta herramienta es para ayudar a estimar y comparar costos: todas las decisiones de ayuda financiera deben revisarse completamente y cualquier pregunta debe dirigirse a su consejero o al departamento de ayuda financiera de la universidad.",
                languageBtn: "English",
                category: "Categoría",
                tableViewHint: "Consejo: Cambie a la vista 'Comparar' para ver todas las escuelas una al lado de la otra.",
                tableViewExpl: "Esta tabla le permite contrastar los costos directos y el precio neto en todas sus opciones."
            }
        };

const InputGroup = ({ label, value, onChange, helpText }) => (
            <div className="space-y-1">
                <label>{label}</label>
                <div className="input-group-container">
                    <span className="prefix">$</span>
                    <input
                        type="number"
                        min="0"
                        value={value || ''}
                        onChange={(e) => onChange(Math.max(0, parseFloat(e.target.value) || 0))}
                        placeholder="0"
                    />
                </div>
                {helpText && <p className="text-[11px] text-slate-500 leading-tight">{helpText}</p>}
            </div>
        );

const TextInput = ({ label, value, onChange, placeholder }) => (
            <div className="space-y-1">
                <label>{label}</label>
                <div className="input-group-container">
                    <input
                        className="text-only"
                        type="text"
                        value={value || ''}
                        onChange={(e) => onChange(e.target.value)}
                        placeholder={placeholder}
                    />
                </div>
            </div>
        );

const SummaryRow = ({ label, amount, isTotal = false, colorClass = "text-slate-900" }) => (
            <div className={`flex justify-between items-center py-1 ${isTotal ? 'font-bold border-t border-slate-200 mt-1 pt-2' : 'text-sm'}`}>
                <span className={isTotal ? 'text-slate-900' : 'text-slate-500'}>{label}</span>
                <span className={`${colorClass}`}>{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(amount)}</span>
            </div>
        );

function CollegeCostEstimator() {
            const [colleges, setColleges] = useState([]);
            const [isModalOpen, setIsModalOpen] = useState(false);
            const [editingId, setEditingId] = useState(null);
            const [lang, setLang] = useState('en');
            const [viewMode, setViewMode] = useState('cards'); // 'cards' or 'table'
            const fileInputRef = useRef(null);

const t = (key) => translations[lang][key];

const initialForm = {
                name: '', tuition: 0, roomBoard: 0, books: 0, transportation: 0, personal: 0,
                grants: 0, scholarships: 0, workStudy: 0, fedLoans: 0, privateLoans: 0
            };
            const [formData, setFormData] = useState(initialForm);

useEffect(() => {
                const saved = localStorage.getItem('college-estimator-v3');
                if (saved) { try { setColleges(JSON.parse(saved)); } catch (e) { console.error(e); } }
                else { setColleges([{ id: crypto.randomUUID(), name: 'Sample State U', tuition: 12000, roomBoard: 11000, books: 1000, transportation: 500, personal: 1500, grants: 4000, scholarships: 2000, workStudy: 2000, fedLoans: 5500, privateLoans: 0 }]); }
            }, []);

useEffect(() => { localStorage.setItem('college-estimator-v3', JSON.stringify(colleges)); }, [colleges]);

const handleExport = () => {
                const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(colleges));
                const downloadAnchorNode = document.createElement('a');
                downloadAnchorNode.setAttribute("href", dataStr);
                downloadAnchorNode.setAttribute("download", "college_costs.json");
                document.body.appendChild(downloadAnchorNode);
                downloadAnchorNode.click();
                downloadAnchorNode.remove();
            };

const handleSave = () => {
                if (!formData.name) return;
                const payload = { ...formData, id: editingId || crypto.randomUUID() };
                if (editingId) setColleges(colleges.map(c => c.id === editingId ? payload : c));
                else setColleges([...colleges, payload]);
                setIsModalOpen(false);
            };

const toggleLang = () => setLang(prev => prev === 'en' ? 'es' : 'en');
            
            // --- Render Components ---

{/* Total Cost */}
                             <tr className="bg-slate-100 border-t-2 border-slate-300">
                                <td className="px-4 py-3 font-bold text-slate-900 sticky-col bg-slate-100 shadow-[1px_0_0_0_rgba(203,213,225,1)]">{t('stickerPrice')}</td>
                                {colleges.map(c => <td key={c.id} className="px-4 py-3 font-bold text-slate-900">{formatMoney(calculate(c).totalCost)}</td>)}
                            </tr>

{/* Gift Aid */}
                            <tr className="bg-slate-50/50"><td colSpan={colleges.length + 1} className="px-4 py-2 font-bold text-xs text-slate-500 uppercase sticky-col bg-slate-50/50">{t('giftAidTitle')}</td></tr>
                            <tr><td className="px-4 py-2 text-slate-600 sticky-col">{t('grants')}</td>{colleges.map(c => <td key={c.id} className="px-4 py-2 text-emerald-700">{formatMoney(c.grants)}</td>)}</tr>
                            <tr><td className="px-4 py-2 text-slate-600 sticky-col">{t('scholarships')}</td>{colleges.map(c => <td key={c.id} className="px-4 py-2 text-emerald-700">{formatMoney(c.scholarships)}</td>)}</tr>
                            
                             <tr className="bg-indigo-100/50 border-t border-indigo-200">
                                <td className="px-4 py-3 font-bold text-indigo-900 sticky-col bg-indigo-50 shadow-[1px_0_0_0_rgba(226,232,240,1)]">{t('netPriceLabel')}</td>
                                {colleges.map(c => <td key={c.id} className="px-4 py-3 font-bold text-indigo-900">{formatMoney(calculate(c).netPrice)}</td>)}
                            </tr>

{/* Self Help */}
                            <tr className="bg-slate-50/50"><td colSpan={colleges.length + 1} className="px-4 py-2 font-bold text-xs text-slate-500 uppercase sticky-col bg-slate-50/50">{t('selfHelpTitle')}</td></tr>
                            <tr><td className="px-4 py-2 text-slate-600 sticky-col">{t('fedLoans')}</td>{colleges.map(c => <td key={c.id} className="px-4 py-2">{formatMoney(c.fedLoans)}</td>)}</tr>
                            <tr><td className="px-4 py-2 text-slate-600 sticky-col">{t('privateLoans')}</td>{colleges.map(c => <td key={c.id} className="px-4 py-2">{formatMoney(c.privateLoans)}</td>)}</tr>
                            <tr><td className="px-4 py-2 text-slate-600 sticky-col">{t('workStudy')}</td>{colleges.map(c => <td key={c.id} className="px-4 py-2">{formatMoney(c.workStudy)}</td>)}</tr>

{/* GAP */}
                            <tr className="bg-slate-50 border-t-2 border-slate-300">
                                <td className="px-4 py-3 font-bold text-slate-900 sticky-col bg-slate-50 shadow-[1px_0_0_0_rgba(226,232,240,1)]">{t('gap')}</td>
                                {colleges.map(c => {
                                    const gap = calculate(c).finalGap;
                                    const isSurplus = gap < 0;
                                    return (
                                        <td key={c.id} className={`px-4 py-3 font-bold ${isSurplus ? 'text-emerald-700' : 'text-red-700'}`}>
                                            {formatMoney(Math.abs(gap))} {isSurplus && '(Surplus)'}
                                        </td>
                                    );
                                })}
                            </tr>
                        </tbody>
                    </table>
                </div>
            );

return (
                <div className="min-h-screen pb-12 font-sans text-slate-800">
                    <div className="bg-white border-b border-slate-200 px-4 py-4 flex flex-col lg:flex-row justify-between items-center gap-4 sticky top-0 z-20 shadow-sm no-print">
                        <div className="flex items-center space-x-2 w-full lg:w-auto">
                            <div className="bg-blue-600 p-2 rounded-lg text-white"><CalculatorIcon /></div>
                            <h1 className="font-bold text-lg text-slate-900">{t('title')}</h1>
                        </div>
                        <div className="flex flex-wrap justify-center gap-2 w-full lg:w-auto items-center">
                            {/* View Toggle */}
                             <div className="flex bg-slate-100 rounded-lg p-1 mr-2">
                                <button onClick={() => setViewMode('cards')} className={`px-3 py-1.5 rounded-md text-sm font-medium flex items-center transition-all ${viewMode === 'cards' ? 'bg-white text-blue-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'}`}>
                                    <LayoutGridIcon className="w-4 h-4 mr-2"/> {t('viewCards')}
                                </button>
                                <button onClick={() => setViewMode('table')} className={`px-3 py-1.5 rounded-md text-sm font-medium flex items-center transition-all ${viewMode === 'table' ? 'bg-white text-blue-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'}`}>
                                    <TableIcon className="w-4 h-4 mr-2"/> {t('viewTable')}
                                </button>
                            </div>

<Button variant="secondary" onClick={toggleLang}><GlobeIcon /> <span className="ml-2 font-bold text-blue-700">{t('languageBtn')}</span></Button>
                            <Button variant="secondary" onClick={() => window.print()}><PrinterIcon /> <span className="ml-2 hidden sm:inline">{t('print')}</span></Button>
                            <Button variant="secondary" onClick={handleExport}><DownloadIcon /> <span className="ml-2 hidden sm:inline">{t('save')}</span></Button>
                            <Button variant="secondary" onClick={() => fileInputRef.current.click()}><UploadIcon /> <span className="ml-2 hidden sm:inline">{t('load')}</span></Button>
                            <input type="file" ref={fileInputRef} onChange={handleImport} className="hidden" accept=".json" />
                            <Button variant="primary" onClick={() => { setFormData(initialForm); setEditingId(null); setIsModalOpen(true); }}><PlusIcon /> <span className="ml-2">{t('addCollege')}</span></Button>
                        </div>
                    </div>

<div className="max-w-7xl mx-auto px-4 py-8 space-y-8">
                        {colleges.length === 0 ? (
                            <div className="text-center py-20 bg-white rounded-xl border-2 border-dashed border-slate-300">
                                <h2 className="text-2xl font-bold text-slate-700">{t('noCollegesTitle')}</h2>
                                <p className="text-slate-500 mb-6 max-w-md mx-auto">{t('noCollegesText')}</p>
                                <Button onClick={() => { setFormData(initialForm); setEditingId(null); setIsModalOpen(true); }}>{t('addFirstCollege')}</Button>
                            </div>
                        ) : (
                            <>
                                <div className="bg-slate-50 border border-slate-200 p-4 rounded-lg no-print">
                                    {/* Tip - Prominent */}
                                    {(viewMode === 'table' || (viewMode === 'cards' && colleges.length > 1)) && (
                                        <div className="flex items-center mb-3 text-blue-800 font-bold text-base">
                                             <span className="text-xl mr-2">□</span>
                                             {viewMode === 'cards' ? t('tableViewHint') : t('tableViewExpl')}
                                        </div>
                                    )}
                                    
                                    {/* Counselor Note - Subtle */}
                                    <div className="flex gap-2 items-start text-xs text-slate-500 border-t border-slate-200 pt-3">
                                        <InfoIcon className="w-4 h-4 mt-0.5 text-slate-400 shrink-0" />
                                        <div>
                                            <span className="font-semibold text-slate-600">{t('counselorNoteTitle')}</span> {t('counselorNote')}
                                        </div>
                                    </div>
                                </div>

{/* Toggle Views */}
                                {viewMode === 'cards' ? (
                                    <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
                                        {colleges.map(c => {
                                            const calcs = calculate(c);
                                            const isSurplus = calcs.finalGap < 0;
                                            return (
                                                <div key={c.id} className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden flex flex-col print-break">
                                                    <div className="p-5 flex-1 space-y-5">
                                                        <div className="flex justify-between items-start">
                                                            <h3 className="text-xl font-bold text-slate-900 truncate flex-1" title={c.name}>{c.name}</h3>
                                                            <div className="flex space-x-1 no-print">
                                                                <button onClick={() => { setFormData(c); setEditingId(c.id); setIsModalOpen(true); }} className="p-1.5 text-slate-400 hover:text-blue-600 rounded"><EditIcon /></button>
                                                                <button onClick={() => confirm(t('deleteConfirm')) && setColleges(colleges.filter(x => x.id !== c.id))} className="p-1.5 text-slate-400 hover:text-red-600 rounded"><TrashIcon /></button>
                                                            </div>
                                                        </div>
                                                        <div className="space-y-1">
                                                            <div className="text-xs font-semibold text-slate-500 uppercase">{t('costOfAttendance')}</div>
                                                            <SummaryRow label={t('directCost')} amount={calcs.directCost} />
                                                            <SummaryRow label={t('indirectCost')} amount={calcs.indirectCost} />
                                                            <SummaryRow label={t('stickerPrice')} amount={calcs.totalCost} isTotal />
                                                        </div>
                                                        <div className="bg-indigo-50 p-3 rounded-lg space-y-1">
                                                            <div className="text-xs font-semibold text-indigo-800 uppercase mb-2">{t('giftAidTitle')}</div>
                                                            <SummaryRow label={t('grantsScholarships')} amount={calcs.giftAid} colorClass="text-emerald-700" />
                                                            <div className="flex justify-between items-center pt-2 mt-1 border-t border-indigo-200">
                                                                <span className="font-bold text-indigo-900 text-sm">{t('netPriceLabel')}</span>
                                                                <span className="font-bold text-indigo-900">{formatMoney(calcs.netPrice)}</span>
                                                            </div>
                                                        </div>
                                                        <div className="space-y-1">
                                                            <div className="text-xs font-semibold text-slate-500 uppercase">{t('selfHelpTitle')}</div>
                                                            <SummaryRow label={t('studentLoans')} amount={calcs.loans} />
                                                            <SummaryRow label={t('workStudy')} amount={c.workStudy} />
                                                            <div className="text-[10px] text-slate-500 italic text-right">{t('loansRepaid')}</div>
                                                        </div>
                                                    </div>
                                                    <div className={`p-4 border-t ${isSurplus ? 'bg-emerald-50 border-emerald-100' : 'bg-red-50 border-red-100'}`}>
                                                        <div className="flex justify-between items-center">
                                                            <div>
                                                                <div className={`text-xs font-bold uppercase ${isSurplus ? 'text-emerald-600' : 'text-red-600'}`}>{isSurplus ? t('surplus') : t('gap')}</div>
                                                                <div className="text-xs text-slate-500">{t('gapFormula')}</div>
                                                            </div>
                                                            <div className={`text-2xl font-bold ${isSurplus ? 'text-emerald-700' : 'text-red-700'}`}>{formatMoney(Math.abs(calcs.finalGap))}</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            );
                                        })}
                                        
                                        {/* Comparison Button */}
                                        {colleges.length > 1 && (
                                            <div className="col-span-1 md:col-span-2 xl:col-span-3 flex justify-center mt-4">
                                                <Button onClick={() => setViewMode('table')} className="w-full md:w-auto px-8 py-3 text-lg shadow-md flex items-center justify-center">
                                                    <TableIcon className="w-5 h-5 mr-2" /> {t('compareAllButton')}
                                                </Button>
                                            </div>
                                        )}
                                    </div>
                                ) : (
                                    renderComparisonTable()
                                )}

<div className="mt-8 p-4 bg-yellow-50 border border-yellow-200 rounded-lg text-sm text-yellow-800 flex items-start gap-3 print-break">
                                    <div className="mt-0.5"><AlertIcon /></div>
                                    <p className="leading-relaxed">{t('disclaimer')}</p>
                                </div>
                            </>
                        )}
                    </div>

{isModalOpen && (
                        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/75 backdrop-blur-sm overflow-y-auto">
                            <div className="bg-white rounded-xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto">
                                <div className="p-6 space-y-6">
                                    <h2 className="text-xl font-bold text-slate-900">{editingId ? t('editTitle') : t('addTitle')}</h2>
                                    <div className="space-y-4">
                                        <TextInput label={t('collegeName')} value={formData.name} onChange={v => setFormData({...formData, name: v})} placeholder={t('collegeNamePlaceholder')} />
                                        <div className="p-4 bg-slate-50 rounded-lg space-y-3">
                                            <h3 className="font-bold text-sm text-slate-700 flex items-center"><span className="w-2 h-2 bg-slate-400 rounded-full mr-2"></span>{t('costsSection')}</h3>
                                            <div className="grid grid-cols-2 gap-4">
                                                <InputGroup label={t('tuitionFees')} value={formData.tuition} onChange={v => setFormData({...formData, tuition: v})} />
                                                <InputGroup label={t('roomBoard')} value={formData.roomBoard} onChange={v => setFormData({...formData, roomBoard: v})} />
                                            </div>
                                            <div className="grid grid-cols-3 gap-2">
                                                <InputGroup label={t('books')} value={formData.books} onChange={v => setFormData({...formData, books: v})} />
                                                <InputGroup label={t('transport')} value={formData.transportation} onChange={v => setFormData({...formData, transportation: v})} />
                                                <InputGroup label={t('personal')} value={formData.personal} onChange={v => setFormData({...formData, personal: v})} />
                                            </div>
                                        </div>
                                        <div className="p-4 bg-emerald-50 rounded-lg space-y-3">
                                            <h3 className="font-bold text-sm text-emerald-800 flex items-center"><span className="w-2 h-2 bg-emerald-500 rounded-full mr-2"></span>{t('giftAidSection')}</h3>
                                            <div className="grid grid-cols-2 gap-4">
                                                <InputGroup label={t('grants')} value={formData.grants} onChange={v => setFormData({...formData, grants: v})} />
                                                <InputGroup label={t('scholarships')} value={formData.scholarships} onChange={v => setFormData({...formData, scholarships: v})} />
                                            </div>
                                        </div>
                                        <div className="p-4 bg-amber-50 rounded-lg space-y-3">
                                            <h3 className="font-bold text-sm text-amber-800 flex items-center"><span className="w-2 h-2 bg-amber-500 rounded-full mr-2"></span>{t('selfHelpSection')}</h3>
                                            <div className="grid grid-cols-2 gap-4">
                                                <InputGroup label={t('fedLoans')} value={formData.fedLoans} onChange={v => setFormData({...formData, fedLoans: v})} helpText={t('fedLoansHelp')} />
                                                <InputGroup label={t('privateLoans')} value={formData.privateLoans} onChange={v => setFormData({...formData, privateLoans: v})} helpText={t('privateLoansHelp')} />
                                            </div>
                                            <InputGroup label={t('workStudy')} value={formData.workStudy} onChange={v => setFormData({...formData, workStudy: v})} helpText={t('workStudyHelp')} />
                                        </div>
                                    </div>
                                </div>
                                <div className="p-4 border-t border-slate-100 bg-slate-50 flex justify-end space-x-3 rounded-b-xl">
                                    <Button variant="secondary" onClick={() => setIsModalOpen(false)}>{t('cancel')}</Button>
                                    <Button onClick={handleSave}>{t('saveCollege')}</Button>
                                </div>
                            </div>
                        </div>
                    )}
                </div>
            );
        }

const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(<CollegeCostEstimator />);
    </script>
</body>
</html>

Tahoe Truckee Community Scholarship Application

Class of 2026 Application Available in January

Links and Resources

FAFSA

FAFSA: Free Application for Federal Student Aid

CSS Profile

NASFAA Resources

Scholarships

California Dream Act

Financial Aid Resources

Financial Aid Tool Kit

Taming The High Cost of College (Free Resources)