Как я могу управлять HTML элементами DOM с помощью объектно-ориентированного программирования с Javascript

Question

Я недавно попал в OOP и пытаюсь что-то построить с его помощью. Первый проект - это калькулятор ИМТ, но я застрял. Мне удалось получить результаты BMI для отображения на консоли, но реализовать их в пользовательском интерфейсе сложно. Я попытался получить результаты вычислений, добавив их к созданным элементам пользовательского интерфейса, но это не работает, и я получаю код ошибки. Код ниже

class CalculatorInput {
  constructor(height, weight) {
    this.height = height;
    this.weight = weight;
  }
}

class Calculation {
  calculateResults(calculation) {
    console.log(calculation)
  }
}


class UI {
  displayResults(bmiCalc) {
    const textElement = document.createElement('h1');
    const display = document.querySelector('.display');
  }
}



document.querySelector('.input').addEventListener('submit', (e) => {
  const height = document.querySelector('#height').value;
  const weight = document.querySelector('#weight').value;
  const calculate = Math.floor(weight / Math.pow(height, 2));


  const bmiCalc = new CalculatorInput(height, weight);

  const ui = new UI;

  const calculation = new Calculation;

  calculation.calculateResults(calculate);

  ui.displayResults(bmiCalc);
  e.preventDefault();
})

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.card {
  background-color: #B4F767;
  margin: auto auto;
  height: 600px;
  width: 600px;
}

h1 {
  text-align: center;
  font-family: 'Caladea', serif;
}

.input {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-family: 'Caladea', serif;
  font-size: 1.5rem;
}

button {
  margin: 20px auto;
  display: block;
  background-color: #3B78F1;
  border: none;
  width: 100px;
  height: 60px;
  font-family: 'Caladea', serif;
  font-weight: 500;
  font-size: 1.2rem;
  border-radius: 20px;
}

button:focus {
  outline: none;
}

.display {
  text-align: center;
  font-family: 'Caladea', serif;
}

<div class="card">
  <h1>BMI Calculator</h1>
  <div>
    <form class="input">
      <label for="">Height in M</label>
      <input type="text" id="height">
      <label for="">Weight in KG</label>
      <input type="text" id="weight">
      <div>
        <button class="calculate" type="submit">Calculate</button>
      </div>
      <div class="display">

      </div>
    </form>
  </div>