WesleySmits

<header class="calculator__display">
  <h2 class="calculator__title">TypeScript calculator</h2>
  <div class="calculator__screen">
    <span class="screen-value" data-role="display">0</span>
  </div>
</header>

WesleySmits

<section class="buttons grid">
  <button class="red" value="ac">AC</button>
  <button class="red" value="ce">ce</button>
  <button value="/">÷</button>
  <button value="*">x</button>

  <button value="7">7</button>
  <button value="8">8</button>
  <button value="9">9</button>
  <button value="-">-</button>

WesleySmits

class Calculator extends HTMLElement {
	constructor() {
        super();
    }
}

customElements.define('ws-calculator', Calculator);

WesleySmits

body {
    background: darkgray;
}

.calculator {
    display: block;
    height: 440px;
    width: 300px;
    margin-top: 10%;
    margin-left: auto;

WesleySmits

class Calculator extends HTMLElement {
+  #display: HTMLElement | null = null;

+  #buttons: HTMLButtonElement[] = [];

+  #query = '';

+  public get query(): string {
+      return this.#query;
+  }

WesleySmits

protected connectedCallback(): void {
  this.#setEventListeners();
}

protected disconnectedCallback(): void {
  this.#unsetEventListeners();
}

#setEventListeners(): void {
  this.#buttons.forEach((button) => {

WesleySmits

#handleButtonClick(event: Event): void {
  const target = event.target as HTMLButtonElement;
  if (target === null) {
    return;
  }

  const { value } = target;
  const userValue = target.innerText;
}

WesleySmits

#handleButtonClick(event: Event): void {
  const target = event.target as HTMLButtonElement;
  if (target === null) {
    return;
  }

  const { value } = target;
  const userValue = target.innerText;

+ switch (value) {

WesleySmits

#performCalculation(): void {

}

WesleySmits

#updateDisplay(): void {
    if (this.#display === null) {
        return;
    }

    this.#display.innerText = this.query;
}