Inicio
Comentar
Imágenes
Webgae
Notas storage
HTML
Shopping List
Add Item
Clear All
CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap'); *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; font-size: 16px; line-height: 1.5; color: #333; background-color: #f5f5f5; } header { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 20px; } header h1 { font-weight: 300; margin-left: 10px; } .container { max-width: 500px; margin: 30px auto; padding: 20px; } .edit-mode { color: #ccc; } /* Form & Input */ .form-input { width: 100%; font-size: 18px; margin-bottom: 20px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; outline: none; } .form-input-filter { margin-top: 20px; width: 100%; font-size: 18px; margin-bottom: 20px; padding: 10px; border: none; border-bottom: 1px solid #ccc; background: transparent; outline: none; } /* Buttons */ .btn { background-color: #333; color: #fff; border: none; border-radius: 5px; padding: 10px 20px; cursor: pointer; } .btn:hover { background-color: #444; } .btn-link { font-size: 16px; background-color: transparent; color: #333; border: none; padding: 0; cursor: pointer; } .btn-clear { margin-top: 20px; width: 100%; font-size: 16px; background-color: transparent; color: #333; border: 1px solid #ccc; border-radius: 5px; padding: 10px 20px; cursor: pointer; } .btn-clear:hover { background-color: #f1f1f1; } .text-red { color: red; } /* Items */ .items { margin-top: 20px; display: flex; flex-wrap: wrap; } .items li { display: flex; justify-content: space-between; width: 45%; border: 1px solid #ccc; border-radius: 5px; padding: 10px 15px; margin: 0 5px 20px; font-weight: 700; cursor: pointer; } @media (max-width: 500px) { .items li { width: 100%; } }
JavaScript
const itemForm = document.getElementById('item-form'); const itemInput = document.getElementById('item-input'); const itemList = document.getElementById('item-list'); const clearBtn = document.getElementById('clear'); const itemFilter = document.getElementById('filter'); const formBtn = itemForm.querySelector('button'); let isEditMode = false; function displayItems() { const itemsFromStorage = getItemsFromStorage(); itemsFromStorage.forEach((item) => addItemToDOM(item)); checkUI(); } function onAddItemSubmit(e) { e.preventDefault(); // trim the input value to remove whitespace - disallowing duplicate items due to white space in the process const newItem = itemInput.value.trim(); // Validate Input if (newItem === '') { alert('Please add an item'); return; } // Check for edit mode if (isEditMode) { const itemToEdit = itemList.querySelector('.edit-mode'); removeItemFromStorage(itemToEdit.textContent); itemToEdit.classList.remove('edit-mode'); itemToEdit.remove(); isEditMode = false; } else { if (checkIfItemExists(newItem)) { alert(`The item "${newItem}" already exists!`); return; } } // Create item DOM element addItemToDOM(newItem); // Add item to local storage addItemToStorage(newItem); checkUI(); itemInput.value = ''; } function addItemToDOM(item) { // Create list item const li = document.createElement('li'); li.appendChild(document.createTextNode(item)); const button = createButton('remove-item btn-link text-red'); li.appendChild(button); // Add li to the DOM itemList.appendChild(li); } function createButton(classes) { const button = document.createElement('button'); button.className = classes; const icon = createIcon('fa-solid fa-xmark'); button.appendChild(icon); return button; } function createIcon(classes) { const icon = document.createElement('i'); icon.className = classes; return icon; } function addItemToStorage(item) { const itemsFromStorage = getItemsFromStorage(); // Add new item to array itemsFromStorage.push(item); // Convert to JSON string and set to local storage localStorage.setItem('items', JSON.stringify(itemsFromStorage)); } function getItemsFromStorage() { let itemsFromStorage; if (localStorage.getItem('items') === null) { itemsFromStorage = []; } else { itemsFromStorage = JSON.parse(localStorage.getItem('items')); } return itemsFromStorage; } function onClickItem(e) { if (e.target.parentElement.classList.contains('remove-item')) { removeItem(e.target.parentElement.parentElement); } else if (e.target.closest('li')) { setItemToEdit(e.target); } } function checkIfItemExists(item) { const itemsFromStorage = getItemsFromStorage(); return itemsFromStorage.includes(item); } function setItemToEdit(item) { isEditMode = true; itemList .querySelectorAll('li') .forEach((i) => i.classList.remove('edit-mode')); item.classList.add('edit-mode'); formBtn.innerHTML = '
Update Item'; formBtn.style.backgroundColor = '#228B22'; itemInput.value = item.textContent; } function removeItem(item) { if ( confirm(`Are you sure you want to remove the item "${item.textContent}"?`) ) { // Remove item from DOM item.remove(); // Remove item from storage removeItemFromStorage(item.textContent); checkUI(); } } function removeItemFromStorage(item) { let itemsFromStorage = getItemsFromStorage(); // Filter out item to be removed itemsFromStorage = itemsFromStorage.filter((i) => i !== item); // Re-set to localstorage localStorage.setItem('items', JSON.stringify(itemsFromStorage)); } function clearItems() { while (itemList.firstChild) { itemList.removeChild(itemList.firstChild); } // Clear from localStorage localStorage.removeItem('items'); checkUI(); } function filterItems(e) { const items = itemList.querySelectorAll('li'); const text = e.target.value.toLowerCase(); items.forEach((item) => { const itemName = item.firstChild.textContent.toLowerCase(); if (itemName.indexOf(text) != -1) { item.style.display = 'flex'; } else { item.style.display = 'none'; } }); } function checkUI() { itemInput.value = ''; const items = itemList.querySelectorAll('li'); if (items.length === 0) { clearBtn.style.display = 'none'; itemFilter.style.display = 'none'; } else { clearBtn.style.display = 'block'; itemFilter.style.display = 'block'; } formBtn.innerHTML = '
Add Item'; formBtn.style.backgroundColor = '#333'; isEditMode = false; } // Initialize app function init() { // Event Listeners itemForm.addEventListener('submit', onAddItemSubmit); itemList.addEventListener('click', onClickItem); clearBtn.addEventListener('click', clearItems); itemFilter.addEventListener('input', filterItems); document.addEventListener('DOMContentLoaded', displayItems); checkUI(); } init();
Puede cambiar código para ver el resultado
Resultado ↓
No hay comentarios:
Publicar un comentario
Entrada más reciente
Entrada antigua
Inicio
Suscribirse a:
Enviar comentarios (Atom)
No hay comentarios:
Publicar un comentario