Add 1 files

index.html

@@ -101,57 +101,7 @@
             </div>
 
             <div id="expensesList" class="space-y-3 sm:space-y-4">
-                <!-- Default categories -->
-                <div class="expense-item animate-fade-in">
-                    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 sm:gap-0">
-                        <div class="flex items-center sm:w-2/5">
-                            <i class="fas fa-pills text-purple-500 mr-2 text-sm sm:text-base"></i>
-                            <span class="text-gray-700 text-sm sm:text-base">Vitamins</span>
-                        </div>
-                        <div class="flex items-center sm:w-3/5">
-                            <span class="expense-currency mr-2 text-gray-700 text-sm sm:text-base">$</span>
-                            <input type="number" placeholder="Amount" 
-                                   class="expense-input flex-1 border-b-2 border-gray-300 py-1 px-1 focus:border-indigo-500 focus:outline-none text-sm sm:text-base">
-                            <button class="delete-btn ml-2 sm:ml-3 text-red-500 hover:text-red-700 text-sm sm:text-base">
-                                <i class="fas fa-trash"></i>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="expense-item animate-fade-in">
-                    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 sm:gap-0">
-                        <div class="flex items-center sm:w-2/5">
-                            <i class="fas fa-dumbbell text-blue-500 mr-2 text-sm sm:text-base"></i>
-                            <span class="text-gray-700 text-sm sm:text-base">Sports</span>
-                        </div>
-                        <div class="flex items-center sm:w-3/5">
-                            <span class="expense-currency mr-2 text-gray-700 text-sm sm:text-base">$</span>
-                            <input type="number" placeholder="Amount" 
-                                   class="expense-input flex-1 border-b-2 border-gray-300 py-1 px-1 focus:border-indigo-500 focus:outline-none text-sm sm:text-base">
-                            <button class="delete-btn ml-2 sm:ml-3 text-red-500 hover:text-red-700 text-sm sm:text-base">
-                                <i class="fas fa-trash"></i>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="expense-item animate-fade-in">
-                    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 sm:gap-0">
-                        <div class="flex items-center sm:w-2/5">
-                            <i class="fas fa-utensils text-orange-500 mr-2 text-sm sm:text-base"></i>
-                            <span class="text-gray-700 text-sm sm:text-base">Food</span>
-                        </div>
-                        <div class="flex items-center sm:w-3/5">
-                            <span class="expense-currency mr-2 text-gray-700 text-sm sm:text-base">$</span>
-                            <input type="number" placeholder="Amount" 
-                                   class="expense-input flex-1 border-b-2 border-gray-300 py-1 px-1 focus:border-indigo-500 focus:outline-none text-sm sm:text-base">
-                            <button class="delete-btn ml-2 sm:ml-3 text-red-500 hover:text-red-700 text-sm sm:text-base">
-                                <i class="fas fa-trash"></i>
-                            </button>
-                        </div>
-                    </div>
-                </div>
+                <!-- Items will be added here dynamically -->
             </div>
         </div>
 
@@ -177,6 +127,9 @@
                         <option value="fa-wifi">Utilities</option>
                         <option value="fa-gift">Gifts</option>
                         <option value="fa-plane">Travel</option>
+                        <option value="fa-pills">Vitamins</option>
+                        <option value="fa-dumbbell">Sports</option>
+                        <option value="fa-utensils">Food</option>
                     </select>
                 </div>
                 <div class="flex justify-end space-x-2 sm:space-x-3">
@@ -207,8 +160,78 @@
             const currencyPicker = document.getElementById('currencyPicker');
             const currencySymbol = document.getElementById('currencySymbol');
 
-            let salary = 0;
-            let currentCurrency = '$';
+            // Load data from localStorage
+            let salary = parseFloat(localStorage.getItem('salary')) || 0;
+            let currentCurrency = localStorage.getItem('currency') || '$';
+            let expenses = JSON.parse(localStorage.getItem('expenses')) || [];
+
+            // Initialize the app with saved data
+            function initApp() {
+                // Set currency
+                currencyPicker.value = currentCurrency;
+                currencySymbol.textContent = currentCurrency;
+                
+                // Set salary if exists
+                if (salary > 0) {
+                    salaryInput.value = salary;
+                    updateSummaryDisplay();
+                    summarySection.classList.remove('hidden');
+                    expensesSection.classList.remove('hidden');
+                }
+
+                // Load expenses
+                if (expenses.length > 0) {
+                    expenses.forEach(expense => {
+                        addExpenseItem(expense.name, expense.amount, expense.icon);
+                    });
+                } else {
+                    // Add default categories if no expenses exist
+                    addDefaultCategories();
+                }
+                
+                calculateRemaining();
+            }
+
+            // Add default categories if no expenses exist
+            function addDefaultCategories() {
+                const defaultCategories = [
+                    { name: 'Vitamins', icon: 'fa-pills', color: 'purple' },
+                    { name: 'Sports', icon: 'fa-dumbbell', color: 'blue' },
+                    { name: 'Food', icon: 'fa-utensils', color: 'orange' }
+                ];
+                
+                defaultCategories.forEach(category => {
+                    addExpenseItem(category.name, 0, category.icon, category.color);
+                });
+            }
+
+            // Add an expense item to the DOM
+            function addExpenseItem(name, amount, icon, color = 'indigo') {
+                const newItem = document.createElement('div');
+                newItem.className = 'expense-item animate-fade-in';
+                newItem.innerHTML = `
+                    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 sm:gap-0">
+                        <div class="flex items-center sm:w-2/5">
+                            <i class="fas ${icon} text-${color}-500 mr-2 text-sm sm:text-base"></i>
+                            <span class="text-gray-700 text-sm sm:text-base">${name}</span>
+                        </div>
+                        <div class="flex items-center sm:w-3/5">
+                            <span class="expense-currency mr-2 text-gray-700 text-sm sm:text-base">${currentCurrency}</span>
+                            <input type="number" placeholder="Amount" value="${amount || ''}" 
+                                   class="expense-input flex-1 border-b-2 border-gray-300 py-1 px-1 focus:border-indigo-500 focus:outline-none text-sm sm:text-base">
+                            <button class="delete-btn ml-2 sm:ml-3 text-red-500 hover:text-red-700 text-sm sm:text-base">
+                                <i class="fas fa-trash"></i>
+                            </button>
+                        </div>
+                    </div>
+                `;
+                
+                expensesList.appendChild(newItem);
+                newItem.querySelector('.expense-input').addEventListener('input', function() {
+                    updateExpensesInStorage();
+                    calculateRemaining();
+                });
+            }
 
             // Update currency symbols
             function updateCurrencySymbols() {
@@ -221,9 +244,28 @@
                 updateSummaryDisplay();
             }
 
+            // Save expenses to localStorage
+            function updateExpensesInStorage() {
+                expenses = [];
+                document.querySelectorAll('.expense-item').forEach(item => {
+                    const name = item.querySelector('span').textContent;
+                    const icon = item.querySelector('i').className.match(/fa-[a-z-]+/)[0];
+                    const amount = parseFloat(item.querySelector('.expense-input').value) || 0;
+                    
+                    expenses.push({
+                        name: name,
+                        amount: amount,
+                        icon: icon
+                    });
+                });
+                
+                localStorage.setItem('expenses', JSON.stringify(expenses));
+            }
+
             // Currency picker change handler
             currencyPicker.addEventListener('change', function() {
                 currentCurrency = this.value;
+                localStorage.setItem('currency', currentCurrency);
                 updateCurrencySymbols();
             });
 
@@ -232,6 +274,7 @@
                 const value = parseFloat(salaryInput.value);
                 if (!isNaN(value) && value > 0) {
                     salary = value;
+                    localStorage.setItem('salary', salary.toString());
                     updateSummaryDisplay();
                     summarySection.classList.remove('hidden');
                     expensesSection.classList.remove('hidden');
@@ -242,11 +285,6 @@
                 }
             });
 
-            // Add event listeners to existing expense inputs
-            document.querySelectorAll('.expense-input').forEach(input => {
-                input.addEventListener('input', calculateRemaining);
-            });
-
             // Delete expense item
             expensesList.addEventListener('click', function(e) {
                 if (e.target.classList.contains('delete-btn') || e.target.closest('.delete-btn')) {
@@ -254,6 +292,7 @@
                     item.classList.add('hidden');
                     setTimeout(() => {
                         item.remove();
+                        updateExpensesInStorage();
                         calculateRemaining();
                     }, 300);
                 }
@@ -277,28 +316,8 @@
                 const icon = newCategoryIcon.value;
                 
                 if (name) {
-                    const newItem = document.createElement('div');
-                    newItem.className = 'expense-item animate-fade-in';
-                    newItem.innerHTML = `
-                        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 sm:gap-0">
-                            <div class="flex items-center sm:w-2/5">
-                                <i class="fas ${icon} text-indigo-500 mr-2 text-sm sm:text-base"></i>
-                                <span class="text-gray-700 text-sm sm:text-base">${name}</span>
-                            </div>
-                            <div class="flex items-center sm:w-3/5">
-                                <span class="expense-currency mr-2 text-gray-700 text-sm sm:text-base">${currentCurrency}</span>
-                                <input type="number" placeholder="Amount" 
-                                       class="expense-input flex-1 border-b-2 border-gray-300 py-1 px-1 focus:border-indigo-500 focus:outline-none text-sm sm:text-base">
-                                <button class="delete-btn ml-2 sm:ml-3 text-red-500 hover:text-red-700 text-sm sm:text-base">
-                                    <i class="fas fa-trash"></i>
-                                </button>
-                            </div>
-                        </div>
-                    `;
-                    
-                    expensesList.appendChild(newItem);
-                    newItem.querySelector('.expense-input').addEventListener('input', calculateRemaining);
-                    
+                    addExpenseItem(name, 0, icon);
+                    updateExpensesInStorage();
                     addCategoryModal.classList.add('hidden');
                     newCategoryName.value = '';
                 } else {
@@ -339,7 +358,10 @@
                     remainingSalaryDisplay.classList.add('text-green-800');
                 }
             }
+
+            // Initialize the app
+            initApp();
         });
     </script>
-<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=Digiator/spend-planner" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
+</body>
 </html>