Welcome to Invoice Creator APP 👋

Screenshoot

Requirements:

1. Array to hold services requested
2. Buttons to add service to array
3. Place to display data from array - updated every time the array changes
4. Once for same service
5. Total costs stays updated
6. Button to remove item from array
7. Button to submit/send invoice

Key learnings:

1. Array methods - forEach(), find(), findIndex()

services.forEach(service => {
  const {id, name, price} = service
  servicesBox.innerHTML += 
  `
      <button class="services-btn" id=${id}>${name}: $${price}</button>
  `

  const item = services.find(service => service.id === target.id)

  const item = services.findIndex(service => service.id === target.id)

2. Event Object

box.addEventListener("click", (e) => {
  const target = e.target
  if(target.tagName === "BUTTON") {
      const item = servicesCart.find(service => service.id === target.id)
      servicesCart.splice(item, 1)
      renderService(servicesCart)
  }
})

3. Localstorage

  localStorage.setItem("services", JSON.stringify(servicesCart))

  servicesCart = (JSON.parse(localStorage.getItem("services")))

Live server: https://effortless-pudding-1ca2ba.netlify.app/

Author: Sinisa Jovanovic(https://github.com/SinisaJO)