15 - Local storage and event delegation (#2)

* First form event listener

* Logal storage setup

* Added function comment blocks

* Added check/uncheck all, plus clear items buttons

* Check/uncheck functionality improvements

* Amends

Author: spiralnebulam31

15 - LocalStorage/index-START.html

@@ -24,16 +24,190 @@ <h2>LOCAL TAPAS</h2>
       <input type="text" name="item" placeholder="Item Name" required>
       <input type="submit" value="+ Add Item">
     </form>
+    <button class="check-items">Check All</button>
+    <button class="clear">Clear Items</button>
   </div>
 
 <script>
   const addItems = document.querySelector('.add-items');
   const itemsList = document.querySelector('.plates');
-  const items = [];
 
+  // Try to get the 'items' from localStorage and parse it as JSON. If it doesn't exist, use an empty array.
+  const items = JSON.parse( localStorage.getItem( 'items' ) ) || [];
+
+  const checkItemsButton = document.querySelector('.check-items');
+  const clearButton = document.querySelector('.clear');
+
+  /**
+   * This function is called when the form is submitted to add a new item to the list.
+   * It prevents the default form submission behavior, gets the value from the input field,
+   * creates a new item object, adds it to the items array, updates the displayed list,
+   * saves the updated items array to localStorage, and resets the form.
+   * 
+   * @param {Event} e - The event object from the form submission.
+   * @returns {void}
+   */
+  function addItem( e ) {
+    // Prevent the form from refreshing the page when it is submitted
+    e.preventDefault();
+
+    // Get the value of the input field with name 'item' from the form
+    // We can use 'this' to refer to the form element that triggered the event
+    // We use the first parentheses to get the input element first and then we access its value
+    const text = ( this.querySelector( '[name=item]' ) ).value;
+
+    // Create an item object with the name from the input and a done property set to false
+    const item = {
+      text,
+      done: false
+    };
+
+    // Add the new item to the items array
+    items.push( item );
+
+    // Call the populateList function to update the displayed list of items
+    populateList( items, itemsList );
+
+    // Save the updated items array to localStorage as a JSON string
+    localStorage.setItem( 'items', JSON.stringify( items ) );
+
+    // Reset the form to clear the input field after adding the item
+    this.reset();
+
+    // Revert button text to 'Check All' if any item is unchecked, otherwise set it to 'Uncheck All'
+    updateCheckItemsButton();
+  }
+
+  /**
+   * This function populates the list of plates in the DOM.
+   * It takes an array of plate objects and a DOM element to display the list.
+   * Each plate object should have a 'text' property and a 'done' property.
+   * 
+   * @param {Array} plates - The array of plate objects to display.
+   * @param {HTMLElement} platesList - The DOM element to display the list of plates.
+   * @returns {void}
+   */
+  function populateList( plates = [], platesList ) {
+    // Clear the existing content of the platesList element before populating it with new items
+    platesList.innerHTML = '';
+
+    // Iterate over the array of plates and create a list item for each plate
+    plates.forEach( ( plate, i ) => {
+      const li = document.createElement( 'li' );
+
+      const checkbox = document.createElement( 'input' );
+      checkbox.type = 'checkbox';
+      checkbox.dataset.index = i;
+      checkbox.id = `item${i}`;
+      checkbox.checked = plate.done;
+
+      const label = document.createElement( 'label' );
+      label.htmlFor = `item${i}`;
+      label.textContent = plate.text;
+
+      li.append( checkbox, label );
+      platesList.append( li );
+    } );
+  }
+
+  /**
+   * This function toggles the 'done' property of an item when its checkbox is clicked.
+   * It updates the items array and saves the updated array to localStorage.
+   * 
+   * @param {Event} e - The event object from the click event.
+   * @returns {void}
+   */
+  function toggleDone( e ) {
+    // Check if the clicked element is not a checkbox, if so, return early and do nothing
+    if ( !e.target.matches( 'input' ) ) {
+      return;
+    }
+
+    // Get the clicked element, which should be the checkbox input
+    const clickedElement = e.target;
+
+    // Get the index of the clicked checkbox from the data attribute
+    const index = clickedElement.dataset.index;
+
+    // Toggle the done property of the corresponding item in the items array
+    items[ index ].done = !items[ index ].done;
+
+    // Save the updated items array to localStorage as a JSON string
+    localStorage.setItem( 'items', JSON.stringify( items ) );
+
+    // Revert button text to 'Check All' if any item is unchecked, otherwise set it to 'Uncheck All'
+    updateCheckItemsButton();
+  }
+
+  /**
+   * This function updates the state of the checkItemsButton based on the current items in the list.
+   * It checks if there are any items and if all items are marked as done to determine whether to enable or disable the button
+   * and to set the appropriate text for the button.
+   * 
+   * @returns {void}
+   */
+  function updateCheckItemsButton() {
+    const hasItems = items.length > 0;
+    const allDone = hasItems && items.every( item => item.done );
+    checkItemsButton.disabled = !hasItems;
+    checkItemsButton.textContent = allDone ? 'Uncheck All' : 'Check All';
+  }
+
+  /**
+   * This function sets the 'done' property of all items in the list to the specified state (true or false).
+   * It updates the items array, saves the updated array to localStorage, repopulates the list in the DOM,
+   * and updates the state of the checkItemsButton.
+   * 
+   * @param {boolean} state - The state to set for all items (true for done, false for not done).
+   * @returns {void}
+   */
+  function setAllDone( state ) {
+    items.forEach( item => item.done = state );
+    localStorage.setItem( 'items', JSON.stringify( items ) );
+    populateList( items, itemsList );
+    updateCheckItemsButton();
+  }
+
+  /**
+   * This function clears all items from the list by emptying the items array.
+   * It updates localStorage and repopulates the list in the DOM to reflect the changes.
+   * 
+   * @returns {void}
+   */
+  function clearItems() {
+    items.length = 0;
+    localStorage.setItem( 'items', JSON.stringify( items ) );
+    populateList( items, itemsList );
+    updateCheckItemsButton();
+  }
+
+  // Add an event listener to the form to handle the submit event and call the addItem function
+  // That will add the new item to the list when the form is submitted
+  addItems.addEventListener( 'submit', addItem );
+
+  // Add an event listener to the items list to handle click events and call the toggleDone function
+  // Listen for a click on the list and then the toggleDone function will check if the click was on a checkbox
+  // and toggle the done property of the corresponding item
+  itemsList.addEventListener( 'click', toggleDone );
+
+  // When the page loads, call the populateList function to display any items that are already in localStorage
+  // This will ensure that the list is populated with the saved items when the user revisits the page
+  // If there are no items in localStorage, it will just display an empty list until the user adds new items 
+  // Also update the checkItemsButton state based on the loaded items - this will ensure the button is correctly enabled/disabled and has the correct text when the page loads
+  populateList( items, itemsList );
+  updateCheckItemsButton();
+
+  // Add an event listener to the checkItemsButton to handle click events
+  // and call a function that checks or unchecks all items
+  checkItemsButton.addEventListener( 'click', () => {
+    const allDone = items.every( item => item.done );
+    setAllDone( !allDone );
+  } );
+
+  // Add an event listener to the clearButton to handle click events and call the clearItems function
+  clearButton.addEventListener( 'click', clearItems );
 </script>
 
 
 </body>
 </html>
-