<main>
  <p>Enter some numbers...</p>
  <form id="data_form">
    <input id="data_input" type="text" />
    <button id="data_submit" type="button">submit</button>
  </form>

  <div class="info">
    <div>collection:&nbsp;</div>
    <div id="collection"></div>
  </div>

  <p>Get manipulated data returned...</p>
  <div class="panel">
    <button id="data_sort" type="button">sort</button>
    <button id="data_sum" type="button">sum</button>
    <button id="data_average" type="button">average</button>
    <button id="data_clear" type="button">clear</button>
  </div>

  <div class="info">
    <div>message:&nbsp;</div>
    <div id="message"></div>
  </div>
</main>

@import url('https://fonts.googleapis.com/css?family=Open+Sans:700&display=swap');

html,
body {
  height: 100vh;
  margin: 0;
  padding: 0;
}
body {
  display: grid;
  place-items: center;
}

main {
  display: flex;
  flex-direction: column;
  width: 400px;
}

main p {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  margin-bottom: 0;
}

main input {
  border: 2px solid rebeccapurple;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  margin-bottom: 8px;
  padding: 8px 16px;
}

main button {
  background-color: white;
  border: 3px solid rebeccapurple;
  border-radius: 7px;
  color: rebeccapurple;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding: 8px 16px;
}
main button:hover {
  background-color: lavender;
}
main button:active {
  background-color: rebeccapurple;
  color: white;
}
main button:focus-visible {
  box-shadow: 0 0 0 2px white, 0 0 0 5px rebeccapurple;
  outline: none;
}

main .info {
  display: flex;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  margin: 8px 0 16px;
}

main .panel {
  display: flex;
  margin-bottom: 8px;
}

main .panel button {
  margin-right: 8px;
}

#message.error {
  color: red;
}

const dataInput = document.querySelector('#data_input');
const dataForm = document.querySelector('#data_form');
const dataSubmit = document.querySelector('#data_submit');
const dataSort = document.querySelector('#data_sort');
const dataSum = document.querySelector('#data_sum');
const dataAverage = document.querySelector('#data_average');
const dataClear = document.querySelector('#data_clear');
const collection = document.querySelector('#collection');
const message = document.querySelector('#message');

const numbers = new Proxy([],
  {
    get: function (target, prop) {
      message.classList.remove('error');
      
      if (prop === 'sort') return [...target].sort((a, b) => a - b);
      if (prop === 'sum') return [...target].reduce((a, b) => a + b);
      if (prop === 'average') return [...target].reduce((a, b) => a + b) / target.length;
      
      if (prop === 'clear') {
        message.innerText = `${target.length} number${target.length === 1 ? '' : 's'} cleared!`;
        target.splice(0, target.length);
        collection.innerText = target;
      }
      
      return target[prop];
    },
    set: function (target, prop, value) {
      if (prop === 'length') return true;
      
      dataInput.value = '';
      message.classList.remove('error');
      
      if (!Number.isInteger(value)) {
        console.error('Data provided is not a number!');
        message.innerText = 'Data provided is not a number!';
        message.classList.add('error');
        return false;
      }
      
      if (target.includes(value)) {
        console.error(`Number ${value} has already been submitted!`);
        message.innerText = `Number ${value} has already been submitted!`;
        message.classList.add('error');
        return false;
      }
      
      target[prop] = value;
      collection.innerText = target;
      message.innerText = `Number ${value} added!`;
      
      return true;
  }
});

dataForm.addEventListener('submit', (e) => {
  e.preventDefault();
  numbers.push(Number.parseInt(dataInput.value));
});

dataSubmit.addEventListener('click', () => {
  numbers.push(Number.parseInt(dataInput.value));
});

dataSort.addEventListener('click', () => {
  message.innerText = numbers.sort;
});

dataSum.addEventListener('click', () => {
  message.innerText = numbers.sum;
});

dataAverage.addEventListener('click', () => {
  message.innerText = numbers.average;
});

dataClear.addEventListener('click', () => {
  numbers.clear;
});