MovieMaker.js

const MovieSoldEvent = new Event('movie:sold');

function Movie(name) {
 	var ticketsSold = 0;
  
  document.write(
    `<div className="Movie" id="movie-${name}">
    	<h4>${name}</h4>
      <div>Tickets sold: <span id="ticketsSold-${name}">${ticketsSold}</span></div>
      <button id="Buyone-${name}">Buy one</button>
      <button id="Familypack-${name}">Family pack</button>
    </div>`
  )

  function updateSold() {
    var elem = document.getElementById(`ticketsSold-${name}`)
    elem.innerHTML = ticketsSold;
    console.log(ticketsSold, ' tickets sold for ', name)
  }
  
  var elem = document.getElementById(`Buyone-${name}`)
  elem.addEventListener('click', () => {
     	ticketsSold++; 
      updateSold();
  })
  
  var elem = document.getElementById(`Familypack-${name}`)
  elem.addEventListener('click', () => {
     	ticketsSold += 5;
      updateSold();
  })
  
  return {
    name: name,
    get ticketsSold() {
      return ticketsSold
    },
    addEventListener(type, listener) {
      
    } 
  }
}

function BoxOffice(...movies) {

}

BoxOffice(
  Movie("Joker"),
  Movie("Last Chance Harvey"),
  Movie("The same kind of diffrent as me"),
)