-
+
@@ -391,6 +417,15 @@ const app = {
snowflake.style.opacity = Math.random() * 0.7 + 0.3;
snowContainer.appendChild(snowflake);
}
+ },
+ loadCheckedItems() {
+ const checkedItems = localStorage.getItem('checkedItems');
+ if (checkedItems) {
+ app.state.checkedItems = JSON.parse(checkedItems);
+ }
+ },
+ saveCheckedItems() {
+ localStorage.setItem('checkedItems', JSON.stringify(app.state.checkedItems));
}
},
events: {
@@ -457,32 +492,50 @@ const app = {
});
app.dom.recipeCardsContainer.addEventListener('click', function(e) {
- const target = e.target;
- const card = target.closest('.col-12[data-id]');
+ const target = e.target.closest('button');
+ const card = e.target.closest('.col-12[data-id]');
if (!card) return;
const recipeId = card.getAttribute('data-id');
- if (target.classList.contains('delete-recipe')) {
+ if (target && target.classList.contains('delete-recipe')) {
if (confirm('Are you sure you want to delete this recipe?')) {
app.api.deleteRecipe(recipeId);
}
}
- if (target.classList.contains('edit-recipe')) {
+ if (target && target.classList.contains('edit-recipe')) {
app.ui.populateFormForEdit(recipeId);
}
- if (target.classList.contains('view-recipe')) {
+ if (target && target.classList.contains('view-recipe')) {
app.ui.populateViewModal(recipeId);
}
});
+ app.dom.recipeCardsContainer.addEventListener('input', function(e) {
+ if (e.target.classList.contains('recipe-guests-input') || e.target.classList.contains('recipe-portions-input')) {
+ app.ui.updateShoppingList();
+ }
+ });
+
app.dom.shoppingListContainer.addEventListener('click', function(e) {
if (e.target.matches('.form-check-input')) {
const listItem = e.target.closest('.list-group-item');
if (listItem) {
listItem.classList.toggle('checked', e.target.checked);
+ const itemKey = e.target.dataset.key;
+ if (e.target.checked) {
+ if (!app.state.checkedItems.includes(itemKey)) {
+ app.state.checkedItems.push(itemKey);
+ }
+ } else {
+ const index = app.state.checkedItems.indexOf(itemKey);
+ if (index > -1) {
+ app.state.checkedItems.splice(index, 1);
+ }
+ }
+ app.ui.saveCheckedItems();
}
} else if (e.target.matches('.increment-item')) {
const key = e.target.dataset.key;
@@ -569,8 +622,7 @@ const app = {
}
});
- app.dom.guestCountInput.addEventListener('input', app.ui.updateShoppingList);
- app.dom.portionsPerGuestInput.addEventListener('input', app.ui.updateShoppingList);
+
app.dom.cancelEditBtn.addEventListener('click', function() {
app.ui.clearForm();
@@ -624,12 +676,6 @@ const app = {
});
e.target.classList.remove('btn-outline-secondary');
e.target.classList.add('btn-secondary');
-
- if (e.target.textContent.trim() === 'pack') {
- app.dom.productCategoryWrapper.style.display = 'block';
- } else {
- app.dom.productCategoryWrapper.style.display = 'none';
- }
}
}
});
@@ -647,11 +693,6 @@ const app = {
return;
}
- if (unit === 'pack' && category === 'Choose...') {
- alert('Please select a category for products in packs.');
- return;
- }
-
if (!app.state.additionalProducts) {
app.state.additionalProducts = [];
}
@@ -662,10 +703,7 @@ const app = {
if (existingProduct) {
existingProduct.quantity += quantity;
} else {
- const newProduct = { name, quantity, unit, source: 'Additional product' };
- if (unit === 'pack') {
- newProduct.category = category;
- }
+ const newProduct = { name, quantity, unit, source: 'Additional product', category: category };
app.state.additionalProducts.push(newProduct);
}
@@ -674,8 +712,7 @@ const app = {
// Reset form
app.dom.productNameInput.value = '';
app.dom.productQuantityInput.value = '1';
- app.dom.productCategory.value = 'Choose...';
- app.dom.productCategoryWrapper.style.display = 'none';
+ app.dom.productCategory.value = 'Food';
const unitButtons = app.dom.addProductModal._element.querySelectorAll('.unit-selector .unit-btn');
unitButtons.forEach((btn, index) => {
@@ -691,7 +728,15 @@ const app = {
app.dom.addProductModal.hide();
});
-
+ app.dom.musicToggle.addEventListener('click', function() {
+ if (app.dom.christmasMusic.paused) {
+ app.dom.christmasMusic.play();
+ app.dom.musicToggle.innerHTML = '
';
+ } else {
+ app.dom.christmasMusic.pause();
+ app.dom.musicToggle.innerHTML = '
';
+ }
+ });
document.getElementById('recipe-form-modal').addEventListener('show.bs.modal', function () {
if (!app.dom.recipeIdInput.value) {
@@ -726,10 +771,13 @@ const app = {
productQuantityInput: document.getElementById('productQuantity'),
productCategoryWrapper: document.getElementById('product-category-wrapper'),
productCategory: document.getElementById('productCategory'),
+ christmasMusic: document.getElementById('christmas-music'),
+ musicToggle: document.getElementById('music-toggle'),
};
app.ui.createSnowflakes();
+ app.ui.loadCheckedItems();
app.events.attachEventListeners();
app.dom.cancelEditBtn.style.display = 'none';
app.ui.addIngredientRow();
diff --git a/db/migrations/004_add_category_to_ingredients.sql b/db/migrations/004_add_category_to_ingredients.sql
new file mode 100644
index 0000000..e373f8c
--- /dev/null
+++ b/db/migrations/004_add_category_to_ingredients.sql
@@ -0,0 +1 @@
+ALTER TABLE `ingredients` ADD `category` VARCHAR(50) NOT NULL DEFAULT 'food';
\ No newline at end of file
diff --git a/index.php b/index.php
index 166f80f..3b6f718 100644
--- a/index.php
+++ b/index.php
@@ -45,6 +45,7 @@
Hey, it's Christmas time!
Let's get your holiday recipes sorted.
+
@@ -197,12 +198,13 @@
+
@@ -243,6 +245,13 @@
© Christmas Recipe Calculator. Happy Holidays!
+
+
+