{"id":84546,"date":"2025-06-02T04:10:17","date_gmt":"2025-06-02T11:10:17","guid":{"rendered":"https:\/\/withjoy.com\/blog\/?p=84546"},"modified":"2025-06-02T04:11:22","modified_gmt":"2025-06-02T11:11:22","slug":"wedding-budget-tracker","status":"publish","type":"post","link":"https:\/\/withjoy.com\/blog\/wedding-budget-tracker\/","title":{"rendered":"Wedding Budget Tracker"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Wedding Cost Tracker<\/title>\n    <style>\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        body {\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n            background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);\n            min-height: 100vh;\n            padding: 20px;\n        }\n\n        .container {\n            max-width: 1200px;\n            margin: 0 auto;\n        }\n\n        .header {\n            background: white;\n            border-radius: 8px;\n            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n            padding: 24px;\n            margin-bottom: 24px;\n        }\n\n        .header h1 {\n            font-size: 2rem;\n            font-weight: bold;\n            color: #1f2937;\n            margin-bottom: 8px;\n            display: flex;\n            align-items: center;\n        }\n\n        .header-icon {\n            width: 32px;\n            height: 32px;\n            margin-right: 12px;\n            color: #502080;\n        }\n\n        .header p {\n            color: #6b7280;\n        }\n\n        .budget-overview {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n            gap: 16px;\n            margin-bottom: 24px;\n        }\n\n        .budget-card {\n            background: white;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n            padding: 16px;\n        }\n\n        .budget-card label {\n            display: block;\n            font-size: 0.875rem;\n            font-weight: 500;\n            color: #374151;\n            margin-bottom: 8px;\n        }\n\n        .budget-input {\n            width: 100%;\n            padding: 8px 12px;\n            border: 1px solid #d1d5db;\n            border-radius: 6px;\n            font-size: 1.125rem;\n            font-weight: 600;\n            color: #502080;\n        }\n\n        .budget-display {\n            font-size: 1.5rem;\n            font-weight: bold;\n            color: #502080;\n        }\n\n        .budget-card h3 {\n            font-size: 0.875rem;\n            font-weight: 500;\n            color: #374151;\n            margin-bottom: 4px;\n        }\n\n        .remaining-positive {\n            color: #059669;\n        }\n\n        .remaining-negative {\n            color: #dc2626;\n        }\n\n        .progress-section {\n            background: white;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n            padding: 16px;\n            margin-bottom: 24px;\n        }\n\n        .progress-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: 8px;\n        }\n\n        .progress-header h3 {\n            font-size: 1.125rem;\n            font-weight: 500;\n            color: #1f2937;\n        }\n\n        .progress-percent {\n            font-size: 0.875rem;\n            color: #6b7280;\n        }\n\n        .progress-bar {\n            width: 100%;\n            height: 16px;\n            background-color: #e5e7eb;\n            border-radius: 8px;\n            overflow: hidden;\n        }\n\n        .progress-fill {\n            height: 100%;\n            background-color: #502080;\n            transition: width 0.3s ease;\n        }\n\n        .main-content {\n            display: grid;\n            grid-template-columns: 2fr 1fr;\n            gap: 24px;\n        }\n\n        @media (max-width: 1024px) {\n            .main-content {\n                grid-template-columns: 1fr;\n            }\n        }\n\n        .expenses-section {\n            background: white;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n        }\n\n        .expenses-header {\n            padding: 16px;\n            border-bottom: 1px solid #e5e7eb;\n        }\n\n        .expenses-header h2 {\n            font-size: 1.25rem;\n            font-weight: 600;\n            color: #1f2937;\n        }\n\n        .expenses-table {\n            width: 100%;\n            border-collapse: collapse;\n        }\n\n        .expenses-table th,\n        .expenses-table td {\n            padding: 12px;\n            text-align: left;\n            border-bottom: 1px solid #f3f4f6;\n        }\n\n        .expenses-table th {\n            font-weight: 500;\n            color: #374151;\n            background-color: #f9fafb;\n        }\n\n        .category-tag {\n            display: inline-block;\n            background-color: #502080;\n            color: white;\n            padding: 4px 8px;\n            border-radius: 4px;\n            font-size: 0.75rem;\n            font-weight: 500;\n        }\n\n        .expense-input {\n            width: 80px;\n            padding: 4px 8px;\n            border: 1px solid #d1d5db;\n            border-radius: 4px;\n            font-size: 0.875rem;\n        }\n\n        .checkbox {\n            width: 16px;\n            height: 16px;\n            accent-color: #502080;\n        }\n\n        .delete-btn {\n            background: none;\n            border: none;\n            color: #ef4444;\n            cursor: pointer;\n            padding: 4px;\n        }\n\n        .delete-btn:hover {\n            color: #dc2626;\n        }\n\n        .add-expense-section {\n            margin-top: 24px;\n            padding: 16px;\n            background-color: #f9fafb;\n            border-radius: 8px;\n        }\n\n        .add-expense-section h3 {\n            font-size: 0.875rem;\n            font-weight: 500;\n            color: #374151;\n            margin-bottom: 12px;\n        }\n\n        .add-expense-form {\n            display: grid;\n            grid-template-columns: 1fr 2fr 1fr 1fr auto;\n            gap: 8px;\n            align-items: end;\n        }\n\n        @media (max-width: 768px) {\n            .add-expense-form {\n                grid-template-columns: 1fr;\n            }\n        }\n\n        .form-input {\n            padding: 8px 12px;\n            border: 1px solid #d1d5db;\n            border-radius: 4px;\n        }\n\n        .add-btn {\n            background-color: #502080;\n            color: white;\n            border: none;\n            padding: 8px 12px;\n            border-radius: 4px;\n            cursor: pointer;\n            transition: opacity 0.2s;\n        }\n\n        .add-btn:hover {\n            opacity: 0.9;\n        }\n\n        .sidebar {\n            display: flex;\n            flex-direction: column;\n            gap: 16px;\n        }\n\n        .sidebar-card {\n            background: white;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n            padding: 16px;\n        }\n\n        .sidebar-card h3 {\n            font-size: 1.125rem;\n            font-weight: 600;\n            color: #1f2937;\n            margin-bottom: 16px;\n            display: flex;\n            align-items: center;\n        }\n\n        .sidebar-icon {\n            width: 20px;\n            height: 20px;\n            margin-right: 8px;\n        }\n\n        .category-item {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            padding-bottom: 8px;\n            border-bottom: 1px solid #f3f4f6;\n            margin-bottom: 12px;\n        }\n\n        .category-item:last-child {\n            margin-bottom: 0;\n            border-bottom: none;\n            padding-bottom: 0;\n        }\n\n        .category-name {\n            font-weight: 500;\n            color: #374151;\n        }\n\n        .category-amounts {\n            font-size: 0.875rem;\n            color: #6b7280;\n        }\n\n        .category-progress {\n            width: 100%;\n            height: 8px;\n            background-color: #e5e7eb;\n            border-radius: 4px;\n            margin-top: 4px;\n            overflow: hidden;\n        }\n\n        .category-progress-fill {\n            height: 100%;\n            background-color: #502080;\n            transition: width 0.3s ease;\n        }\n\n        .payment-row {\n            display: flex;\n            justify-content: space-between;\n            margin-bottom: 8px;\n        }\n\n        .payment-label {\n            color: #6b7280;\n        }\n\n        .payment-amount {\n            font-weight: 600;\n            color: #502080;\n        }\n\n        .payment-owe {\n            color: #f59e0b;\n        }\n\n        .payment-summary {\n            padding-top: 8px;\n            border-top: 1px solid #e5e7eb;\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"container\">\n        <!-- Header -->\n        <div class=\"header\">\n            <h1>\n                <svg class=\"header-icon\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                    <path d=\"M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z\"><\/path>\n                    <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z\" clip-rule=\"evenodd\"><\/path>\n                <\/svg>\n                Wedding Budget Tracker\n            <\/h1>\n            <p>Plan and track your perfect day within budget<\/p>\n        <\/div>\n\n        <!-- Budget Overview -->\n        <div class=\"budget-overview\">\n            <div class=\"budget-card\">\n                <label for=\"totalBudget\">Total Budget<\/label>\n                <input type=\"number\" id=\"totalBudget\" class=\"budget-input\" value=\"25000\" placeholder=\"$\">\n            <\/div>\n            <div class=\"budget-card\">\n                <h3>Total Budgeted<\/h3>\n                <div class=\"budget-display\" id=\"totalBudgeted\">$20,000<\/div>\n            <\/div>\n            <div class=\"budget-card\">\n                <h3>Total Actual<\/h3>\n                <div class=\"budget-display\" id=\"totalActual\">$0<\/div>\n            <\/div>\n            <div class=\"budget-card\">\n                <h3>Remaining<\/h3>\n                <div class=\"budget-display remaining-positive\" id=\"remaining\">$25,000<\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Progress Bar -->\n        <div class=\"progress-section\">\n            <div class=\"progress-header\">\n                <h3>Budget Progress<\/h3>\n                <span class=\"progress-percent\" id=\"progressPercent\">0.0% used<\/span>\n            <\/div>\n            <div class=\"progress-bar\">\n                <div class=\"progress-fill\" id=\"progressFill\" style=\"width: 0%\"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Main Content -->\n        <div class=\"main-content\">\n            <!-- Expenses Table -->\n            <div class=\"expenses-section\">\n                <div class=\"expenses-header\">\n                    <h2>Wedding Expenses<\/h2>\n                <\/div>\n                <div style=\"overflow-x: auto; padding: 16px;\">\n                    <table class=\"expenses-table\" id=\"expensesTable\">\n                        <thead>\n                            <tr>\n                                <th>Category<\/th>\n                                <th>Item<\/th>\n                                <th>Budgeted<\/th>\n                                <th>Actual<\/th>\n                                <th>Paid<\/th>\n                                <th><\/th>\n                            <\/tr>\n                        <\/thead>\n                        <tbody id=\"expensesBody\">\n                            <!-- Expenses will be populated by JavaScript -->\n                        <\/tbody>\n                    <\/table>\n                <\/div>\n\n                <!-- Add New Expense -->\n                <div class=\"add-expense-section\">\n                    <h3>Add New Expense<\/h3>\n                    <div class=\"add-expense-form\">\n                        <select id=\"newCategory\" class=\"form-input\">\n                            <option value=\"\">Category<\/option>\n                            <option value=\"Venue\">Venue<\/option>\n                            <option value=\"Catering\">Catering<\/option>\n                            <option value=\"Photography\">Photography<\/option>\n                            <option value=\"Attire\">Attire<\/option>\n                            <option value=\"Flowers\">Flowers<\/option>\n                            <option value=\"Music\">Music<\/option>\n                            <option value=\"Transportation\">Transportation<\/option>\n                            <option value=\"Invitations\">Invitations<\/option>\n                            <option value=\"Rings\">Rings<\/option>\n                            <option value=\"Decorations\">Decorations<\/option>\n                            <option value=\"Other\">Other<\/option>\n                        <\/select>\n                        <input type=\"text\" id=\"newItem\" class=\"form-input\" placeholder=\"Item description\">\n                        <input type=\"number\" id=\"newBudgeted\" class=\"form-input\" placeholder=\"Budgeted\">\n                        <input type=\"number\" id=\"newActual\" class=\"form-input\" placeholder=\"Actual\">\n                        <button class=\"add-btn\" onclick=\"addExpense()\">\n                            <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                                <path fill-rule=\"evenodd\" d=\"M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z\" clip-rule=\"evenodd\"><\/path>\n                            <\/svg>\n                        <\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Sidebar -->\n            <div class=\"sidebar\">\n                <!-- Category Breakdown -->\n                <div class=\"sidebar-card\">\n                    <h3>\n                        <svg class=\"sidebar-icon\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                            <path d=\"M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z\"><\/path>\n                            <path d=\"M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z\"><\/path>\n                        <\/svg>\n                        Category Breakdown\n                    <\/h3>\n                    <div id=\"categoryBreakdown\">\n                        <!-- Categories will be populated by JavaScript -->\n                    <\/div>\n                <\/div>\n\n                <!-- Payment Status -->\n                <div class=\"sidebar-card\">\n                    <h3>\n                        <svg class=\"sidebar-icon\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                            <path d=\"M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4zM18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z\"><\/path>\n                        <\/svg>\n                        Payment Status\n                    <\/h3>\n                    <div id=\"paymentStatus\">\n                        <div class=\"payment-row\">\n                            <span class=\"payment-label\">Total Paid:<\/span>\n                            <span class=\"payment-amount\" id=\"totalPaid\">$0<\/span>\n                        <\/div>\n                        <div class=\"payment-row\">\n                            <span class=\"payment-label\">Still Owe:<\/span>\n                            <span class=\"payment-amount payment-owe\" id=\"stillOwe\">$0<\/span>\n                        <\/div>\n                        <div class=\"payment-summary\">\n                            <div class=\"payment-row\">\n                                <span class=\"payment-label\">Items Paid:<\/span>\n                                <span class=\"payment-amount\" id=\"itemsPaid\">0 \/ 0<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        \/\/ Initial data\n        let expenses = [\n            { id: 1, category: 'Venue', item: 'Reception Hall', budgeted: 8000, actual: 0, paid: false },\n            { id: 2, category: 'Catering', item: 'Food & Beverages', budgeted: 6000, actual: 0, paid: false },\n            { id: 3, category: 'Photography', item: 'Photographer', budgeted: 2500, actual: 0, paid: false },\n            { id: 4, category: 'Attire', item: 'Wedding Dress', budgeted: 1500, actual: 0, paid: false },\n            { id: 5, category: 'Flowers', item: 'Bouquet & Decorations', budgeted: 800, actual: 0, paid: false },\n            { id: 6, category: 'Music', item: 'DJ\/Band', budgeted: 1200, actual: 0, paid: false }\n        ];\n\n        let totalBudget = 25000;\n\n        \/\/ Update calculations\n        function updateCalculations() {\n            const totalBudgeted = expenses.reduce((sum, exp) => sum + exp.budgeted, 0);\n            const totalActual = expenses.reduce((sum, exp) => sum + exp.actual, 0);\n            const totalPaid = expenses.filter(exp => exp.paid).reduce((sum, exp) => sum + exp.actual, 0);\n            const remaining = totalBudget - totalActual;\n            const budgetProgress = totalBudget > 0 ? (totalActual \/ totalBudget) * 100 : 0;\n\n            \/\/ Update display\n            document.getElementById('totalBudgeted').textContent = '$' + totalBudgeted.toLocaleString();\n            document.getElementById('totalActual').textContent = '$' + totalActual.toLocaleString();\n            document.getElementById('remaining').textContent = '$' + remaining.toLocaleString();\n            document.getElementById('remaining').className = 'budget-display ' + (remaining >= 0 ? 'remaining-positive' : 'remaining-negative');\n            document.getElementById('progressPercent').textContent = budgetProgress.toFixed(1) + '% used';\n            document.getElementById('progressFill').style.width = Math.min(budgetProgress, 100) + '%';\n            document.getElementById('totalPaid').textContent = '$' + totalPaid.toLocaleString();\n            document.getElementById('stillOwe').textContent = '$' + (totalActual - totalPaid).toLocaleString();\n            document.getElementById('itemsPaid').textContent = expenses.filter(exp => exp.paid).length + ' \/ ' + expenses.length;\n\n            \/\/ Update progress bar color\n            const progressFill = document.getElementById('progressFill');\n            if (budgetProgress <= 80) {\n                progressFill.style.backgroundColor = '#502080';\n            } else if (budgetProgress <= 100) {\n                progressFill.style.backgroundColor = '#7c3aed';\n            } else {\n                progressFill.style.backgroundColor = '#ef4444';\n            }\n        }\n\n        \/\/ Render expenses table\n        function renderExpenses() {\n            const tbody = document.getElementById('expensesBody');\n            tbody.innerHTML = '';\n\n            expenses.forEach(expense => {\n                const row = document.createElement('tr');\n                row.innerHTML = `\n                    <td><span class=\"category-tag\">${expense.category}<\/span><\/td>\n                    <td>${expense.item}<\/td>\n                    <td><input type=\"number\" value=\"${expense.budgeted}\" class=\"expense-input\" onchange=\"updateExpense(${expense.id}, 'budgeted', this.value)\"><\/td>\n                    <td><input type=\"number\" value=\"${expense.actual}\" class=\"expense-input\" onchange=\"updateExpense(${expense.id}, 'actual', this.value)\"><\/td>\n                    <td><input type=\"checkbox\" ${expense.paid ? 'checked' : ''} class=\"checkbox\" onchange=\"updateExpense(${expense.id}, 'paid', this.checked)\"><\/td>\n                    <td><button class=\"delete-btn\" onclick=\"deleteExpense(${expense.id})\">\n                        <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                            <path fill-rule=\"evenodd\" d=\"M9 2a1 1 0 000 2h2a1 1 0 100-2H9zM4 5a2 2 0 012-2h8a2 2 0 012 2v10a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 112 0v4a1 1 0 11-2 0V9zm4 0a1 1 0 112 0v4a1 1 0 11-2 0V9z\" clip-rule=\"evenodd\"><\/path>\n                        <\/svg>\n                    <\/button><\/td>\n                `;\n                tbody.appendChild(row);\n            });\n        }\n\n        \/\/ Render category breakdown\n        function renderCategoryBreakdown() {\n            const categoryTotals = {};\n            expenses.forEach(exp => {\n                if (!categoryTotals[exp.category]) {\n                    categoryTotals[exp.category] = { budgeted: 0, actual: 0 };\n                }\n                categoryTotals[exp.category].budgeted += exp.budgeted;\n                categoryTotals[exp.category].actual += exp.actual;\n            });\n\n            const container = document.getElementById('categoryBreakdown');\n            container.innerHTML = '';\n\n            Object.entries(categoryTotals).forEach(([category, totals]) => {\n                const progressPercent = totals.budgeted > 0 ? Math.min((totals.actual \/ totals.budgeted) * 100, 100) : 0;\n                \n                const categoryDiv = document.createElement('div');\n                categoryDiv.className = 'category-item';\n                categoryDiv.innerHTML = `\n                    <div>\n                        <div class=\"category-name\">${category}<\/div>\n                        <div class=\"category-amounts\">$${totals.actual.toLocaleString()} \/ $${totals.budgeted.toLocaleString()}<\/div>\n                        <div class=\"category-progress\">\n                            <div class=\"category-progress-fill\" style=\"width: ${progressPercent}%\"><\/div>\n                        <\/div>\n                    <\/div>\n                `;\n                container.appendChild(categoryDiv);\n            });\n        }\n\n        \/\/ Update expense\n        function updateExpense(id, field, value) {\n            const expense = expenses.find(exp => exp.id === id);\n            if (expense) {\n                if (field === 'budgeted' || field === 'actual') {\n                    expense[field] = parseFloat(value) || 0;\n                } else {\n                    expense[field] = value;\n                }\n                updateCalculations();\n                renderCategoryBreakdown();\n            }\n        }\n\n        \/\/ Delete expense\n        function deleteExpense(id) {\n            expenses = expenses.filter(exp => exp.id !== id);\n            renderExpenses();\n            updateCalculations();\n            renderCategoryBreakdown();\n        }\n\n        \/\/ Add new expense\n        function addExpense() {\n            const category = document.getElementById('newCategory').value;\n            const item = document.getElementById('newItem').value;\n            const budgeted = document.getElementById('newBudgeted').value;\n            const actual = document.getElementById('newActual').value;\n\n            if (category && item && budgeted) {\n                const newExpense = {\n                    id: Date.now(),\n                    category: category,\n                    item: item,\n                    budgeted: parseFloat(budgeted) || 0,\n                    actual: parseFloat(actual) || 0,\n                    paid: false\n                };\n\n                expenses.push(newExpense);\n                \n                \/\/ Clear form\n                document.getElementById('newCategory').value = '';\n                document.getElementById('newItem').value = '';\n                document.getElementById('newBudgeted').value = '';\n                document.getElementById('newActual').value = '';\n\n                renderExpenses();\n                updateCalculations();\n                renderCategoryBreakdown();\n            }\n        }\n\n        \/\/ Update total budget\n        document.getElementById('totalBudget').addEventListener('input', function(e) {\n            totalBudget = parseFloat(e.target.value) || 0;\n            updateCalculations();\n        });\n\n        \/\/ Add dollar sign to budget input\n        document.getElementById('totalBudget').addEventListener('focus', function(e) {\n            if (!e.target.value.startsWith('$')) {\n                e.target.value = '$' + e.target.value;\n            }\n        });\n\n        document.getElementById('totalBudget').addEventListener('blur', function(e) {\n            let value = e.target.value.replace('$', '');\n            totalBudget = parseFloat(value) || 0;\n            e.target.value = totalBudget;\n            updateCalculations();\n        });\n\n        \/\/ Initialize\n        renderExpenses();\n        updateCalculations();\n        renderCategoryBreakdown();\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Wedding Cost Tracker Wedding Budget Tracker Plan and track your perfect day within budget Total Budget Total Budgeted $20,000 Total Actual $0 Remaining $25,000 Budget Progress 0.0% used Wedding Expenses&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_eb_attr":"","_lmt_disableupdate":"","_lmt_disable":"","fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-84546","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.4 (Yoast SEO v25.4) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Wedding Budget Tracker - Joy<\/title>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<link rel=\"canonical\" href=\"https:\/\/withjoy.com\/blog\/wedding-budget-tracker\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wedding Budget Tracker\" \/>\n<meta property=\"og:description\" content=\"Wedding Cost Tracker Wedding Budget Tracker Plan and track your perfect day within budget Total Budget Total Budgeted $20,000 Total Actual $0 Remaining\" \/>\n<meta property=\"og:url\" content=\"https:\/\/withjoy.com\/blog\/wedding-budget-tracker\/\" \/>\n<meta property=\"og:site_name\" content=\"Joy\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joytheapp\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-06-02T11:10:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-02T11:11:22+00:00\" \/>\n<meta name=\"author\" content=\"Joy Editors\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoytheApp\" \/>\n<meta name=\"twitter:site\" content=\"@JoytheApp\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joy Editors\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/withjoy.com\/blog\/wedding-budget-tracker\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/withjoy.com\/blog\/wedding-budget-tracker\/\"},\"author\":{\"name\":\"Joy Editors\",\"@id\":\"https:\/\/withjoy.com\/#\/schema\/person\/7f95a21546d18192572f4c68b44d6b1e\"},\"headline\":\"Wedding Budget Tracker\",\"datePublished\":\"2025-06-02T11:10:17+00:00\",\"dateModified\":\"2025-06-02T11:11:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/withjoy.com\/blog\/wedding-budget-tracker\/\"},\"wordCount\":59,\"publisher\":{\"@id\":\"https:\/\/withjoy.com\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/withjoy.com\/blog\/wedding-budget-tracker\/\",\"url\":\"https:\/\/withjoy.com\/blog\/wedding-budget-tracker\/\",\"name\":\"Wedding Budget Tracker - Joy\",\"isPartOf\":{\"@id\":\"https:\/\/withjoy.com\/#website\"},\"datePublished\":\"2025-06-02T11:10:17+00:00\",\"dateModified\":\"2025-06-02T11:11:22+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/withjoy.com\/blog\/wedding-budget-tracker\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/withjoy.com\/blog\/wedding-budget-tracker\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/withjoy.com\/blog\/wedding-budget-tracker\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inspiration\",\"item\":\"https:\/\/withjoy.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Wedding Budget Tracker\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/withjoy.com\/#website\",\"url\":\"https:\/\/withjoy.com\/\",\"name\":\"Joy\",\"description\":\"Wedding Planning Ideas &amp; Inspiration\",\"publisher\":{\"@id\":\"https:\/\/withjoy.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/withjoy.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/withjoy.com\/#organization\",\"name\":\"Joy\",\"url\":\"https:\/\/withjoy.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/withjoy.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/withjoy.com\/blog\/wp-content\/uploads\/2021\/03\/joy-new-logo.svg\",\"contentUrl\":\"https:\/\/withjoy.com\/blog\/wp-content\/uploads\/2021\/03\/joy-new-logo.svg\",\"width\":81,\"height\":50,\"caption\":\"Joy\"},\"image\":{\"@id\":\"https:\/\/withjoy.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/joytheapp\/\",\"https:\/\/x.com\/JoytheApp\",\"https:\/\/www.instagram.com\/joytheapp\/\",\"https:\/\/www.linkedin.com\/company\/joy-the-app\",\"https:\/\/www.pinterest.com\/JoyTheApp\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/withjoy.com\/#\/schema\/person\/7f95a21546d18192572f4c68b44d6b1e\",\"name\":\"Joy Editors\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/withjoy.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/75808d1ca6343fd372b43794ab9b28f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/75808d1ca6343fd372b43794ab9b28f4?s=96&d=mm&r=g\",\"caption\":\"Joy Editors\"},\"description\":\"Since 2016, Joy's editing team has had one mission: help make wedding planning more intuitive, thoughtful, and personal with each article! With decades of experience in the wedding industry, our editors bring a wealth of knowledge and expertise to turn your wedding dreams into reality. We're committed to inspiring and supporting every couple on their journey to happily ever after. For guidance or questions, contact us at support@withjoy.com.\",\"sameAs\":[\"https:\/\/withjoy.com\",\"https:\/\/www.linkedin.com\/company\/withjoy\",\"JoyTheApp\/\",\"https:\/\/x.com\/JoytheApp\"],\"url\":\"https:\/\/withjoy.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wedding Budget Tracker - Joy","robots":{"index":"index","follow":"follow"},"canonical":"https:\/\/withjoy.com\/blog\/wedding-budget-tracker\/","og_locale":"en_US","og_type":"article","og_title":"Wedding Budget Tracker","og_description":"Wedding Cost Tracker Wedding Budget Tracker Plan and track your perfect day within budget Total Budget Total Budgeted $20,000 Total Actual $0 Remaining","og_url":"https:\/\/withjoy.com\/blog\/wedding-budget-tracker\/","og_site_name":"Joy","article_publisher":"https:\/\/www.facebook.com\/joytheapp\/","article_published_time":"2025-06-02T11:10:17+00:00","article_modified_time":"2025-06-02T11:11:22+00:00","author":"Joy Editors","twitter_card":"summary_large_image","twitter_creator":"@JoytheApp","twitter_site":"@JoytheApp","twitter_misc":{"Written by":"Joy Editors","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/withjoy.com\/blog\/wedding-budget-tracker\/#article","isPartOf":{"@id":"https:\/\/withjoy.com\/blog\/wedding-budget-tracker\/"},"author":{"name":"Joy Editors","@id":"https:\/\/withjoy.com\/#\/schema\/person\/7f95a21546d18192572f4c68b44d6b1e"},"headline":"Wedding Budget Tracker","datePublished":"2025-06-02T11:10:17+00:00","dateModified":"2025-06-02T11:11:22+00:00","mainEntityOfPage":{"@id":"https:\/\/withjoy.com\/blog\/wedding-budget-tracker\/"},"wordCount":59,"publisher":{"@id":"https:\/\/withjoy.com\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/withjoy.com\/blog\/wedding-budget-tracker\/","url":"https:\/\/withjoy.com\/blog\/wedding-budget-tracker\/","name":"Wedding Budget Tracker - Joy","isPartOf":{"@id":"https:\/\/withjoy.com\/#website"},"datePublished":"2025-06-02T11:10:17+00:00","dateModified":"2025-06-02T11:11:22+00:00","breadcrumb":{"@id":"https:\/\/withjoy.com\/blog\/wedding-budget-tracker\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/withjoy.com\/blog\/wedding-budget-tracker\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/withjoy.com\/blog\/wedding-budget-tracker\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inspiration","item":"https:\/\/withjoy.com\/"},{"@type":"ListItem","position":2,"name":"Wedding Budget Tracker"}]},{"@type":"WebSite","@id":"https:\/\/withjoy.com\/#website","url":"https:\/\/withjoy.com\/","name":"Joy","description":"Wedding Planning Ideas &amp; Inspiration","publisher":{"@id":"https:\/\/withjoy.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/withjoy.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/withjoy.com\/#organization","name":"Joy","url":"https:\/\/withjoy.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/withjoy.com\/#\/schema\/logo\/image\/","url":"https:\/\/withjoy.com\/blog\/wp-content\/uploads\/2021\/03\/joy-new-logo.svg","contentUrl":"https:\/\/withjoy.com\/blog\/wp-content\/uploads\/2021\/03\/joy-new-logo.svg","width":81,"height":50,"caption":"Joy"},"image":{"@id":"https:\/\/withjoy.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/joytheapp\/","https:\/\/x.com\/JoytheApp","https:\/\/www.instagram.com\/joytheapp\/","https:\/\/www.linkedin.com\/company\/joy-the-app","https:\/\/www.pinterest.com\/JoyTheApp\/"]},{"@type":"Person","@id":"https:\/\/withjoy.com\/#\/schema\/person\/7f95a21546d18192572f4c68b44d6b1e","name":"Joy Editors","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/withjoy.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/75808d1ca6343fd372b43794ab9b28f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/75808d1ca6343fd372b43794ab9b28f4?s=96&d=mm&r=g","caption":"Joy Editors"},"description":"Since 2016, Joy's editing team has had one mission: help make wedding planning more intuitive, thoughtful, and personal with each article! With decades of experience in the wedding industry, our editors bring a wealth of knowledge and expertise to turn your wedding dreams into reality. We're committed to inspiring and supporting every couple on their journey to happily ever after. For guidance or questions, contact us at support@withjoy.com.","sameAs":["https:\/\/withjoy.com","https:\/\/www.linkedin.com\/company\/withjoy","JoyTheApp\/","https:\/\/x.com\/JoytheApp"],"url":"https:\/\/withjoy.com\/blog\/author\/admin\/"}]}},"modified_by":"sankar ponnusamy","_links":{"self":[{"href":"https:\/\/withjoy.com\/blog\/wp-json\/wp\/v2\/posts\/84546","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/withjoy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/withjoy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/withjoy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/withjoy.com\/blog\/wp-json\/wp\/v2\/comments?post=84546"}],"version-history":[{"count":1,"href":"https:\/\/withjoy.com\/blog\/wp-json\/wp\/v2\/posts\/84546\/revisions"}],"predecessor-version":[{"id":84549,"href":"https:\/\/withjoy.com\/blog\/wp-json\/wp\/v2\/posts\/84546\/revisions\/84549"}],"wp:attachment":[{"href":"https:\/\/withjoy.com\/blog\/wp-json\/wp\/v2\/media?parent=84546"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/withjoy.com\/blog\/wp-json\/wp\/v2\/categories?post=84546"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/withjoy.com\/blog\/wp-json\/wp\/v2\/tags?post=84546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}