<repo_name>Saulnjie/GroceryTask<file_sep>/readme.md
# Saving the state of our grocery list

## UML

- Create all files needed and link them
- Gather data from the user
- Validate the data
- If data is not valid show the user a message.
- If the data is valid build the html.
- Allow the user to mark and item as completed.
- Persist the data.
- If a user refreshes the page the previous data should still show.
- Delete everything inside a list.

Module assignment:

- When an Item is checked change the background color
- Create a button that deleted everything from localStorage and clears the list
- ` localStorage.clear();`
- Submit a git link and a netlify link
<file_sep>/js/libs/writeToDom.js
import { saveToLocalStorage } from "./localStorageHelper.js";

export default function writeToDOM(
  domElementIAmGoingToPutHTMLInto,
  theArrayIAmGoingToCreateHTMLFrom
) {
  console.log(theArrayIAmGoingToCreateHTMLFrom);
  domElementIAmGoingToPutHTMLInto.innerHTML = "";

  theArrayIAmGoingToCreateHTMLFrom.forEach(function (groceryItem, iteration) {
    let ischecked = "";
    if (groceryItem.checked) {
      ischecked = "checked";
    }

    domElementIAmGoingToPutHTMLInto.innerHTML += `<li>
					<span>${groceryItem.name}</span>
					<input ${ischecked} type="checkbox" class="checkbox" data-id=${groceryItem.id}>
				</li>`;
  });

  const checkboxes = document.querySelectorAll(".checkbox");
  console.log(checkboxes);
  checkboxes.forEach(function (checkbox) {
    checkbox.onclick = function () {
      let indexOfItem = theArrayIAmGoingToCreateHTMLFrom.findIndex(function (
        groceryObject
      ) {
        return groceryObject.id === parseInt(checkbox.dataset.id);
      });

      console.log(indexOfItem);
      console.log(theArrayIAmGoingToCreateHTMLFrom[indexOfItem]);

      if (theArrayIAmGoingToCreateHTMLFrom[indexOfItem].checked) {
        theArrayIAmGoingToCreateHTMLFrom[indexOfItem].checked = "";
      } else {
        theArrayIAmGoingToCreateHTMLFrom[indexOfItem].checked = "checked";
      }

      saveToLocalStorage("groceryArrayKey", theArrayIAmGoingToCreateHTMLFrom);
    };
  });
}
<file_sep>/js/index.js
// imports always go on top
import { testLengthOfInput } from "./libs/validation.js";
import writeToDOM from "./libs/writeToDom.js";
import {
  saveToLocalStorage,
  getStorageItem,
} from "./libs/localStorageHelper.js";

const itemInput = document.querySelector(".itemInput");
const addItem = document.querySelector(".addItem");
const items = document.querySelector(".items");
let groceryArray = getStorageItem("groceryArrayKey");
const removeItem = document.querySelector(".reset-btn");

writeToDOM(items, groceryArray);

addItem.onclick = function () {
  let valueOfGroceryInputBox = itemInput.value;
  if (testLengthOfInput(valueOfGroceryInputBox, 3)) {
    let groceryItem = {
      id: groceryArray.length,
      name: valueOfGroceryInputBox,
    };
    groceryArray.push(groceryItem);
    saveToLocalStorage("groceryArrayKey", groceryArray);
    writeToDOM(items, groceryArray);
  } else {
    console.log("Input needs more characters");
  }
  itemInput.value = "";
};

removeItem.onclick = function () {
  localStorage.clear();
  items.innerHTML = "";
};
