WesleySmits

npm login

WesleySmits

#performCalculation(): void {
  const displayQuery = this.query.replace('÷', '/').replace('x', '*');
  const answer: number = eval(displayQuery);
  const formattedAnswer = +parseFloat(answer.toString()).toFixed(2);
  this.query = formattedAnswer.toString();
}

WesleySmits

public set query(value: string) {
  this.#query = value;
+ this.#updateDisplay();
}

WesleySmits

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

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

WesleySmits

#performCalculation(): void {

}

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

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

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

WesleySmits

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

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

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

WesleySmits

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

+  #buttons: HTMLButtonElement[] = [];

+  #query = '';

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

WesleySmits

body {
    background: darkgray;
}

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