// Data storagelet categories = [];let subcategories = [];// DOM Elementsconst categoryForm = document.getElementById('categoryForm');const subcategoryForm = document.getElementById('subcategoryForm');const categoryList = document.getElementById('categoryList');const parentCategorySelect = document.getElementById('parentCategory');// Event Listenersdocument.addEventListener('DOMContentLoaded', () => { categoryForm.addEventListener('submit', handleCategorySubmit); subcategoryForm.addEventListener('submit', handleSubcategorySubmit); loadFromLocalStorage(); renderCategories();});// Functionsfunction handleCategorySubmit(e) { e.preventDefault(); const id = document.getElementById('categoryId').value; const name = document.getElementById('categoryName').value; if (id) { // Update existing category const index = categories.findIndex(cat => cat.id === id); categories[index].name = name; } else { // Add new category categories.push({ id: Date.now().toString(), name }); } saveToLocalStorage(); renderCategories(); categoryForm.reset(); document.getElementById('categoryId').value = '';}function handleSubcategorySubmit(e) { e.preventDefault(); const id = document.getElementById('subcategoryId').value; const parentId = document.getElementById('parentCategory').value; const name = document.getElementById('subcategoryName').value; if (id) { // Update existing subcategory const index = subcategories.findIndex(subcat => subcat.id === id); subcategories[index].name = name; subcategories[index].parentId = parentId; } else { // Add new subcategory subcategories.push({ id: Date.now().toString(), parentId, name }); } saveToLocalStorage(); renderCategories(); subcategoryForm.reset(); document.getElementById('subcategoryId').value = '';}function renderCategories() { categoryList.innerHTML = ''; parentCategorySelect.innerHTML = 'Select a category'; categories.forEach(category => { const li = document.createElement('li'); li.className = 'list-group-item'; li.innerHTML = ` ${category.name} Edit Delete `; const subList = document.createElement('ul'); subList.className = 'list-group mt-2'; const subCategories = subcategories.filter(sub => sub.parentId === category.id); subCategories.forEach(sub => { const subLi = document.createElement('li'); subLi.className = 'list-group-item'; subLi.innerHTML = ` ${sub.name} Edit Delete `; subList.appendChild(subLi); }); li.appendChild(subList); categoryList.appendChild(li); // Populate parent category select const option = document.createElement('option'); option.value = category.id; option.textContent = category.name; parentCategorySelect.appendChild(option); });}function editCategory(id) { const category = categories.find(cat => cat.id === id); document.getElementById('categoryId').value = category.id; document.getElementById('categoryName').value = category.name;}function deleteCategory(id) { categories = categories.filter(cat => cat.id !== id); subcategories = subcategories.filter(sub => sub.parentId !== id); saveToLocalStorage(); renderCategories();}function editSubcategory(id) { const subcategory = subcategories.find(sub => sub.id === id); document.getElementById('subcategoryId').value = subcategory.id; document.getElementById('parentCategory').value = subcategory.parentId; document.getElementById('subcategoryName').value = subcategory.name;}function deleteSubcategory(id) { subcategories = subcategories.filter(sub => sub.id !== id); saveToLocalStorage(); renderCategories();}function saveToLocalStorage() { localStorage.setItem('categories', JSON.stringify(categories)); localStorage.setItem('subcategories', JSON.stringify(subcategories));}function loadFromLocalStorage() { const storedCategories = localStorage.getItem('categories'); const storedSubcategories = localStorage.getItem('subcategories'); if (storedCategories) { categories = JSON.parse(storedCategories); } if (storedSubcategories) { subcategories = JSON.parse(storedSubcategories); }}